Skip to content

Update accname/name/comp_labelledby.html with aria-labeledby [sic] tests #43698

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

Merged
merged 5 commits into from
Jan 29, 2025
Merged

Update accname/name/comp_labelledby.html with aria-labeledby [sic] tests #43698

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9875c40
Update comp_labelledby.html with aria-labeledby [sic] tests
Dec 16, 2023
552af2e
Fix aria-labeledby document reference typo
Dec 16, 2023
a074af0
Fix documentation typos
Dec 18, 2023
ac2188f
Add tests for testing that aria-labeledby is used if it is the first …
Apr 7, 2024
6b83b90
Updating test expectation to re-run CI. Order does not validate the i…
cookiecrook Aug 7, 2024
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
88 changes: 88 additions & 0 deletions accname/name/comp_labelledby.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
- /accname/name/shadowdom/*

-->
<h2>Tests for <code>aria-labelledby</code></h2>

<div role="group" aria-labelledby="h" class="ex" data-expectedlabel="first heading" data-testname="div group explicitly labelledby heading">
<h2 id="h">first heading</h2>
Expand All @@ -36,6 +37,93 @@ <h2 id="h2">+ first heading</h2>
<span id="s1">verify</span><span id="s2">spaces</span><span>FAIL IF INCLUDED</span><span id="s3">between</span><span id="s4">foreach</span>
</nav>

<h2>Tests for <code>aria-labeledby</code> (non-standard spelling)</h2>

<span id="n1">first label</span>
<span id="n2">second label</span>

<a href="#" aria-labeledby="n1" class="ex" data-expectedlabel="first label" data-testname="link is labelled by aria-labeledby (non-standard spelling)">x</a>
<button aria-labeledby="n1" class="ex" data-expectedlabel="first label" data-testname="button is labelled by aria-labeledby (non-standard spelling)">x</button>
<div role="group" aria-labeledby="n1" class="ex" data-expectedlabel="first label" data-testname="div with role group is labelled by aria-labeledby (non-standard spelling)">x</div>

<h2>Tests for precedence: <code>aria-labelledby</code> vs. <code>aria-labeledby</code> (non-standard spelling)</h2>
<!-- The "aria-labelledby" spelling should take precedence over "aria-labeledby" for accname -->

<a href="#" aria-labelledby="n1" aria-labeledby="n2" class="ex" data-expectedlabel="first label" data-testname="link labelled by aria-labelledby supercedes aria-labeledby (non-standard spelling)">x</a>
<button aria-labelledby="n1" aria-labeledby="n2" class="ex" data-expectedlabel="first label" data-testname="button labelled by aria-labelledby supercedes aria-labeledby (non-standard spelling)">x</button>
<div role="group" aria-labelledby="n1" aria-labeledby="n2" class="ex" data-expectedlabel="first label" data-testname="div labelled by aria-labelledby supercedes aria-labeledby (non-standard spelling)">x</div>

<a href="#" aria-labeledby="n1" aria-labelledby="n2" class="ex" data-expectedlabel="second label" data-testname="link labelled by [aria-labeledby][aria-labelledby]">x</a>
<button aria-labeledby="n1" aria-labelledby="n2" class="ex" data-expectedlabel="second label" data-testname="button labelled by [aria-labeledby][aria-labelledby]">x</button>
<div role="group" aria-labeledby="n1" aria-labelledby="n2" class="ex" data-expectedlabel="second label" data-testname="div labelled by [aria-labeledby][aria-labelledby]">x</div>

<h2>Tests for name precedence with <code>aria-labeledby</code> (non-standard spelling)</h2>
<!-- Name computation: https://w3c.github.io/accname/#computation-steps -->

<!-- Step 2A: Hidden Not Referenced supercedes 2B: AriaLabeledby -->
<button aria-labeledby="span1" aria-label="foo" data-expectedlabel="label" data-testname="button's hidden referenced name (display:none) with aria-labeledby (non-standard spelling) supercedes aria-label" class="ex">
<span id="span1" style="display:none;">
<span id="span2" style="display:none;">label</span>
</span>
x
</button>

<button aria-labeledby="span3" aria-label="foo" data-expectedlabel="label" data-testname="button's hidden referenced name (visibility:hidden) with aria-labeledby (non-standard spelling) supercedes aria-label" class="ex">
<span id="span3" style="visibility:hidden;">
<span id="span4" style="visibility:hidden;">label</span>
</span>
x
</button>

<button aria-labeledby="span4" aria-label="foo" data-expectedlabel="foo" data-testname="button's hidden referenced name (visibility:hidden) with hidden aria-labeledby traversal falls back to aria-label" class="ex">
<span id="span4">
<span id="span5" style="visibility:hidden;">label</span>
</span>
x
</button>

<!-- Step 2B: AriaLabeledby supercedes 2D: AriaLabel -->
<a href="#" aria-labeledby="span6" aria-label="foo" data-expectedlabel="label" data-testname="link's aria-labeledby (non-standard spelling) name supercedes aria-label" class="ex">x</a>
<span id="span6">label</span>

<!-- Step 2C: Embedded Control labelling via aria-labeledby not defined in accname spec -->

<!-- Step 2E: Host Language Label is superceded by 2B: AriaLabeledby -->
<img alt="alt" aria-labeledby="n2" data-expectedlabel="second label" data-testname="img's aria-labeledby (non-standard spelling) supercedes alt attribute" class="ex" />

<svg aria-labeledby="n2" data-expectedlabel="second label" data-testname="svg's aria-labeledby (non-standard spelling) supercedes title tag" class="ex">
<circle cx="5" cy="5" r="4">
<title>circle</title>
</circle>
</svg>

<label for="input1">label</label>
<input type="text" id="input1" aria-labeledby="n2" data-expectedlabel="second label" data-testname="input with label for association is superceded by aria-labeledby (non-standard spelling)" class="ex" />

<!-- Step 2F: Name From Content is superceded by 2B: AriaLabeledby -->
<button aria-labeledby="n2" data-expectedlabel="second label" data-testname="button name from contents is superceded by aria-labeledby (non-standard spelling)" class="ex">x</button>

<!-- Step 2G: Text Node is superceded by 2B: AriaLabeledby, also see wpt/accname/name/comp_text_node.html -->
<h1 aria-labeledby="n2" data-expectedlabel="second label" data-testname="h1 text is superceded by aria-labeledby (non-standard spelling)" class="ex">x</h1>

<!-- Step 2H: Recursive Name from Content, see wpt/accname/name/comp_name_from_content.html -->
<h3 data-expectedlabel="image link2 link3" data-testname="heading name from content for each child including two nested links using aria-labeledby (non-standard spelling) with nested image" class="ex">
<a href="#" aria-labeledby="nested_image_label2">
link1<!-- this text is skipped because of aria-labeledby -->
</a>
<a href="#" data-expectedlabel="link2 image link3" data-testname="link name from content for each child including nested image (referenced elsewhere via labeledby)" class="ex">
link2
<img id="nested_image_label2" alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
<!-- image skipped in this link (when computing heading text) because it was already referenced by the first link within this heading label recursion cycle. -->
<!-- but image not skipped when computing the text of the link itself since it has not been referenced in that context -->
link3
</a>
</h3>

<!-- Step 2I: Tooltip is superceded by 2B: AriaLabeledby, also see wpt/accname/name/comp_tooltip.html -->
<button aria-labeledby="n2" title="foo" data-expectedlabel="second label" data-testname="button with title is superceded by aria-labeledby (non-standard spelling)" class="ex">x</button>


<!--

BLOCKED on https://github.com/w3c/accname/issues/209
Expand Down