Skip to content

Commit

Permalink
AccName: additional text node tests (#42407)
Browse files Browse the repository at this point in the history 
Co-authored-by: jugglinmike 
Co-authored-by: rahimabdi
  • Loading branch information
@cookiecrook
cookiecrook authored Nov 3, 2023
1 parent 07417e7 commit f027bb0
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 11 deletions.
134 changes: 125 additions & 9 deletions accname/name/comp_text_node.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,139 @@

<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>

<!-- I'm not certain whether #comp_text_node requires a lot of testing outside of the #comp_name_from_content contexts, -->
<!-- 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. -->
<!--
<!-- Skipped (class="ex" removed) until https://github.com/w3c/accname/issues/193 is resolved -->
<h2 class="ex-skipped" data-expectedlabel="heading label" data-testname="heading with text/comment/text nodes, no space">
heading<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
</h2>
Note: some overlap with the tests in:
- /accname/name/comp_label.html
- /accname/name/comp_name_from_content.html
-->

<h1>text/element/text nodes, no space</h1>
<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>
<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>
<button class="ex" data-expectedlabel="buttonlabel" data-testname="button with text/element/text nodes, no space">button<span></span>label</button>
<h3 class="ex" data-expectedlabel="headinglabel" data-testname="heading with text/element/text nodes, no space">heading<span></span>label</h3>
<a href="#" class="ex" data-expectedlabel="linklabel" data-testname="link with text/element/text nodes, no space">link<span></span>label</a>
<br>

<h1>text/comment/text nodes, no space</h1>
<!-- Note: This set is not currently to spec until https://github.com/w3c/accname/issues/193 is resolved. -->
<span role="button" tabindex="0" class="ex" data-expectedlabel="buttonlabel" data-testname="span[role=button] with text/comment/text nodes, no space">
button<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
</span>
<div role="heading" class="ex" data-expectedlabel="headinglabel" data-testname="div[role=heading] with text/comment/text nodes, no space">
heading<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
</div>
<button class="ex" data-expectedlabel="buttonlabel" data-testname="button with text/comment/text nodes, no space">
button<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
</button>
<h3 class="ex" data-expectedlabel="headinglabel" data-testname="heading with text/comment/text nodes, no space">
heading<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
</h3>
<a href="#" class="ex" data-expectedlabel="linklabel" data-testname="link with text/comment/text nodes, no space">
link<!-- with non-text node splitting concatenated text nodes -->label<!-- [sic] no extra spaces around first comment -->
</a>
<br>

<h2 class="ex" data-expectedlabel="heading label" data-testname="heading with text/comment/text nodes, with space">
<h1>text/comment/text nodes, with space</h1>
<span role="button" tabindex="0" class="ex" data-expectedlabel="button label" data-testname="span[role=button] with text/comment/text nodes, with space">
button
<!-- comment node between text nodes with leading/trailing whitespace -->
label
</span>
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text/comment/text nodes, with space">
heading
<!-- comment node between text nodes with leading/trailing whitespace -->
label
</h2>
</div>
<button class="ex" data-expectedlabel="button label" data-testname="button with text/comment/text nodes, with space">
button
<!-- comment node between text nodes with leading/trailing whitespace -->
label
</button>
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text/comment/text nodes, with space">
heading
<!-- comment node between text nodes with leading/trailing whitespace -->
label
</h3>
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text/comment/text nodes, with space">
link
<!-- comment node between text nodes with leading/trailing whitespace -->
label
</a>
<br>

<h1>text node, with tab char</h1>
<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>
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text node, with tab char">heading label</div>
<button class="ex" data-expectedlabel="button label" data-testname="button with text node, with tab char">button label</button>
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text node, with tab char">heading label</h3>
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text node, with tab char">link label</a>
<br>

<h1>text node, with non-breaking space</h1>
<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>
<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>
<button class="ex" data-expectedlabel="button&nbsp;label" data-testname="button with text node, with non-breaking space">button&nbsp;label</button>
<h3 class="ex" data-expectedlabel="heading&nbsp;label" data-testname="heading with text node, with non-breaking space">heading&nbsp;label</h3>
<a href="#" class="ex" data-expectedlabel="link&nbsp;label" data-testname="link with text node, with non-breaking space">link&nbsp;label</a>
<br>

<h1>text node, with extra non-breaking space</h1>
<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>
<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>
<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>
<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>
<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>
<br>

<h1>text node, with leading/trailing non-breaking space</h1>
<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>
<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>
<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>
<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>
<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>
<br>

<h1>text node, with mixed space and non-breaking space</h1>
<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>
<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>
<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>
<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>
<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>
<br>

<h1>text nodes, with deeply nested space</h1>
<span role="button" tabindex="0" class="ex" data-expectedlabel="button label" data-testname="span[role=button] with text node, with deeply nested space">
button<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
</span>
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text node, with deeply nested space">
heading<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
</div>
<button class="ex" data-expectedlabel="button label" data-testname="button with text node, with deeply nested space">
button<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
</button>
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text node, with deeply nested space">
heading<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
</h3>
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text node, with deeply nested space">
link<span><span><span><span><span><span><span> </span></span></span></span></span></span></span>label
</a>
<br>

<!-- Todo: test all remaining cases of https://w3c.github.io/accname/#comp_text_node -->
<h1>text nodes, with single line break</h1>
<span role="button" tabindex="0" class="ex" data-expectedlabel="button label" data-testname="span[role=button] with text node, with single line break">button
label</span>
<div role="heading" class="ex" data-expectedlabel="heading label" data-testname="div[role=heading] with text node, with single line break">heading
label</div>
<button class="ex" data-expectedlabel="button label" data-testname="button with text node, with single line break">button
label</button>
<h3 class="ex" data-expectedlabel="heading label" data-testname="heading with text node, with single line break">heading
label</h3>
<a href="#" class="ex" data-expectedlabel="link label" data-testname="link with text node, with single line break">link
label</a>
<br>

<script>
AriaUtils.verifyLabelsBySelector(".ex");
Expand Down
15 changes: 13 additions & 2 deletions wai-aria/scripts/aria-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,19 @@ const AriaUtils = {
promise_test(async t => {
const expectedLabel = el.getAttribute("data-expectedlabel");
let computedLabel = await test_driver.get_computed_label(el);
// Todo: Remove whitespace normalization after https://github.com/w3c/accname/issues/192 is addressed. Change prior line back to `const`, too.
computedLabel = computedLabel.trim()

// See:
// - https://github.com/w3c/accname/pull/165
// - https://github.com/w3c/accname/issues/192
// - https://github.com/w3c/accname/issues/208
//
// AccName references HTML's definition of ASCII Whitespace
// https://infra.spec.whatwg.org/#ascii-whitespace
// which matches tab (\t), newline (\n), formfeed (\f), return (\r), and regular space (\u0020).
// but it does NOT match non-breaking space (\xA0,\u00A0) and others matched by \s
const asciiWhitespace = /[\t\n\f\r\u0020]+/g;
computedLabel = computedLabel.replace(asciiWhitespace, '\u0020').replace(/^\u0020|\u0020$/g, '');

assert_equals(computedLabel, expectedLabel, el.outerHTML);
}, `${testName}`);
}
Expand Down

0 comments on commit f027bb0

Please sign in to comment.