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

Create wai-aria/role/contextual-roles.html #42412

Merged
merged 31 commits into from
Oct 16, 2023
Merged

Create wai-aria/role/contextual-roles.html #42412

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
e499ad6
Test file set up using contextual-roles.html
Oct 6, 2023
8c3c0f0
Update test file with required context roles notes per ARIA 1.2 spec
Oct 6, 2023
bf3c2f8
Fix start/end tags, add more tests
Oct 6, 2023
0c95a32
Add more tests, footer landmark tests
Oct 6, 2023
26cb287
More tests, tpyo fixes
Oct 6, 2023
cfa2459
Update criteria for required a11y parent role
rahimabdi Oct 8, 2023
a6f8e30
Update more criteria around allowed a11y child roles
rahimabdi Oct 8, 2023
b08cd54
Update footer test to use single <main>
rahimabdi Oct 8, 2023
4144c67
Add documentation for orphaned group/listbox tests
rahimabdi Oct 8, 2023
178abf2
Merging master into rahim/aria-contextual-roles-tests
Oct 11, 2023
8183b19
Alphabetize tests, add documentation sections
Oct 11, 2023
501c947
Move tab tests to ./tab-roles.html
Oct 11, 2023
1d45c81
Move tree tests to ./tree-roles.html
Oct 11, 2023
f55021f
Move menuitem tests to ./menu-roles.html
Oct 11, 2023
c511316
Move listitem tests to ./list-roles.html
Oct 11, 2023
aed8053
Move (or merge) grid tests to ./grid-roles.html
Oct 11, 2023
efea07d
Update for columnheader grid test (already in ./grid-roles.html)
Oct 11, 2023
78c54c8
whitespace lint in wai-aria/role/contextual-roles.html
cookiecrook Oct 11, 2023
87e28cb
Create ./table-roles
Oct 13, 2023
b701ac3
Fix HTML indentation
Oct 13, 2023
3e52392
Transfer more contextual-roles.html tests, add/move tests to table-ro…
Oct 13, 2023
f225afa
Fix tests in table-roles.html to ensure proper expected roles
Oct 13, 2023
f98d4c2
Fix spacing in contextual-roles.html, update reference documentation …
Oct 13, 2023
ff2afd7
Add table testing documentation references to grid-roles.html, html-a…
Oct 13, 2023
79dd0bd
Add table testing documentation references to contextual-roles.html
Oct 13, 2023
1907ec6
Fix open/ending tags, nesting in table-roles.html
Oct 13, 2023
71dc120
Fix wai-aria/role/table-roles.html reference in html-aam/table-roles.…
Oct 13, 2023
3b07e3b
Fix spacing in footer test
Oct 13, 2023
779d818
Update orphaned row test name
Oct 13, 2023
7ce9c4f
More fixes for grid-roles.html test names
Oct 13, 2023
a261a31
m. whitespace link.
cookiecrook Oct 13, 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
93 changes: 93 additions & 0 deletions wai-aria/role/contextual-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!doctype html>
<html>
<head>
<title>Contextual Role Verification Tests</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>

<p>Verifies Required Accessibility Parent Roles from <a href="https://w3c.github.io/aria/#scope">5.2.7 Required Accessibility Parent Role</a></p>
<p>Also verifies Allowed Accessibility Child Roles from <a href="https://w3c.github.io/aria/#mustContain">5.2.6 Allowed Accessibility Child Roles</a></p>

<!-- Notes for "required context" testing:

- See Computed Role for more details on role computation when an element lacks required context:
https://w3c.github.io/core-aam/#roleMappingComputedRole

- See ARIA spec for full listing of "Required Accessibility Parent Role" for each element:
https://w3c.github.io/aria/#scope

Identified roles with "Required Context" excluding abstract roles (e.g., child -> parent):

- caption -> {figure, grid, table, treegrid}
- cell -> row
- columnheader -> row
- gridcell -> row
Copy link
Contributor

Choose a reason for hiding this comment

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

At least some are in ./table-roles.html

Copy link
Contributor Author

@rahimabdi rahimabdi Oct 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

It looks like table-roles.html doesn't exist? Happy to create 👍🏾

Copy link
Contributor

Choose a reason for hiding this comment

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

Right... there's a /html-aam/table-roles.html, but I agree that this should be a new file in /wai-aria

Please add it, and include comment pointers to/from the related files:

  • /html-aam/table-roles.html
  • /wai-aria/grid-roles.html

such as:

<!-- grid roles tested in ./grid-roles.html -->

and vice versa pointers back to your new file from the others. Thanks!

- listitem -> {list, directory} *Note: directory role is deprecated as of ARIA 1.2
- menuitem -> {group, menu, menubar}
- menuitemcheckbox -> {group, menu, menubar}
- menuitemradio -> {group, menu, menubar}
- option -> {group, listbox}
- row -> {grid, rowgroup, table, treegrid}
- rowgroup -> {grid, table, treegrid}
- rowheader -> row
- tab -> tablist
- treeitem -> {group, tree}

-->

<!-- Required Context Roles Testing -->

<!-- caption -->
<p role="caption" data-testname="orphan p with caption role" data-expectedrole="paragraph" class="ex">x</p>

<!-- cell -->
<span role="cell" data-testname="orphan span with cell role" class="ex-generic">x</span>

<!-- columnheader -> ./grid-roles.html -->

<!-- gridcell -> ./grid-roles.html -->

<!-- listitem -> ./list-roles.html -->

<!-- menuitem, menuitemcheckbox, menuitemradio -> ./menu-roles.html -->

<!-- option -> ./listbox-roles.html -->

<!-- row -> ./grid-roles.html -->

<!-- rowgroup -> ./grid-roles.html -->

<!-- rowheader -> ./grid-roles.html -->

<!-- tab -> ./tab-roles.html -->

<!-- treeitem -> ./tree-roles.html -->

<!-- Misc Contextual Role Testing -->

<!-- Testing contentinfo role computation when scoped to <main> or not:
1. If <footer> is a descendent of <main>, it should become 'generic'
2. If <footer> is scoped to <body>, it should be 'contentinfo' as expected

see: https://w3c.github.io/html-aam/#el-footer-ancestorbody -->
<main>
<footer data-testname="footer scoped to main element" class="ex-generic">x</footer>
<div role="contentinfo" data-testname="contentinfo region scoped to main element" class="ex-generic">x</div>
</main>

<footer data-testname="footer scoped to body element " data-expectedrole="contentinfo" class="ex">x</footer>
<div role="contentinfo" data-testname="contentinfo region scoped to body element" data-expectedrole="contentinfo" class="ex">x</div>

<script>
AriaUtils.verifyRolesBySelector(".ex");
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
</script>

</body>
</html>
3 changes: 3 additions & 0 deletions wai-aria/role/grid-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,10 @@
</div>
</div>

<span role="row" data-testname="orphaned row outside the context of row" class="ex-generic">x</span>
<span role="rowgroup" data-testname="orphaned rowgroup outside the context of row" class="ex-generic">x</span>
<div role="gridcell" data-testname="orphaned gridcell outside the context of row" class="ex-generic">x</div>
<button role="gridcell" data-testname="orphaned button outside the context of row" data-expectedrole="button" class="ex">x</button>
<div role="rowheader" data-testname="orphaned rowheader outside the context of row" class="ex-generic">x</div>
<div role="columnheader" data-testname="orphaned columnheader outside the context of row" class="ex-generic">x</div>

Expand Down
3 changes: 3 additions & 0 deletions wai-aria/role/list-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
<div role="listitem" data-testname="last simple listitem" data-expectedrole="listitem" class="ex">x</div>
</div>

<div role="listitem" data-testname="orphan div with listitem role" class="ex-generic">x</div>
<p role="listitem" data-testname="orphan p with listitem role" data-expectedrole="paragraph" class="ex">x</p>

<script>
AriaUtils.verifyRolesBySelector(".ex");
</script>
Expand Down
9 changes: 9 additions & 0 deletions wai-aria/role/menu-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,15 @@
class="ex">x
</nav>

<button role="menuitem" data-testname="orphan button with menuitem role" data-expectedrole="button" class="ex">x</button>
<div role="menuitem" data-testname="orphan div with menuitem role" class="ex-generic">x</div>

<button role="menuitemcheckbox" data-testname="orphan button with menuitemcheckbox role" data-expectedrole="button" class="ex">x</button>
<div role="menuitemcheckbox" data-testname="orphan div with menuitemcheckbox role" class="ex-generic">x</div>

<button role="menuitemradio" data-testname="orphan button with menuitemradio role" data-expectedrole="button" class="ex">x</button>
<div role="menuitemradio" data-testname="orphan div with menuitemradio role" class="ex-generic">x</div>

<script>
AriaUtils.verifyRolesBySelector(".ex");
</script>
Expand Down
4 changes: 4 additions & 0 deletions wai-aria/role/tab-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,10 @@
<div role="tabpanel" data-testname="role is tabpanel as sibling to ul with child role none li elements" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div>
<div role="tabpanel" data-testname="role is tabpanel as sibling to ul with child role none li elements (duplicate)" data-expectedrole="tabpanel" class="ex">Tab two's stuff</div>

<!--orphan tab semantics -->
<button role="tab" data-testname="orphan button with tab role" data-expectedrole="button" class="ex">x</button>
<span role="tab" data-testname="orphan span with tab role" class="ex-generic">x</span>

<script>
AriaUtils.verifyRolesBySelector(".ex");
</script>
Expand Down
22 changes: 22 additions & 0 deletions wai-aria/role/table-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<html>
<head>
<title>Table Role Verification Tests</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>

<p>Tests <a href="https://w3c.github.io/aria/#table">table</a> and related roles.</p>

<script>
AriaUtils.verifyRolesBySelector(".ex");
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
</script>

</body>
</html>
1 change: 1 addition & 0 deletions wai-aria/role/tree-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@
</table>

<nav role="treeitem" data-testname="orphaned treeitem outside the context of tree" data-expectedrole="navigation" class="ex">x</nav>
<button role="treeitem" data-testname="orphaned button with treeitem role outside tree context" data-expectedrole="button" class="ex">x</button>

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