1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
const {
L10N,
} = require("resource://devtools/client/accessibility/utils/l10n.js");
const TEST_URI = `<html>
<head>
<meta charset="utf-8"/>
<title>Accessibility Panel Test</title>
</head>
<body>
<h1>Top level header</h1>
<p>This is a paragraph.</p>
</body>
</html>`;
/**
* Test data has the format of:
* {
* desc {String} description for better logging
* setup {Function} An optional setup that needs to be performed before
* the state of the tree and the sidebar can be checked.
* expected {JSON} An expected states for the tree and the sidebar.
* }
*/
const tests = [
{
desc: "Test the initial accessibility tree and sidebar states.",
expected: {
tree: [
{
role: "document",
name: `"Accessibility Panel Test"`,
},
],
sidebar: {
name: "Accessibility Panel Test",
role: "document",
actions: [],
value: "",
description: "",
keyboardShortcut: "",
childCount: 2,
indexInParent: 0,
states: [
// The focused state is an outdated state, since the toolbox should now
// have the focus and not the content page. See Bug 1702709.
"focused",
"readonly",
"focusable",
"opaque",
"enabled",
"sensitive",
],
},
},
},
{
desc: "Expand first tree node.",
setup: ({ doc }) => toggleRow(doc, 0),
expected: {
tree: [
{
role: "document",
name: `"Accessibility Panel Test"`,
},
{
role: "heading",
name: `"Top level header"`,
},
{
role: "paragraph",
name: `""`,
},
],
},
},
{
desc: "Select second tree node.",
setup: ({ doc }) => selectRow(doc, 1),
expected: {
sidebar: {
name: "Top level header",
role: "heading",
actions: [],
value: "",
description: "",
keyboardShortcut: "",
childCount: 1,
indexInParent: 0,
relations: {
"containing document": {
role: "document",
name: "Accessibility Panel Test",
},
},
states: ["selectable text", "opaque", "enabled", "sensitive"],
},
},
},
{
desc: "Select containing document.",
setup: async ({ doc, win }) => {
const relations = await selectProperty(doc, "/relations");
AccessibilityUtils.setEnv({
// Keyboard navigation is handled on the container level using arrow
// keys.
mustHaveAccessibleRule: false,
});
EventUtils.sendMouseEvent(
{ type: "click" },
relations.querySelector(".arrow"),
win
);
AccessibilityUtils.resetEnv();
const containingDocRelation = await selectProperty(
doc,
"/relations/containing document"
);
AccessibilityUtils.setEnv({
// Keyboard interaction is only enabled when the row is selected and
// activated.
nonNegativeTabIndexRule: false,
});
const selectElementInTreeButton = containingDocRelation.querySelector(
".open-accessibility-inspector"
);
ok(!!selectElementInTreeButton, "There's a button to select the element");
is(
selectElementInTreeButton.getAttribute("title"),
L10N.getStr("accessibility.accessible.selectElement.title"),
"The button has the expected title"
);
EventUtils.sendMouseEvent(
{ type: "click" },
selectElementInTreeButton,
win
);
AccessibilityUtils.resetEnv();
},
expected: {
sidebar: {
name: "Accessibility Panel Test",
role: "document",
actions: [],
value: "",
description: "",
keyboardShortcut: "",
childCount: 2,
indexInParent: 0,
states: ["readonly", "focusable", "opaque", "enabled", "sensitive"],
},
},
},
];
/**
* Check navigation within the tree.
*/
addA11yPanelTestsTask(
tests,
TEST_URI,
"Test Accessibility panel relation navigation."
);
|
