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

Create wai-aria/hidden/aria-hidden-tested-via-label.html #45694

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open

Create wai-aria/hidden/aria-hidden-tested-via-label.html #45694

Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
e16967c
Create wpt/wai-aria/states-and-properties/aria-hidden.html
Apr 12, 2024
bb7a928
Misc cleanup
Apr 13, 2024
12040b6
Add documentation, test structure and initial aria-hidden=false tests
Apr 13, 2024
b22e721
Add more aria-hidden='false' tests
Apr 13, 2024
3a6c584
Add even more aria-hidden='false' tests
Apr 13, 2024
5d6fa4a
Organize test sets structure for aria-hidden='false'
Apr 13, 2024
17370cf
Uncomment ARIAUtils functions in <script>
Apr 13, 2024
4b3b582
Fix a couple malformed tests
Apr 13, 2024
e604ad5
Test cleanup (remove generics, table tests due to engine inconsistency)
Apr 13, 2024
1396b47
Add root html/body/main tests and setAttributes() helper function
Apr 13, 2024
7598a6e
Update rendering web techniques aria-hidden comment
rahimabdi Apr 16, 2024
522d723
Update web techniques for rendering comments
Apr 16, 2024
eefe90e
More updates to test file comments
Apr 16, 2024
d0cf940
Some more web techniques for hiding (opacity, color)
Apr 16, 2024
f80ba8b
Add role=tab test
Apr 16, 2024
75f1d73
Add aria-hidden=false to role=tab test
Apr 16, 2024
fa998d8
Update file location and name for specificity
Apr 27, 2024
05d8638
Re-structure test file for clarifying label testings, including secti…
Apr 27, 2024
4c53da4
Remove faulty tests, unneeded functions
Apr 27, 2024
ce2f252
Update future testing scope in comments
Apr 27, 2024
a36fdd2
Add aria-hidden=false/true tests
Apr 27, 2024
ee7620f
Updated comment for definition/false synonymity
Apr 28, 2024
a67fad6
Add more mixed aria-hidden tests
Apr 28, 2024
2b5d651
Fix validator errors
Apr 28, 2024
91d60cd
Restructure tests and sections
Apr 28, 2024
a36b2b4
Add alternative rendering & aria-hidden tests
Apr 28, 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
371 changes: 371 additions & 0 deletions wai-aria/hidden/aria-hidden-tested-via-label.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,371 @@
<!doctype html>
<html>
<head>
<title>aria-hidden Tests via Label</title>
<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>
</head>
<body>
<main>
<h1><code>aria-hidden</code> tests via label</h1>
<p>Tests the <a href="https://pr-preview.s3.amazonaws.com/w3c/aria/pull/2090.html#aria-hidden">aria-hidden</a>
state using <a href="https://www.w3.org/TR/webdriver2/#get-computed-label">computedlabel</a></p>

<!-- Possible aria-hidden values:
- "true" = The element is hidden from the accessibility API
- "false" = The element's hidden state is determined by the user agent based on whether it is rendered. Synonym of undefined
- "undefined" = synonym of "false" per #aria 1256 https://github.com/w3c/aria/issues/1256

- General web techniques related to showing/hiding content:
Rendered:
- display: <anything besides 'none'> = rendered
- visibility: visible = rendered
- clipped/off-screen text = rendered
- inert = rendered (but hidden from assistive technologies)
- aria-hidden=true = rendered (but hidden from assistive technologies)
- opacity: 0
- color: transparent
Comment on lines +30 to +31
Copy link
Contributor

Choose a reason for hiding this comment

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

these are both rendered fwiw

Not rendered:
- visibility: hidden/collapse = not rendered
- display: none = not rendered
- HTML5 hidden = not rendered
- transform: scale(0) = not rendered (but conveyed by assistive technologies)

- For future general aria-hidden testing that can't currently be tested with WebDriver computedlabel method, such as
WebDriver extension for querying accessibility tree outside of role/name aom #203 https://github.com/WICG/aom/issues/203:
Comment on lines +38 to +39
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this note suggesting these new to-be-created tests be add to this file? If so, why? If not, I would remove this portion of the comment.

- Generics: <div>, <span>
- Non-named containers & root elements: <html>, <body> (note: aria-hidden must be ignored on document root elements per aria #1254 https://github.com/w3c/aria/issues/1254)
- Sectioning elements: <main>, <nav>
- Focusable elements (note: these should remove aria-hidden on the element and its ancestors per aria #1255 https://github.com/w3c/aria/issues/1255)
- natively focusable elements: <a>, <button>, <input type"..."">, <textarea>, etc.
- script focusable elements: <div tabindex="-1">, etc.
- ARIA role equivalents that are focusable: link, button, tab, etc.
- SVG
- inert
-->

<h2><code>aria-hidden="false"</code> only tested via label</h2>

<!-- native platform elements with default display properties -->
<button aria-hidden="false" data-testname="button with aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</button>
<input type="checkbox" aria-label="x" aria-hidden="false" data-testname="input[checkbox] with aria-hidden='false' labeled via aria-hidden is not hidden" data-expectedlabel="x" class="ex-label">
<h3 aria-hidden="false" data-testname="h3 with aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</h3>
<nav aria-hidden="false" aria-label="x" data-testname="nav with aria-hidden='false' labeled via aria-label is not hidden" data-expectedlabel="x" class="ex-label">x</nav>

<!-- native platform elements with non-default rendering -->
<button aria-hidden="false" style="display: flex;" data-testname="button with display: contents and aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</button>
<input aria-hidden="false" style="display: flex;" aria-label="x" type="checkbox" data-testname="input[checkbox] with display: contents and aria-hidden='false' labeled via aria-hidden is not hidden" data-expectedlabel="x" class="ex-label">
<h3 aria-hidden="false" style="display: contents;" data-testname="h3 with display: contents, aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</h3>
<nav aria-hidden="false" style="display: contents;" aria-label="x" data-testname="nav with display: contents nav and aria-hidden='false' labeled via aria-hidden is not hidden" data-expectedlabel="x" class="ex-label">x</nav>
<button aria-hidden="false" style="transform: scale(0);" data-testname="button with transform: scale(0) and aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</button>

<!-- explicit ARIA roles -->
<div aria-hidden="false" role="button" aria-label="x" tabindex="0" data-testname="div with aria-hidden='false' labeled via aria-label, button role and tabindex='0' is not hidden" data-expectedlabel="x" class="ex-label">x</div>
<div aria-hidden="false" role="heading" aria-level="3" data-testname="div with aria-hidden='false', heading role and aria-level='3' is not hidden" data-expectedlabel="x" class="ex-label">x</div>
<div aria-hidden="false" role="navigation" aria-label="x" data-testname="div with aria-hidden='false' labeled via aria-label, navigation role and aria-label is not hidden" data-expectedlabel="x" class="ex-label">x</div>
<span aria-hidden="false" role="link" tabindex="0" data-testname="span with aria-hidden='false', link role and tabindex='0' is not hidden" data-expectedlabel="x" class="ex-label">x</span>
<span aria-hidden="false" role="region" aria-label="x" data-testname="span with aria-hidden='false', region role and aria-label is not hidden" data-expectedlabel="x" class="ex-label">x</span>
<span aria-hidden="false" role="checkbox" aria-checked="true" aria-label="x" data-testname="span with aria-hidden='false' labeled via aria-label and checkbox role is not hidden" data-expectedlabel="x" class="ex-label">x</span>
<div>
<div role="tablist">
<div role="tab">x</div>
<div aria-hidden="false" role="tab" aria-selected="true" data-testname="div with aria-hidden='false' and tab role is not hidden" data-expectedlabel="x" class="ex-label">x</div>
</div>
<div aria-hidden="false" role="tabpanel" hidden>x</div>
<div aria-hidden="false" role="tabpanel">x</div>
</div>
Comment on lines +51 to +80
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think any of this first set can be tested reliably with label for the reasons listed in the first review. An implementation is not required to invalidate the label of a hidden element... The hidden rules can only be tested in how the element is incorporated into the label of a different element, like you've done in the next set.

Suggested change
<h2><code>aria-hidden="false"</code> only tested via label</h2>
<!-- native platform elements with default display properties -->
<button aria-hidden="false" data-testname="button with aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</button>
<input type="checkbox" aria-label="x" aria-hidden="false" data-testname="input[checkbox] with aria-hidden='false' labeled via aria-hidden is not hidden" data-expectedlabel="x" class="ex-label">
<h3 aria-hidden="false" data-testname="h3 with aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</h3>
<nav aria-hidden="false" aria-label="x" data-testname="nav with aria-hidden='false' labeled via aria-label is not hidden" data-expectedlabel="x" class="ex-label">x</nav>
<!-- native platform elements with non-default rendering -->
<button aria-hidden="false" style="display: flex;" data-testname="button with display: contents and aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</button>
<input aria-hidden="false" style="display: flex;" aria-label="x" type="checkbox" data-testname="input[checkbox] with display: contents and aria-hidden='false' labeled via aria-hidden is not hidden" data-expectedlabel="x" class="ex-label">
<h3 aria-hidden="false" style="display: contents;" data-testname="h3 with display: contents, aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</h3>
<nav aria-hidden="false" style="display: contents;" aria-label="x" data-testname="nav with display: contents nav and aria-hidden='false' labeled via aria-hidden is not hidden" data-expectedlabel="x" class="ex-label">x</nav>
<button aria-hidden="false" style="transform: scale(0);" data-testname="button with transform: scale(0) and aria-hidden='false' is not hidden" data-expectedlabel="x" class="ex-label">x</button>
<!-- explicit ARIA roles -->
<div aria-hidden="false" role="button" aria-label="x" tabindex="0" data-testname="div with aria-hidden='false' labeled via aria-label, button role and tabindex='0' is not hidden" data-expectedlabel="x" class="ex-label">x</div>
<div aria-hidden="false" role="heading" aria-level="3" data-testname="div with aria-hidden='false', heading role and aria-level='3' is not hidden" data-expectedlabel="x" class="ex-label">x</div>
<div aria-hidden="false" role="navigation" aria-label="x" data-testname="div with aria-hidden='false' labeled via aria-label, navigation role and aria-label is not hidden" data-expectedlabel="x" class="ex-label">x</div>
<span aria-hidden="false" role="link" tabindex="0" data-testname="span with aria-hidden='false', link role and tabindex='0' is not hidden" data-expectedlabel="x" class="ex-label">x</span>
<span aria-hidden="false" role="region" aria-label="x" data-testname="span with aria-hidden='false', region role and aria-label is not hidden" data-expectedlabel="x" class="ex-label">x</span>
<span aria-hidden="false" role="checkbox" aria-checked="true" aria-label="x" data-testname="span with aria-hidden='false' labeled via aria-label and checkbox role is not hidden" data-expectedlabel="x" class="ex-label">x</span>
<div>
<div role="tablist">
<div role="tab">x</div>
<div aria-hidden="false" role="tab" aria-selected="true" data-testname="div with aria-hidden='false' and tab role is not hidden" data-expectedlabel="x" class="ex-label">x</div>
</div>
<div aria-hidden="false" role="tabpanel" hidden>x</div>
<div aria-hidden="false" role="tabpanel">x</div>
</div>


<h2><code>aria-hidden="false"</code> and <code>"true"</code> mixed implementations tested via label</h2>

<h3 data-testname="empty h3 > span with aria-hidden='true' has no label" data-expectedlabel="" class="ex-label">
<span aria-hidden="true">
one
</span>
</h3>
Comment on lines +84 to +88
Copy link
Contributor

Choose a reason for hiding this comment

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

Yes. Test like this, however I worry about a test requiring an explicitly empty label... It forces implementations to not be permissive in their allowance of "what the author probably intended."

Maybe we should remove this one, too. Or add in another part of the label outside the hidden span, or even a title attribute on the tested element.


<h3 data-testname="empty h3 > span with aria-hidden='false' is labelled" data-expectedlabel="one" class="ex-label">
<span aria-hidden="false">
one
</span>
</h3>
Comment on lines +90 to +94
Copy link
Contributor

Choose a reason for hiding this comment

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

👍


<h3 data-testname="h3 with name from contents > span with aria-hidden='true' > span with aria-hidden='false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span aria-hidden="true">
one
<span aria-hidden="false">
two
</span>
</span>
</h3>
Comment on lines +96 to +104
Copy link
Contributor

Choose a reason for hiding this comment

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

👍


<h3 data-testname="Empty h3 > span with aria-hidden='true' > span with aria-hidden='false' is labelled" data-expectedlabel="" class="ex-label">
<span aria-hidden="true">
one
<span aria-hidden="false">
two
</span>
</span>
</h3>
Comment on lines +106 to +113
Copy link
Contributor

Choose a reason for hiding this comment

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

I suggest removing or modifying this explicitly empty label test for the same reason listed above. Implementations should be allowed to work around author errors, when it results in an explicitly empty label.

Copy link
Contributor

Choose a reason for hiding this comment

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

If you see something in the AccName spec that disallows this, I'll file an issue, since:

  • Users > Authors > Implementors > Spec Editors > Theoretical Purity.


<h3 data-testname="h3 with name from contents > span with aria-hidden='false' > span with aria-hidden='true' is labelled" data-expectedlabel="label one" class="ex-label">
label
<span aria-hidden="false">
one
<span aria-hidden="true">
two
</span>
</span>
</h3>

<h3 data-testname="h3 > img with alt, [span with aria-hidden='true' > span with aria-hidden='false'] is labelled" data-expectedlabel="label" class="ex-label">
<img src="data:," alt="label">
Copy link
Contributor

Choose a reason for hiding this comment

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

Please use the real single pixel data URI image from the other accessibility tests. Gecko developers raised a bug with the other tests since their implementation is different if an image doesn't load.

<span aria-hidden="true">
one
<span aria-hidden="false">
two
</span>
</span>
</h3>

<h3 data-testname="h3 > img with alt, [span with aria-hidden='false' > span with aria-hidden='true'] is labelled" data-expectedlabel="label one" class="ex-label">
<img src="data:," alt="label">
<span aria-hidden="false">
one
<span aria-hidden="true">
two
</span>
</span>
</h3>

<a href="#" data-testname="link with name from contents > img with alt, span with aria-hidden='false' is labelled" data-expectedlabel="link image one" class="ex-label">
link
<img src="data:," alt="image">
<span aria-hidden="false">one</span>
</a>

<a href="#" data-testname="link with name from contents > img with alt, [span with aria-hidden='true' > span with aria-hidden='false'] is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span aria-hidden="true">
one
<span aria-hidden="false">
two
</span>
</span>
</a>

<a href="#" data-testname="link with name from contents > img with alt, span with aria-hidden='true' is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span aria-hidden="true">one</span>
</a>
Comment on lines +145 to +166
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't see these as being substantially different from the previous set. I would caution against exhaustive tests whose differences aren't really related to the core matter being tested. Doing so just makes the test data more difficult to maintain.

Suggested change
<a href="#" data-testname="link with name from contents > img with alt, span with aria-hidden='false' is labelled" data-expectedlabel="link image one" class="ex-label">
link
<img src="data:," alt="image">
<span aria-hidden="false">one</span>
</a>
<a href="#" data-testname="link with name from contents > img with alt, [span with aria-hidden='true' > span with aria-hidden='false'] is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span aria-hidden="true">
one
<span aria-hidden="false">
two
</span>
</span>
</a>
<a href="#" data-testname="link with name from contents > img with alt, span with aria-hidden='true' is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span aria-hidden="true">one</span>
</a>


<button data-testname="empty button > span with aria-hidden='false' is labelled" data-expectedlabel="one" class="ex-label">
<span aria-hidden="false">
one
</span>
</button>

<button data-testname="empty button > span with aria-hidden='true' has no label" data-expectedlabel="" class="ex-label">
<span aria-hidden="true">
one
</span>
</button>
Comment on lines +174 to +178
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto re: empty label above. Suggest modify or remove.


<button data-testname="button with name from contents > span with aria-hidden='false' is labelled" data-expectedlabel="label one" class="ex-label">
label
<span aria-hidden="false">
one
</span>
</button>

<button data-testname="button with name from contents > span with aria-hidden='true' is labelled" data-expectedlabel="label" class="ex-label">
label
<span aria-hidden="true">
one
</span>
</button>

<button data-testname="button with name from contents > span with aria-hidden='true' > span with aria-hidden'false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span aria-hidden="true">
one
<span aria-hidden="false">
two
</span>
</span>
</button>

<button data-testname="button with name from contents > span with aria-hidden='false' > span with aria-hidden'true' is labelled" data-expectedlabel="label one" class="ex-label">
label
<span aria-hidden="false">
one
<span aria-hidden="true">
two
</span>
</span>
</button>

<h2><code>aria-hidden="false"</code> and other rendering techniques tested via label</h2>

<!-- aria-hidden and HTML5 hidden attribute -->
<h3 data-testname="h3 > span with hidden attribute > span with aria-hidden='false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span hidden>
one
<span aria-hidden="false">
two
</span>
</span>
</h3>

<h3 data-testname="h3 > span with aria-hidden='false' > span with hidden attribute is labelled" data-expectedlabel="label one" class="ex-label">
label
<span aria-hidden="false">
one
<span hidden>
two
</span>
</span>
</h3>

<a href="#" data-testname="link with name from contents > img with alt, span with hidden attribute is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span hidden>one</span>
</a>

<a href="#" data-testname="link with name from contents > img with alt, [span with hidden attribute > span with aria-hidden='false'] is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span hidden>
one
<span aria-hidden="false">
two
</span>
</span>
</a>

<a href="#" data-testname="link with name from contents > img with alt, [span with aria-hidden='false' > span with hidden attribute] is labelled" data-expectedlabel="link image one" class="ex-label">
link
<img src="data:," alt="image">
<span aria-hidden="false">
one
<span hidden>
two
</span>
</span>
</a>

<button data-testname="button with name from contents > span with hidden attribute > span with aria-hidden'false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span hidden>
one
<span aria-hidden="false">
two
</span>
</span>
</button>

<button data-testname="button with name from contents > span with aria-hidden='false' > span with hidden attribute is labelled" data-expectedlabel="label one" class="ex-label">
label
<span aria-hidden="false">
one
<span hidden>
two
</span>
</span>
</button>

<!-- aria-hidden and display:none -->
<h3 data-testname="h3 > span with display: none > span with aria-hidden='false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span style="display: none;">
one
<span aria-hidden="false">
two
</span>
</span>
</h3>

<h3 data-testname="h3 > span with aria-hidden='false' > span with display: none is labelled" data-expectedlabel="label one" class="ex-label">
label
<span aria-hidden="false">
one
<span style="display: none;">
two
</span>
</span>
</h3>

<button data-testname="button with name from contents > span with display: none > span with aria-hidden='false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span style="display: none;">
one
<span aria-hidden="false">
two
</span>
</span>
</button>

<a href="#" data-testname="link with name from contents > img with alt, [span with display: none > span with aria-hidden='false' is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span style="display: none;">
one
<span aria-hidden="false">two</span>
</span>
</a>

<!-- aria-hidden and visibility:hidden -->
<h3 data-testname="h3 > span with visibility: hidden > span with aria-hidden='false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span style="visibility: hidden;">
one
<span aria-hidden="false">
two
</span>
</span>
</h3>

<h3 data-testname="h3 > span with aria-hidden='false' > span with visibility: hidden is labelled" data-expectedlabel="label one" class="ex-label">
label
<span aria-hidden="false">
one
<span style="visibility: hidden;">
two
</span>
</span>
</h3>

<button data-testname="button with name from contents > span with visibility: hidden > span with aria-hidden='false' is labelled" data-expectedlabel="label" class="ex-label">
label
<span style="visibility: hidden;">
one
<span aria-hidden="false">
two
</span>
</span>
</button>

<a href="#" data-testname="link with name from contents > img with alt, [span with visibility: hidden > span with aria-hidden='false' is labelled" data-expectedlabel="link image" class="ex-label">
link
<img src="data:," alt="image">
<span style="visibility: hidden;">
one
<span aria-hidden="false">two</span>
</span>
</a>

<script>
AriaUtils.verifyLabelsBySelector(".ex-label");
</script>

</main>
</body>
</html>