Skip to content

Commit f027bb0

Browse files
cookiecrookcookiecrook
authored
AccName: additional text node tests (#42407)
Co-authored-by: jugglinmike Co-authored-by: rahimabdi
1 parent 07417e7 commit f027bb0

File tree

2 files changed

+138
-11
lines changed

2 files changed

+138
-11
lines changed

‎accname/name/comp_text_node.html

+125-9
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,139 @@
1313

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

16-
<!-- I'm not certain whether #comp_text_node requires a lot of testing outside of the #comp_name_from_content contexts, -->
17-
<!-- but I did think of one example where text node versus comment node may make a difference when joining text nodes with a space vs innerText. -->
16+
<!--
1817
19-
<!-- Skipped (class="ex" removed) until https://github.com/w3c/accname/issues/193 is resolved -->
20-
<h2 class="ex-skipped" data-expectedlabel="heading label" data-testname="heading with text/comment/text nodes, no space">
21-
heading<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
22-
</h2>
18+
Note: some overlap with the tests in:
19+
- /accname/name/comp_label.html
20+
- /accname/name/comp_name_from_content.html
21+
22+
-->
23+
24+
<h1>text/element/text nodes, no space</h1>
25+
<span role="button" tabindex="0" class="ex" data-expectedlabel="buttonlabel" data-testname="span[role=button] with text/element/text nodes, no space">button<span></span>label</span>
26+
<div role="heading" class="ex" data-expectedlabel="headinglabel" data-testname="div[role=heading] with text/element/text nodes, no space">heading<span></span>label</div>
27+
<button class="ex" data-expectedlabel="buttonlabel" data-testname="button with text/element/text nodes, no space">button<span></span>label</button>
28+
<h3 class="ex" data-expectedlabel="headinglabel" data-testname="heading with text/element/text nodes, no space">heading<span></span>label</h3>
29+
<a href="#" class="ex" data-expectedlabel="linklabel" data-testname="link with text/element/text nodes, no space">link<span></span>label</a>
30+
<br>
2331

32+
<h1>text/comment/text nodes, no space</h1>
33+
<!-- Note: This set is not currently to spec until https://github.com/w3c/accname/issues/193 is resolved. -->
34+
<span role="button" tabindex="0" class="ex" data-expectedlabel="buttonlabel" data-testname="span[role=button] with text/comment/text nodes, no space">
35+
button<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
36+
</span>
37+
<div role="heading" class="ex" data-expectedlabel="headinglabel" data-testname="div[role=heading] with text/comment/text nodes, no space">
38+
heading<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
39+
</div>
40+
<button class="ex" data-expectedlabel="buttonlabel" data-testname="button with text/comment/text nodes, no space">
41+
button<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
42+
</button>
43+
<h3 class="ex" data-expectedlabel="headinglabel" data-testname="heading with text/comment/text nodes, no space">
44+
heading<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
45+
</h3>
46+
<a href="#" class="ex" data-expectedlabel="linklabel" data-testname="link with text/comment/text nodes, no space">
47+
link<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
48+
</a>
49+
<br>
2450

25-
<h2 class="ex" data-expectedlabel="heading label" data-testname="heading with text/comment/text nodes, with space">
51+
<h1>text/comment/text nodes, with space</h1>
52+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button label" data-testname="span[role=button] with text/comment/text nodes, with space">
53+
button
54+
<!-- comment node between text nodes with leading/trailing whitespace -->
55+
label
56+
</span>
57+
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text/comment/text nodes, with space">
2658
heading
2759
<!-- comment node between text nodes with leading/trailing whitespace -->
2860
label
29-
</h2>
61+
</div>
62+
<button class="ex" data-expectedlabel="button label" data-testname="button with text/comment/text nodes, with space">
63+
button
64+
<!-- comment node between text nodes with leading/trailing whitespace -->
65+
label
66+
</button>
67+
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text/comment/text nodes, with space">
68+
heading
69+
<!-- comment node between text nodes with leading/trailing whitespace -->
70+
label
71+
</h3>
72+
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text/comment/text nodes, with space">
73+
link
74+
<!-- comment node between text nodes with leading/trailing whitespace -->
75+
label
76+
</a>
77+
<br>
78+
79+
<h1>text node, with tab char</h1>
80+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button label" data-testname="span[role=button] with text node, with tab char">button label</span>
81+
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text node, with tab char">heading label</div>
82+
<button class="ex" data-expectedlabel="button label" data-testname="button with text node, with tab char">button label</button>
83+
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text node, with tab char">heading label</h3>
84+
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text node, with tab char">link label</a>
85+
<br>
86+
87+
<h1>text node, with non-breaking space</h1>
88+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button&nbsp;label" data-testname="span[role=button] with text node, with non-breaking space">button&nbsp;label</span>
89+
<div role="heading" class="ex" data-expectedlabel="heading&nbsp;label" data-testname="div[role=heading] with text node, with non-breaking space">heading&nbsp;label</div>
90+
<button class="ex" data-expectedlabel="button&nbsp;label" data-testname="button with text node, with non-breaking space">button&nbsp;label</button>
91+
<h3 class="ex" data-expectedlabel="heading&nbsp;label" data-testname="heading with text node, with non-breaking space">heading&nbsp;label</h3>
92+
<a href="#" class="ex" data-expectedlabel="link&nbsp;label" data-testname="link with text node, with non-breaking space">link&nbsp;label</a>
93+
<br>
94+
95+
<h1>text node, with extra non-breaking space</h1>
96+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button&nbsp;&nbsp;&nbsp;label" data-testname="span[role=button] with text node, with extra non-breaking space">button&nbsp;&nbsp;&nbsp;label</span>
97+
<div role="heading" class="ex" data-expectedlabel="heading&nbsp;&nbsp;&nbsp;label" data-testname="div[role=heading] with text node, with extra non-breaking space">heading&nbsp;&nbsp;&nbsp;label</div>
98+
<button class="ex" data-expectedlabel="button&nbsp;&nbsp;&nbsp;label" data-testname="button with text node, with extra non-breaking space">button&nbsp;&nbsp;&nbsp;label</button>
99+
<h3 class="ex" data-expectedlabel="heading&nbsp;&nbsp;&nbsp;label" data-testname="heading with text node, with extra non-breaking space">heading&nbsp;&nbsp;&nbsp;label</h3>
100+
<a href="#" class="ex" data-expectedlabel="link&nbsp;&nbsp;&nbsp;label" data-testname="link with text node, with extra non-breaking space">link&nbsp;&nbsp;&nbsp;label</a>
101+
<br>
102+
103+
<h1>text node, with leading/trailing non-breaking space</h1>
104+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button&nbsp;label" data-testname="span[role=button] with text node, with leading/trailing non-breaking space">&nbsp;button&nbsp;label&nbsp;</span>
105+
<div role="heading" class="ex" data-expectedlabel="heading&nbsp;label" data-testname="div[role=heading] with text node, with leading/trailing non-breaking space">&nbsp;heading&nbsp;label&nbsp;</div>
106+
<button class="ex" data-expectedlabel="button&nbsp;label" data-testname="button with text node, with leading/trailing non-breaking space">&nbsp;button&nbsp;label&nbsp;</button>
107+
<h3 class="ex" data-expectedlabel="heading&nbsp;label" data-testname="heading with text node, with leading/trailing non-breaking space">&nbsp;heading&nbsp;label&nbsp;</h3>
108+
<a href="#" class="ex" data-expectedlabel="link&nbsp;label" data-testname="link with text node, with leading/trailing non-breaking space">&nbsp;link&nbsp;label&nbsp;</a>
109+
<br>
110+
111+
<h1>text node, with mixed space and non-breaking space</h1>
112+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button &nbsp; label" data-testname="span[role=button] with text node, with mixed space and non-breaking space">button &nbsp; label</span>
113+
<div role="heading" class="ex" data-expectedlabel="heading &nbsp; label" data-testname="div[role=heading] with text node, with mixed space and non-breaking space">heading &nbsp; label</div>
114+
<button class="ex" data-expectedlabel="button &nbsp; label" data-testname="button with text node, with mixed space and non-breaking space">button &nbsp; label</button>
115+
<h3 class="ex" data-expectedlabel="heading &nbsp; label" data-testname="heading with text node, with mixed space and non-breaking space">heading &nbsp; label</h3>
116+
<a href="#" class="ex" data-expectedlabel="link &nbsp; label" data-testname="link with text node, with mixed space and non-breaking space">link &nbsp; label</a>
117+
<br>
30118

119+
<h1>text nodes, with deeply nested space</h1>
120+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button label" data-testname="span[role=button] with text node, with deeply nested space">
121+
button<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
122+
</span>
123+
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text node, with deeply nested space">
124+
heading<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
125+
</div>
126+
<button class="ex" data-expectedlabel="button label" data-testname="button with text node, with deeply nested space">
127+
button<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
128+
</button>
129+
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text node, with deeply nested space">
130+
heading<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
131+
</h3>
132+
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text node, with deeply nested space">
133+
link<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
134+
</a>
135+
<br>
31136

32-
<!-- Todo: test all remaining cases of https://w3c.github.io/accname/#comp_text_node -->
137+
<h1>text nodes, with single line break</h1>
138+
<span role="button" tabindex="0" class="ex" data-expectedlabel="button label" data-testname="span[role=button] with text node, with single line break">button
139+
label</span>
140+
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text node, with single line break">heading
141+
label</div>
142+
<button class="ex" data-expectedlabel="button label" data-testname="button with text node, with single line break">button
143+
label</button>
144+
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text node, with single line break">heading
145+
label</h3>
146+
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text node, with single line break">link
147+
label</a>
148+
<br>
33149

34150
<script>
35151
AriaUtils.verifyLabelsBySelector(".ex");

‎wai-aria/scripts/aria-utils.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,19 @@ const AriaUtils = {
138138
promise_test(async t => {
139139
const expectedLabel = el.getAttribute("data-expectedlabel");
140140
let computedLabel = await test_driver.get_computed_label(el);
141-
// Todo: Remove whitespace normalization after https://github.com/w3c/accname/issues/192 is addressed. Change prior line back to `const`, too.
142-
computedLabel = computedLabel.trim()
141+
142+
// See:
143+
// - https://github.com/w3c/accname/pull/165
144+
// - https://github.com/w3c/accname/issues/192
145+
// - https://github.com/w3c/accname/issues/208
146+
//
147+
// AccName references HTML's definition of ASCII Whitespace
148+
// https://infra.spec.whatwg.org/#ascii-whitespace
149+
// which matches tab (\t), newline (\n), formfeed (\f), return (\r), and regular space (\u0020).
150+
// but it does NOT match non-breaking space (\xA0,\u00A0) and others matched by \s
151+
const asciiWhitespace = /[\t\n\f\r\u0020]+/g;
152+
computedLabel = computedLabel.replace(asciiWhitespace, '\u0020').replace(/^\u0020|\u0020$/g, '');
153+
143154
assert_equals(computedLabel, expectedLabel, el.outerHTML);
144155
}, `${testName}`);
145156
}

0 commit comments

Comments
 (0)