Skip to content

Commit 8ea8d15

Browse files
cookiecrookcookiecrook
committed
AccName: Name From Contents Tests (web-platform-tests#42354)
Co-authored-by: Rahim Abdi New tests for the "name from content" portions of the AccName "name computation" algorithm.
1 parent b4d9d76 commit 8ea8d15

File tree

1 file changed

+230
-14
lines changed

1 file changed

+230
-14
lines changed

‎accname/name/comp_name_from_content.html

+230-14
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,251 @@
22
<html>
33
<head>
44
<title>Name Comp: Name From Content</title>
5+
<meta charset="utf-8">
56
<script src="/resources/testharness.js"></script>
67
<script src="/resources/testharnessreport.js"></script>
78
<script src="/resources/testdriver.js"></script>
89
<script src="/resources/testdriver-vendor.js"></script>
910
<script src="/resources/testdriver-actions.js"></script>
1011
<script src="/wai-aria/scripts/aria-utils.js"></script>
12+
<style type="text/css">
13+
14+
/*
15+
16+
Since the AccName spec is in flux about whitespace joiners, and the implementations don't match,
17+
normalize the whitespace (with extra leading/trailing) space.
18+
19+
No point in having the same in-flux spec change cause failures the remaining unrelated tests.
20+
21+
See more here:
22+
https://github.com/w3c/accname/issues/205
23+
https://github.com/w3c/accname/projects/1#card-42288231
24+
25+
*/
26+
27+
.simple-before::before {
28+
content: " before "; /* [sic] leading and trailing space */
29+
margin:0 0.1em;
30+
}
31+
.simple-after::after {
32+
content: " after "; /* [sic] leading and trailing space */
33+
margin:0 0.1em;
34+
}
35+
.no-space::before, .no-space::after {
36+
content: "nospace"; /* [sic] Unlike the others, NO extra leading/trailing space here. */
37+
}
38+
.simple-before:dir(rtl)::before {
39+
content: " من قبل "; /* [sic] leading and trailing space */
40+
}
41+
.simple-after:dir(rtl)::after {
42+
content: " بعد "; /* [sic] leading and trailing space */
43+
}
44+
.fallback-before::before {
45+
content: " before "; /* [sic] leading and trailing space */
46+
content: " before " / " alt-before "; /* Override the previous line for engines that support the Alternative Text syntax. */
47+
}
48+
.fallback-after::after {
49+
content: " after "; /* [sic] leading and trailing space */
50+
content: " after " / " alt-after "; /* Override the previous line for engines that support the Alternative Text syntax. */
51+
}
52+
.block > span {
53+
display: block;
54+
margin: 0 0.1em;
55+
}
56+
.iblock > span {
57+
display: inline-block;
58+
margin: 0 0.1em;
59+
}
60+
61+
</style>
1162
</head>
1263
<body>
1364

1465
<p>Tests the <a href="https://w3c.github.io/accname/#comp_name_from_content">#comp_name_from_content</a> portions of the AccName <em>Name Computation</em> algorithm.</p>
1566

16-
<h1 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h1>
67+
<p>This series of tests exercises the button, heading, and link elements, because each have different characteristics worthy of testing in each of the name computation algorithm scenarios:</p>
68+
<ul>
69+
<li>button is a leaf node with sub-level elements presentational.</li>
70+
<li>heading is block level, and can contain sub-level interactives like links.</li>
71+
<li>link (a[href]) is an interactive inline element that can include non-presentational descendants.</li>
72+
</ul>
73+
74+
<h1>ARIA roles, inline</h1>
75+
<span tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, inline" class="ex">label</span><br>
76+
<span tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, inline" class="ex">label</span><br>
77+
<span tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, inline" class="ex">label</span><br>
78+
<br>
79+
80+
<h1>ARIA roles, block</h1>
81+
<div tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, block" class="ex">label</div>
82+
<div tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, block" class="ex">label</div>
83+
<div tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, block" class="ex">label</div>
84+
<br>
85+
86+
<h1>simple</h1>
87+
<button data-expectedlabel="label" data-testname="button name from content" class="ex">label</button><br>
88+
<h3 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h3>
89+
<a href="#" data-expectedlabel="label" data-testname="link name from content" class="ex">label</a><br>
90+
<br>
91+
92+
<h1>simple with ::before</h1>
93+
<button data-expectedlabel="before label" data-testname="button name from content with ::before" class="ex simple-before">label</button><br>
94+
<h3 data-expectedlabel="before label" data-testname="heading name from content with ::before" class="ex simple-before">label</h3>
95+
<a href="#" data-expectedlabel="before label" data-testname="link name from content with ::before" class="ex simple-before">label</a><br>
96+
<br>
97+
98+
<h1>simple with ::after</h1>
99+
<button data-expectedlabel="label after" data-testname="button name from content with ::after" class="ex simple-after">label</button><br>
100+
<h3 data-expectedlabel="label after" data-testname="heading name from content with ::after" class="ex simple-after">label</h3>
101+
<a href="#" data-expectedlabel="label after" data-testname="link name from content with ::after" class="ex simple-after">label</a><br>
102+
<br>
103+
104+
<h1>simple with ::before and ::after</h1>
105+
<button data-expectedlabel="before label after" data-testname="button name from content with ::before and ::after" class="ex simple-before simple-after">label</button><br>
106+
<h3 data-expectedlabel="before label after" data-testname="heading name from content with ::before and ::after" class="ex simple-before simple-after">label</h3>
107+
<a href="#" data-expectedlabel="before label after" data-testname="link name from content with ::before and ::after" class="ex simple-before simple-after">label</a><br>
108+
<br>
109+
110+
<h1>no space joiners ::before and ::after</h1>
111+
<button data-expectedlabel="nospacelabelnospace" data-testname="button name from content no space joiners ::before and ::after" class="ex no-space">label</button><br>
112+
<h3 data-expectedlabel="nospacelabelnospace" data-testname="heading name from content no space joiners ::before and ::after" class="ex no-space">label</h3>
113+
<a href="#" data-expectedlabel="nospacelabelnospace" data-testname="link name from content no space joiners ::before and ::after" class="ex no-space">label</a><br>
114+
<br>
115+
116+
<h1>Arabic right-to-left (RTL) with ::before and ::after</h1>
117+
<div dir="rtl" lang="ar">
118+
<button data-expectedlabel="من قبل اسم بعد" data-testname="button name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</button><br>
119+
<h3 data-expectedlabel="من قبل اسم بعد" data-testname="heading name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</h3>
120+
<a href="#" data-expectedlabel="من قبل اسم بعد" data-testname="link name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</a><br>
121+
</div>
122+
<br>
123+
124+
<h1><a href="https://drafts.csswg.org/css-content/#alt">Alternative Text for CSS content (previously `alt:`)</a> in pseudo-elements</h1>
125+
<p>rendered text should be "before label after"</p>
126+
<p>accessibility label should be "alt-before label alt-after"</p>
127+
<button data-expectedlabel="alt-before label alt-after" data-testname="button name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</button><br>
128+
<h3 data-expectedlabel="alt-before label alt-after" data-testname="heading name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</h3>
129+
<a href="#" data-expectedlabel="alt-before label alt-after" data-testname="link name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</a><br>
130+
<br>
131+
132+
<h1>simple w/ for each child</h1>
133+
<button data-expectedlabel="one two three" data-testname="button name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></button><br>
134+
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></h3>
135+
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></a><br>
136+
<br>
137+
138+
<h1>simple for each child with image</h1>
139+
<button data-expectedlabel="one two three" data-testname="button name from content for each child including image" class="ex"><span>one</span> <img src="#" alt="two"> <span>three</span></button><br>
140+
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child including image" class="ex"><span>one</span> <img src="#" alt="two"> <span>three</span></h3>
141+
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child including image" class="ex"><span>one</span> <img src="#" alt="two"> <span>three</span></a><br>
142+
<br>
143+
144+
145+
<h1>simple for each child with extra nesting containing image</h1>
146+
<button data-expectedlabel="one two three four" data-testname="button name from content for each child including nested image" class="ex"><span>one</span> <span>two <img src="#" alt="three"></span> <span>four</span></button><br>
147+
<h3 data-expectedlabel="one two three four" data-testname="heading name from content for each child including nested image" class="ex"><span>one</span> <span>two <img src="#" alt="three"></span> <span>four</span></h3>
148+
<a href="#" data-expectedlabel="one two three four" data-testname="link name from content for each child including nested image" class="ex"><span>one</span> <span>two <img src="#" alt="three"></span> <span>four</span></a><br>
149+
<br>
150+
151+
<h1>heading with nested button with nested image</h1>
152+
<h3 data-expectedlabel="heading button image button heading" data-testname="heading name from content for each child including nested button with nested image" class="ex">
153+
heading
154+
<button>
155+
button
156+
<img src="#" alt="image">
157+
button
158+
</button>
159+
heading
160+
</h3>
161+
162+
<h1>heading with nested link with nested image</h1>
163+
<h3 data-expectedlabel="heading link image link heading" data-testname="heading name from content for each child including nested link with nested image" class="ex">
164+
heading
165+
<a href="#">
166+
link
167+
<img src="#" alt="image">
168+
link
169+
</a>
170+
heading
171+
</h3>
172+
173+
<h1>heading with nested link with nested image using aria-label</h1>
174+
<h3 data-expectedlabel="heading link aria-label heading" data-testname="heading name from content for each child including nested link using aria-label with nested image" class="ex">
175+
heading
176+
<a href="#" aria-label="link aria-label"><!-- should skip the other link text -->
177+
ignored link text
178+
<img id="nested_image_label_1" src="#" alt="ignored image alt">
179+
ignored link text
180+
</a>
181+
heading
182+
</h3>
183+
184+
<h1>heading with nested link with nested image using aria-labelledby</h1>
185+
<h3 data-expectedlabel="heading image heading" data-testname="heading name from content for each child including nested link using aria-labelledby with nested image" class="ex">
186+
heading
187+
<a href="#" aria-labelledby="nested_image_label1"><!-- should skip the other link text -->
188+
ignored link text
189+
<img id="nested_image_label1" src="#" alt="image">
190+
ignored link text
191+
</a>
192+
heading
193+
</h3>
194+
195+
<h1>heading with two nested links referencing image using aria-labelledby</h1>
196+
<h3 data-expectedlabel="image link2 link3" data-testname="heading name from content for each child including two nested links using aria-labelledby with nested image" class="ex">
197+
<a href="#" aria-labelledby="nested_image_label2">
198+
link1<!-- this text is skipped because of aria-labelledby -->
199+
</a>
200+
<a href="#" data-expectedlabel="link2 image link3" data-testname="link name from content for each child including nested image (referenced elsewhere via labelledby)" class="ex">
201+
link2
202+
<img id="nested_image_label2" src="#" alt="image">
203+
<!-- image skipped in this link (when computing heading text) because it was already referenced by the first link within this heading label recursion cycle. -->
204+
<!-- but image not skipped when computing the text of the link itself since it has not been referenced in that context -->
205+
link3
206+
</a>
207+
</h3>
208+
209+
<!-- cross-referencial edge case-->
210+
<h1>heading with link referencing image using aria-labelledby, that in turn references text element via aria-labelledby</h1>
211+
<h3 data-expectedlabel="image link" data-testname="heading with link referencing image using aria-labelledby, that in turn references text element via aria-labelledby" class="ex">
212+
<a href="#" aria-labelledby="nested_image_label3">
213+
<span class="note" id="crossref_link">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
214+
</a>
215+
<!-- but it's picked up again in inverse order b/c of cross-referencial aria-labelledby edge case -->
216+
<img id="nested_image_label_3" src="#" alt="image" aria-labelledby="crossref_link">
217+
</h3>
218+
219+
<!-- self-referencial edge case-->
220+
<h1>heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby</h1>
221+
<h3 data-expectedlabel="image link" data-testname="heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby" class="ex">
222+
<a href="#" aria-labelledby="nested_image_label4">
223+
<span class="note" id="crossref_link2">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
224+
</a>
225+
<!-- but it's picked up again (after the self-referencial image alt) in inverse order b/c of cross-referencial aria-labelledby edge case -->
226+
<img id="nested_image_label4" src="#" alt="image" aria-labelledby="nested_image_label4 crossref_link2">
227+
</h3>
17228

18-
<!--
19229

20-
Todo: test all remaining cases of https://w3c.github.io/accname/#comp_name_from_content
21-
- comp_name_from_content_reset
22-
- comp_name_from_content_pseudo_element
23-
- comp_name_from_content_pseudo_element_before
24-
- comp_name_from_content_pseudo_element_after
25-
- comp_name_from_content_for_each_child
26-
- comp_name_from_content_for_each_child_set_current
27-
- comp_name_from_content_for_each_child_recursion
28-
- comp_for_each_child_append
29-
- comp_name_from_content_return
230+
<!-- Note: The following test is out of line with the spec, but matching two out of three implementations at the time of writing, and spec changes are expeected. -->
231+
<!-- See details in https://github.com/w3c/accname/issues/205 -->
232+
<!-- Final spec resolution will be addressed in AccName Whitespace Project: https://github.com/w3c/accname/projects/1#card-42288231 -->
233+
<h1>simple w/ for each child (w/o spaces and display:inline)</h1>
234+
<button data-expectedlabel="onetwothree" data-testname="button name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></button><br>
235+
<h3 data-expectedlabel="onetwothree" data-testname="heading name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></h3>
236+
<a href="#" data-expectedlabel="onetwothree" data-testname="link name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></a><br>
237+
<br>
30238

31-
Todo: test all remaining *recursive* cases in https://w3c.github.io/accname/#comp_recursive_name_from_content
239+
<h1>simple w/ for each child (w/o spaces and display:block)</h1>
240+
<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></button><br>
241+
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></h3>
242+
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></a><br>
243+
<br>
32244

33-
-->
245+
<h1>simple w/ for each child (w/o spaces and display:inline block)</h1>
246+
<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></button><br>
247+
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></h3>
248+
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></a><br>
249+
<br>
34250

35251
<script>
36252
AriaUtils.verifyLabelsBySelector(".ex");

0 commit comments

Comments
 (0)