contextual-roles.html (3160B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Contextual Role Verification Tests</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <body> 13 14 <p>Verifies Required Accessibility Parent Roles from <a href="https://w3c.github.io/aria/#scope">5.2.7 Required Accessibility Parent Role</a></p> 15 <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> 16 17 <!-- Notes for "required context" testing: 18 19 - See Computed Role for more details on role computation when an element lacks required context: 20 https://w3c.github.io/core-aam/#roleMappingComputedRole 21 22 - See ARIA spec for full listing of "Required Accessibility Parent Role" for each element: 23 https://w3c.github.io/aria/#scope 24 25 Identified roles with "Required Context" excluding abstract roles (e.g., child -> parent): 26 27 - caption -> {figure, grid, table, treegrid} 28 - cell -> row 29 - columnheader -> row 30 - gridcell -> row 31 - listitem -> {list, directory} *Note: directory role is deprecated as of ARIA 1.2 32 - menuitem -> {group, menu, menubar} 33 - menuitemcheckbox -> {group, menu, menubar} 34 - menuitemradio -> {group, menu, menubar} 35 - option -> {group, listbox} 36 - row -> {grid, rowgroup, table, treegrid} 37 - rowgroup -> {grid, table, treegrid} 38 - rowheader -> row 39 - tab -> tablist 40 - treeitem -> {group, tree} 41 42 --> 43 44 <!-- Required Context Roles Testing --> 45 46 <!-- caption -> ./table-roles.html --> 47 48 <!-- cell -> ./table-roles.html --> 49 50 <!-- columnheader -> ./grid-roles.html, ./table-roles.html --> 51 52 <!-- gridcell -> ./grid-roles.html --> 53 54 <!-- listitem -> ./list-roles.html --> 55 56 <!-- menuitem, menuitemcheckbox, menuitemradio -> ./menu-roles.html --> 57 58 <!-- option -> ./listbox-roles.html --> 59 60 <!-- row -> ./grid-roles.html, ./table-roles.html --> 61 62 <!-- rowgroup -> ./grid-roles.html, ./table-roles.html --> 63 64 <!-- rowheader -> ./grid-roles.html, ./table-roles.html --> 65 66 <!-- tab -> ./tab-roles.html --> 67 68 <!-- treeitem -> ./tree-roles.html --> 69 70 <!-- Misc Contextual Role Testing --> 71 72 <!-- Testing contentinfo role computation when scoped to <main> or not: 73 1. If <footer> is a descendant of <main>, it should become 'generic' 74 2. If <footer> is scoped to <body>, it should be 'contentinfo' as expected 75 76 see: https://w3c.github.io/html-aam/#el-footer-ancestorbody --> 77 <!-- main>footer -> ./roles-contextual.tentative.html --> 78 79 <footer data-testname="footer scoped to body element is contentinfo" data-expectedrole="contentinfo" class="ex">x</footer> 80 <div role="contentinfo" data-testname="contentinfo region scoped to body element is contentinfo" data-expectedrole="contentinfo" class="ex">x</div> 81 82 <script> 83 AriaUtils.verifyRolesBySelector(".ex"); 84 </script> 85 86 </body> 87 </html>