Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

AccName: additional text node tests #42407

Merged
merged 11 commits into from
Nov 3, 2023
Merged

AccName: additional text node tests #42407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2209875
text node tests for whitespace, etc.
cookiecrook Oct 6, 2023
a324df1
normalize interior whitespace after discussion with accname editors a…
cookiecrook Oct 11, 2023
9e28d6e
m. trailing whitespace lint
cookiecrook Oct 11, 2023
9a7f8a9
update whitespace normalization to match 'ascii whitespace' as define…
cookiecrook Oct 13, 2023
35f41ee
m. extraneous comment from local testing
cookiecrook Oct 13, 2023
a9b092b
m. lint
cookiecrook Oct 13, 2023
955df07
Apply suggestions from code review
cookiecrook Oct 13, 2023
d51d6b1
m. typo
cookiecrook Oct 13, 2023
c8399e7
Apply suggestions from code review
cookiecrook Oct 18, 2023
f1b2ca4
m. editorial from jugglinmike
cookiecrook Oct 26, 2023
260d5e5
review feedback from rahimabdi; add tests using explicit role assignment
cookiecrook Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 125 additions & 9 deletions accname/name/comp_text_node.html
View file
Open in desktop
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>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved

<!-- 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>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<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>
Copy link
Contributor

@rahimabdi rahimabdi Nov 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test looks good, somewhat related observation:

I noticed that HTML validation passes for this role="heading" instance without aria-level however, it's currently a MUST that aria-level be provided. Should this fail validation?

(This seems related to ARIA-only parsing errors like lack of explicit grouping for role="radio").

Copy link
Contributor Author

@cookiecrook cookiecrook Nov 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's an Author MUST, but I don't think it will change the results of these tests... If you know otherwise (e.g. missing aria-level changes the computedlabel?), then we should have a new file testing how that and similar required attributes affect the label... Otherwise, heading level will get tested after we have a direct accessor to it. (See WICG/aom#197 and WICG/aom#203)

<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>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
<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
Open in desktop
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