-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathdisplay-contents-role-and-label.html
295 lines (255 loc) · 22.5 KB
/
display-contents-role-and-label.html
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!doctype html>
<html>
<head>
<title>Testing accessibility of display: contents</title>
<link rel="help" href="https://drafts.csswg.org/css-display-4/#box-generation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/wai-aria/scripts/aria-utils.js"></script>
</head>
<body>
<!-- Dec 2023 notes for "display: contents" testing:
- Per CSS spec, setting "display: contents" must not alter an element's semantics (https://www.w3.org/TR/css-display-3/#valdef-display-contents):
"As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and
property inheritance, are not affected."
- As of December 2023, the current state of cross-browser, automated web accessibility testing is limited to retrieving the following
accessibility object properties with planned future enhancements (https://github.com/WICG/aom/issues/203):
- computedRole
- computedLabel
-->
<h1>Testing accessibility of display: contents</h1>
<p>Verifies accessibility behavior of the <a href="https://www.w3.org/TR/css-display-3/#box-generation">contents</a> keyword for the CSS display property</p>
<h2>Accname</h2>
<button aria-labelledby="b2" style="display: contents;" data-expectedlabel="hidden label" data-expectedrole="button" data-testname="button with display: contents is labelled via referenced hidden span" class="ex-role-and-label">
<span aria-hidden="true" id="b2">hidden label</span>
<span hidden>hidden from all users</span>
<span>visible to all users</span>
</button>
<span id="a1">label</span>
<a href="#" aria-labelledby="a1" style="display: contents;" data-expectedlabel="label" data-expectedrole="link" data-testname="link with display: contents is labelled via aria-labelledby" class="ex-role-and-label">x</a>
<nav aria-labelledby="a1" style="display: contents;" data-expectedlabel="label" data-expectedrole="navigation" data-testname="nav with display: contents is labelled via aria-labelledby" class="ex-role-and-label"></nav>
<button aria-label="label" style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via aria-label" class="ex-role-and-label"></button>
<div role="group" aria-label="label" style="display: contents;" data-expectedlabel="label" data-expectedrole="group" data-testname="div with role group with display: contents is labelled via aria-label" class="ex-role-and-label"></div>
<!-- <img> renders "display: contents" the same as "display:none", see: https://www.w3.org/TR/css-display-3/#unbox-html-->
<label for="label-for-button">label</label>
<button id="label-for-button" style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via label for/id association" class="ex-role-and-label"></button>
<!-- SVG and display: contents behavior: https://github.com/w3c/svgwg/issues/305-->
<svg viewbox="0 0 100 50">
<g style="display: contents;" fill="silver" stroke="blue" data-expectedlabel="group label" data-expectedrole="group" data-testname="g element with display: contents, as child of svg, is labelled via title element" class="ex-role-and-label">
<title>group label</title>
<circle cx="20" cy="20" r="10" />
<circle cx="20" cy="20" r="10" />
</g>
</svg>
<a href="#" style="display: contents;" data-expectedlabel="label" data-expectedrole="link" data-testname="link with display: contents is labelled via name from contents" class="ex-role-and-label">label</a>
<button style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via name from contents" class="ex-role-and-label">label</button>
<h3 style="display: contents;" data-expectedlabel="label" data-expectedrole="heading" data-testname="h3 with display: contents is labelled via name from contents" class="ex-role-and-label">label</h3>
<h2>Accessibility roles</h2>
<!-- Buttons -->
<button style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="button with display: contents has button role" class="ex-role-and-label">x</button>
<button role="button" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="button with explicit button role and display: contents has button role" class="ex-role-and-label">x</button>
<div role="button" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="div with button role and display: contents has button role" class="ex-role-and-label">x</div>
<div role="button" tabindex="0" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="div with button role, tabindex=0 and display: contents has button role" class="ex-role-and-label">x</div>
<!-- Display: Flex -->
<table style="display: flex; flex-flow: column nowrap;" data-expectedrole="table">
<thead>
<tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with display: flex, has row role" class="ex-role">
<th data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th as child of tr with display: contents, within table with display: flex, has columnheader role" class="ex-role-and-label">x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr style="display: contents;">
<td data-expectedrole="cell" data-expectedlabel="x" data-testname="td as child of tr with display: contents, within table with display: flex, has cell role" class="ex-role-and-label">x</td>
<td>x</td>
</tr>
</tbody>
</table>
<table role="table" style="display: flex; flex-flow: column nowrap;" data-expectedrole="table">
<thead>
<tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with role=table with display: flex, has row role" class="ex-role">
<th data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th as child of tr with display: contents, within table with role=table with display: flex, has columnheader role" class="ex-role-and-label">x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr style="display: contents;">
<td data-expectedrole="cell" data-expectedlabel="x" data-testname="td as child of tr with display: contents, within table with role=table with display: flex, has cell role" class="ex-role-and-label">x</td>
<td>x</td>
</tr>
</tbody>
</table>
<table role="grid" style="display: flex; flex-flow: column nowrap;" data-expectedrole="grid">
<thead>
<tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with role=grid with display: flex, has row role" class="ex-role">
<th data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th as child of tr with display: contents, within table with role=grid with display: flex, has columnheader role" class="ex-role-and-label">x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr style="display: contents;">
<td data-expectedrole="gridcell" data-expectedlabel="x" data-testname="td as child of tr with display: contents, within table with role=grid with display: flex, has gridcell role" class="ex-role-and-label">x</td>
<td>x</td>
</tr>
</tbody>
</table>
<!-- Display: Grid -->
<div style="display: grid; grid-template-columns: 1fr 100px; grid-gap: 1em;">
<h2>x</h2>
<ul style="display: contents" data-expectedrole="list" data-testname="ul with display: contents, as child of div with display: grid, has list role" class="ex-role">
<li>x</li>
<li data-expectedrole="listitem" data-expectedlabel="x" data-testname="listitem within ul with display: contents, as child of div with display: grid, has listitem role" class="ex-role-and-label">x</li>
</ul>
</div>
<!-- Generics -->
<div style="display: contents;" data-testname="div with display: contents has generic role" class="ex-generic">x</div>
<span style="display: contents;" data-testname="span with display: contents has generic role" class="ex-generic">x</span>
<!-- Headings -->
<h3 style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="h3 with display: contents has heading role" class="ex-role-and-label">x</h3>
<div role="heading" aria-level="3" style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="div with heading role, aria-level=3 and display: contents has heading role" class="ex-role-and-label">x</div>
<span role="heading" aria-level="1" style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="span with heading role, aria-level=1 and display: contents has heading role" class="ex-role-and-label">x</span>
<!-- Landmarks and regions -->
<header style="display: contents;" data-expectedrole="banner" data-testname="header with display: contents has banner role" class="ex-role">x</header>
<nav style="display: contents;" data-expectedrole="navigation" data-testname="nav with display: contents has navigation role" class="ex-role">x</nav>
<aside style="display: contents;" data-expectedrole="complementary" data-testname="aside with display: contents has complementary role" class="ex-role">x</aside>
<main style="display: contents;" data-expectedrole="main" data-testname="main with display: contents has main role" class="ex-role">x</main>
<footer style="display: contents;" data-expectedrole="contentinfo" data-testname="footer with display: contents has contentinfo role" class="ex-role">x</footer>
<form aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="form with display: contents has form role" class="ex-role-and-label">x</form>
<search style="display: contents;" data-expectedrole="search" data-testname="search with display: contents has search role" class="ex-role">x</search>
<section aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="section with aria-label and display: contents has region role" class="ex-role-and-label"></section>
<div role="banner" style="display: contents;" data-expectedrole="banner" data-testname="div with role banner and display: contents has banner role" class="ex-role">x</div>
<div role="navigation" style="display: contents;" data-expectedrole="navigation" data-testname="div with role navigation and display: contents has navigation role" class="ex-role">x</div>
<div role="complementary" style="display: contents;" data-expectedrole="complementary" data-testname="div with role complementary and display: contents has complementary role" class="ex-role">x</div>
<div role="main" style="display: contents;" data-expectedrole="main" data-testname="div with role main and display: contents has main role" class="ex-role">x</div>
<div role="contentinfo" style="display: contents;" data-expectedrole="contentinfo" data-testname="div with role contentinfo and display: contents has contentinfo role" class="ex-role">x</div>
<div role="region" aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="div with role region, aria-label and display: contents has region role" class="ex-role-and-label">x</div>
<div role="form" aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="div with role form, aria-label and display: contents has form role" class="ex-role-and-label">x</div>
<div role="search" style="display: contents;" data-expectedrole="search" data-testname="div with role search and display: contents has search role" class="ex-role">x</div>
<!-- Links -->
<a href="#" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="link with display: contents has link role" class="ex-role-and-label">x</a>
<a href="#" role="link" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="link with explicit link role and display: contents has link role" class="ex-role-and-label">x</a>
<div role="link" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="div with link role and display: contents has link role" class="ex-role-and-label">x</div>
<div role="link" tabindex="0" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="div with link role, tabindex=0 and display: contents has link role" class="ex-role-and-label">x</div>
<!-- Lists -->
<ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents (child li has display: contents) has list role" class="ex-role">
<li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="x" data-testname="li as child of ul with role list, both with display: contents, has listitem role" class="ex-role-and-label">x</li>
<li>y</li>
</ul>
<ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents has list role" class="ex-role">
<li>x</li>
<li data-expectedrole="listitem" data-expectedlabel="y" data-testname="li, as child of ul with role list and display: contents, has listitem role" class="ex-role-and-label">y</li>
</ul>
<ul role="list">
<li>x</li>
<li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="li with display: contents, as child of ul with role list, has listitem role" class="ex-role-and-label">y</li>
</ul>
<ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role (child li has display: contents)" class="ex-role">
<li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="x" data-testname="li as child of ol with role list, both with display: contents, has listitem role" class="ex-role-and-label">x</li>
<li>y</li>
</ol>
<ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role" class="ex-role">
<li>x</li>
<li data-expectedrole="listitem" data-expectedlabel="y" data-testname="li, as child of ol with role list and display: contents, has listitem role" class="ex-role-and-label">y</li>
</ol>
<ol role="list">
<li>x</li>
<li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="li with display: contents, as child of ol, has listitem role" class="ex-role-and-label">y</li>
</ol>
<ol role="list">
<li>x</li>
<li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="li with display: contents, as child of ol with role list, has listitem role" class="ex-role-and-label">y</li>
</ol>
<div role="list" style="display: contents;" data-expectedrole="list" data-testname="div with list role and display: contents has list role" class="ex-role">
<div role="listitem" data-expectedrole="listitem" data-expectedlabel="x" data-testname="div with listitem role, as child of div with display: contents, has listitem role" class="ex-role-and-label">x</div>
<div>y</div>
</div>
<div role="list" style="display: contents;" data-expectedrole="list" data-testname="div with list role and display: contents has list role (child div with listitem role has display: contents)" class="ex-role">
<div>x</div>
<div role="listitem" style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="div with listitem role (as child of div with list role), both with display: contents, has listitem role" class="ex-role-and-label">y</div>
</div>
<div role="list">
<div>x</div>
<div role="listitem" style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="div with listitem role with display: contents, as child of div with list role, has listitem role" class="ex-role-and-label">y</div>
</div>
<!-- Lists: description lists -> wpt/html-aam/roles.html -->
<!-- Tables (including grids/treegrids) -->
<table role="table" style="display: contents;" data-expectedrole="table" data-testname="table with role table and display: contents has table role" class="ex-role">
<thead>
<tr style="display: contents;" data-expectedrole="row" data-testname="tr in table with role table and display: contents has row role" class="ex-role">
<th style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="td within tr both with display: contents, in table with role table and display: contents, has columnheader role" class="ex-role-and-label">x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display: contents;" data-expectedrole="cell" data-expectedlabel="x" data-testname="td within tr in table with role table, all with display: contents, has cell role" class="ex-role-and-label">x</td>
<td>x</td>
</tr>
</tbody>
</table>
<div role="table" style="display: contents;" data-expectedrole="table" data-testname="div with role table with display: contents has table role" class="ex-role">
<div role="rowgroup" style="display: contents;" data-expectedrole="rowgroup" data-testname="div with role rowgroup in div with role table, both with display: contents, has rowgroup role" class="ex-role">
<div role="row">
<div role="columnheader" style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="div with role columnheader with display: contents, in div with role rowgroup within div with table role both with display: contents, has columnheader role" class="ex-role-and-label">x</div>
<div role="columnheader">x</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="cell">x</div>
<div role="cell">x</div>
</div>
</div>
</div>
<table role="grid" style="display: contents;" data-expectedrole="grid" data-testname="table with role grid and display: contents has grid role">
<thead>
<tr style="display: contents;" data-expectedrole="row" data-testname="tr within table with role grid, both with display: contents, has row role">
<th style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th within table with role grid, both with display: contents, has columnheader role" class="ex-role-and-label">x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display: contents;" data-expectedrole="gridcell" data-expectedlabel="x" data-testname="td within table with role grid, both with display: contents, has gridcell role" class="ex-role-and-label">x</td>
<td>x</td>
</tr>
</tbody>
</table>
<div role="grid" style="display: contents;" data-expectedrole="grid" data-testname="div with role grid with display: contents has grid role" class="ex-role">
<div role="rowgroup" style="display: contents;" data-expectedrole="rowgroup" data-testname="div with role rowgroup in div with role grid, both with display: contents, has rowgroup role" class="ex-role">
<div role="row">
<div role="columnheader" style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="div with role columnheader with display: contents, in div with role rowgroup within div with grid role both with display: contents, has rowgroup role" class="ex-role-and-label">x</div>
<div role="columnheader">x</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="gridcell"></div>
<div role="gridcell" style="display: contents;" data-expectedrole="gridcell" data-expectedlabel="x" data-testname="div with gridcell role and display: contents, within div with role row contained in a div with role grid both with display: contents, has gridcell role" class="ex-role-and-label">x</div>
</div>
</div>
</div>
<div role="grid" tabindex="0" style="display: contents;" data-expectedrole="grid" data-testname="div with role grid, tabindex=0 and display: contents has grid role" class="ex-role">
</div>
<table role="treegrid" style="display: contents;" data-expectedrole="treegrid" data-testname="table with role treegrid and display: contents has treegrid role" class="ex-role"></table>
<div role="treegrid" style="display: contents;" data-expectedrole="treegrid" data-testname="div with role treegrid and display: contents has treegrid role" class="ex-role"></div>
<ul role="tree" style="display: contents;" data-expectedrole="tree" data-testname="ul with role tree and display: contents has tree role" class="ex-role">
<li role="treeitem" aria-expanded="true" style="display: contents;" data-expectedrole="treeitem" data-expectedlabel="x" data-testname="li with role treeitem and display: contents, within ul with role tree and display: contents, has treeitem role" class="ex-role-and-label">
<span>x</span>
<ul role="group">
<li role="treeitem" aria-expanded="false" style="display: contents;" data-expectedrole="treeitem" data-expectedlabel="x" data-testname="li with role treeitem and display: contents, within ul with role=group (within ul with role tree and display: contents), has treeitem role" class="ex-role-and-label">
<span>x</span>
</li>
</ul>
</li>
</ul>
<script>
AriaUtils.verifyRolesBySelector(".ex-role");
AriaUtils.verifyRoleAndLabelBySelector(".ex-role-and-label");
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
</script>
</body>
</html>