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

Changes from 5 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
102 changes: 102 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,102 @@
<!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 Context Roles from <a href="https://www.w3.org/TR/wai-aria-1.2/#scope">5.2.7 Required Context Role</a></p>
<p>Also verifies Required Owned Roles from <a href="https://www.w3.org/TR/wai-aria-1.2/#mustContain">5.2.6 Required Owned Role</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 1.2 spec for full listing of "Required Context Role" for each element:
https://www.w3.org/TR/wai-aria-1.2/

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}

-->

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

<!-- Testing orphaned table semantics -->
<span role="cell" data-testname="orphan span with cell role" class="ex-generic">x</span>
<span role="rowgroup" data-testname="orphan span with rowgroup role" class="ex-generic">x</span>
<span role="columnheader" data-testname="orphan span with columnheader role" class="ex-generic">x</span>
<span role="rowheader" data-testname="orphan span with rowheader role" class="ex-generic">x</span>
<span role="row" data-testname="orphan span with row role" class="ex-generic">x</span>

<!-- Testing orphaned list semantics -->
<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>

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

<!-- Testing orphaned menu semantics -->
<button role="menuitemcheckbox" data-testname="orphan button with menuitemcheckbox role" data-expectedrole="button" class="ex">x</button>
<button role="menuitemradio" data-testname="orphan button with menuitemradio role" data-expectedrole="button" class="ex">x</button>
<div role="menuitemcheckbox" data-testname="orphan div with menuitemcheckbox role" class="ex-generic">x</div>
<div role="menuitemradio" data-testname="orphan div with menuitemradio role" class="ex-generic">x</div>

<!-- Testing orphaned group/listbox semantics -->
<span role="option" data-testname="orphan span with option role" class="ex-generic">x</span>
<button role="option" data-testname="orphan button with option role" data-expectedrole="button" class="ex">x</button>

<!-- Testing orphaned 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>

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

<!-- 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>
</main>

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