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

AccName: Name From Contents Tests #42354

Merged
merged 15 commits into from
Oct 10, 2023
Merged

AccName: Name From Contents Tests #42354

Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ed5033f
incomplete commit to raise issues (these may be implementation bugs o…
cookiecrook Oct 5, 2023
2b123de
m. typo and whitespace lint
cookiecrook Oct 5, 2023
f163113
m. typo in prop name. ha! no wonder this wasn't working.
cookiecrook Oct 5, 2023
0b59541
adding RTL and CSS Alternative Text tests
cookiecrook Oct 5, 2023
58c9fc0
fix whitespace join expectation to match the spec
cookiecrook Oct 5, 2023
98c0a23
fix gen content syntax error and minor refactoring
cookiecrook Oct 5, 2023
9f2d54a
m. lint trailing space
cookiecrook Oct 5, 2023
981e026
fix charset
cookiecrook Oct 5, 2023
79f474d
nesting and recursion cases
cookiecrook Oct 5, 2023
e1f252c
fix duplicate image id
cookiecrook Oct 5, 2023
1c8a4fd
update after ARIA WG resolution on https://github.com/w3c/accname/iss…
cookiecrook Oct 5, 2023
20c856f
review feedback on the arabic used
cookiecrook Oct 5, 2023
3e80420
changed the arabic, but forgot to update the test expectation. shame.
cookiecrook Oct 5, 2023
3c1c4be
review comments from rahimabdi
cookiecrook Oct 9, 2023
295e91a
review comments from rahimabdi, part 2
cookiecrook Oct 9, 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
244 changes: 230 additions & 14 deletions accname/name/comp_name_from_content.html
View file
Open in desktop
rahimabdi marked this conversation as resolved.
Show resolved Hide resolved
rahimabdi marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,251 @@
<html>
<head>
<title>Name Comp: Name From Content</title>
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/wai-aria/scripts/aria-utils.js"></script>
<style type="text/css">

/*

Since the AccName spec is in flux about whitespace joiners, and the implementations don't match,
normalize the whitespace (with extra leading/trailing) space.

No point in having the same in-flux spec change cause failures the remaining unrelated tests.

See more here:
https://github.com/w3c/accname/issues/205
https://github.com/w3c/accname/projects/1#card-42288231

*/

.simple-before::before {
content: " before "; /* [sic] leading and trailing space */
margin:0 0.1em;
}
.simple-after::after {
content: " after "; /* [sic] leading and trailing space */
margin:0 0.1em;
}
.no-space::before, .no-space::after {
content: "nospace"; /* [sic] Unlike the others, NO extra leading/trailing space here. */
}
.simple-before:dir(rtl)::before {
content: " من قبل "; /* [sic] leading and trailing space */
}
.simple-after:dir(rtl)::after {
content: " بعد "; /* [sic] leading and trailing space */
}
.fallback-before::before {
content: " before "; /* [sic] leading and trailing space */
content: " before " / " alt-before "; /* Override the previous line for engines that support the Alternative Text syntax. */
}
.fallback-after::after {
content: " after "; /* [sic] leading and trailing space */
content: " after " / " alt-after "; /* Override the previous line for engines that support the Alternative Text syntax. */
}
.block > span {
display: block;
margin: 0 0.1em;
}
.iblock > span {
display: inline-block;
margin: 0 0.1em;
}

</style>
</head>
<body>

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

<h1 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h1>
<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>
<ul>
<li>button is a leaf node with sub-level elements presentational.</li>
<li>heading is block level, and can contain sub-level interactives like links.</li>
<li>link (a[href]) is an interactive inline element that can include non-presentational descendants.</li>
</ul>

<h1>ARIA roles, inline</h1>
<span tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, inline" class="ex">label</span><br>
<span tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, inline" class="ex">label</span><br>
<span tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, inline" class="ex">label</span><br>
<br>

<h1>ARIA roles, block</h1>
<div tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, block" class="ex">label</div>
<div tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, block" class="ex">label</div>
<div tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, block" class="ex">label</div>
<br>

<h1>simple</h1>
<button data-expectedlabel="label" data-testname="button name from content" class="ex">label</button><br>
<h3 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h3>
<a href="#" data-expectedlabel="label" data-testname="link name from content" class="ex">label</a><br>
<br>

<h1>simple with ::before</h1>
<button data-expectedlabel="before label" data-testname="button name from content with ::before" class="ex simple-before">label</button><br>
<h3 data-expectedlabel="before label" data-testname="heading name from content with ::before" class="ex simple-before">label</h3>
<a href="#" data-expectedlabel="before label" data-testname="link name from content with ::before" class="ex simple-before">label</a><br>
<br>

<h1>simple with ::after</h1>
<button data-expectedlabel="label after" data-testname="button name from content with ::after" class="ex simple-after">label</button><br>
<h3 data-expectedlabel="label after" data-testname="heading name from content with ::after" class="ex simple-after">label</h3>
<a href="#" data-expectedlabel="label after" data-testname="link name from content with ::after" class="ex simple-after">label</a><br>
<br>

<h1>simple with ::before and ::after</h1>
<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>
<h3 data-expectedlabel="before label after" data-testname="heading name from content with ::before and ::after" class="ex simple-before simple-after">label</h3>
<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>
<br>

<h1>no space joiners ::before and ::after</h1>
<button data-expectedlabel="nospacelabelnospace" data-testname="button name from content no space joiners ::before and ::after" class="ex no-space">label</button><br>
<h3 data-expectedlabel="nospacelabelnospace" data-testname="heading name from content no space joiners ::before and ::after" class="ex no-space">label</h3>
<a href="#" data-expectedlabel="nospacelabelnospace" data-testname="link name from content no space joiners ::before and ::after" class="ex no-space">label</a><br>
<br>

<h1>Arabic right-to-left (RTL) with ::before and ::after</h1>
<div dir="rtl" lang="ar">
<button data-expectedlabel="من قبل اسم بعد" data-testname="button name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</button><br>
<h3 data-expectedlabel="من قبل اسم بعد" data-testname="heading name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</h3>
<a href="#" data-expectedlabel="من قبل اسم بعد" data-testname="link name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</a><br>
</div>
<br>

<h1><a href="https://drafts.csswg.org/css-content/#alt">Alternative Text for CSS content (previously `alt:`)</a> in pseudo-elements</h1>
rahimabdi marked this conversation as resolved.
Show resolved Hide resolved
<p>rendered text should be "before label after"</p>
<p>accessibility label should be "alt-before label alt-after"</p>
<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>
<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>
<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>
<br>

<h1>simple w/ for each child</h1>
<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>
<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>
<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>
<br>

<h1>simple for each child with image</h1>
<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>
<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>
<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>
<br>


<h1>simple for each child with extra nesting containing image</h1>
<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>
<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>
<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>
<br>

<h1>heading with nested button with nested image</h1>
<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">
heading
<button>
button
<img src="#" alt="image">
button
</button>
heading
</h3>

<h1>heading with nested link with nested image</h1>
<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">
heading
<a href="#">
link
<img src="#" alt="image">
link
</a>
heading
</h3>

<h1>heading with nested link with nested image using aria-label</h1>
<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">
heading
<a href="#" aria-label="link aria-label"><!-- should skip the other link text -->
ignored link text
<img id="nested_image_label_1" src="#" alt="ignored image alt">
ignored link text
</a>
heading
</h3>

<h1>heading with nested link with nested image using aria-labelledby</h1>
rahimabdi marked this conversation as resolved.
Show resolved Hide resolved
<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">
heading
<a href="#" aria-labelledby="nested_image_label1"><!-- should skip the other link text -->
ignored link text
<img id="nested_image_label1" src="#" alt="image">
ignored link text
</a>
heading
</h3>

<h1>heading with two nested links referencing image using aria-labelledby</h1>
rahimabdi marked this conversation as resolved.
Show resolved Hide resolved
<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">
<a href="#" aria-labelledby="nested_image_label2">
link1<!-- this text is skipped because of aria-labelledby -->
</a>
<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">
link2
<img id="nested_image_label2" src="#" alt="image">
<!-- 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>

<!-- cross-referencial edge case-->
<h1>heading with link referencing image using aria-labelledby, that in turn references text element via aria-labelledby</h1>
<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">
<a href="#" aria-labelledby="nested_image_label3">
<span class="note" id="crossref_link">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
</a>
<!-- but it's picked up again in inverse order b/c of cross-referencial aria-labelledby edge case -->
<img id="nested_image_label_3" src="#" alt="image" aria-labelledby="crossref_link">
</h3>

<!-- self-referencial edge case-->
<h1>heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby</h1>
<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">
<a href="#" aria-labelledby="nested_image_label4">
<span class="note" id="crossref_link2">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
</a>
<!-- but it's picked up again (after the self-referencial image alt) in inverse order b/c of cross-referencial aria-labelledby edge case -->
<img id="nested_image_label4" src="#" alt="image" aria-labelledby="nested_image_label4 crossref_link2">
</h3>

<!--

Todo: test all remaining cases of https://w3c.github.io/accname/#comp_name_from_content
- comp_name_from_content_reset
- comp_name_from_content_pseudo_element
- comp_name_from_content_pseudo_element_before
- comp_name_from_content_pseudo_element_after
- comp_name_from_content_for_each_child
- comp_name_from_content_for_each_child_set_current
- comp_name_from_content_for_each_child_recursion
- comp_for_each_child_append
- comp_name_from_content_return
<!-- 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. -->
<!-- See details in https://github.com/w3c/accname/issues/205 -->
<!-- Final spec resolution will be addressed in AccName Whitespace Project: https://github.com/w3c/accname/projects/1#card-42288231 -->
<h1>simple w/ for each child (w/o spaces and display:inline)</h1>
<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>
<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>
<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>
<br>

Todo: test all remaining *recursive* cases in https://w3c.github.io/accname/#comp_recursive_name_from_content
<h1>simple w/ for each child (w/o spaces and display:block)</h1>
<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>
<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>
<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>
<br>

-->
<h1>simple w/ for each child (w/o spaces and display:inline block)</h1>
<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>
<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>
<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>
<br>

<script>
AriaUtils.verifyLabelsBySelector(".ex");
Expand Down