ax-role-inference-children.html (3165B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Child implied AX role inference</title> 4 <meta name="assert" content="Generic child elements inside a focusgroup with implied owner role map to behavior-specific child roles; explicit and native child roles are preserved."> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 6 <link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 13 <!-- Tablist behavior --> 14 <div id=fgTablist focusgroup="tablist"> 15 <span tabindex=0 id=tabChild>Tab</span> 16 </div> 17 18 <!-- Radiogroup behavior --> 19 <div id=fgRadiogroup focusgroup="radiogroup"> 20 <span tabindex=0 id=radioChild>Radio</span> 21 </div> 22 23 <!-- Listbox behavior --> 24 <div id=fgListbox focusgroup="listbox"> 25 <span tabindex=0 id=listboxChild>Option</span> 26 </div> 27 28 <!-- Menu behavior --> 29 <div id=fgMenu focusgroup="menu"> 30 <span tabindex=0 id=menuChild>Menu Item</span> 31 </div> 32 33 <!-- Menubar behavior --> 34 <div id=fgMenubar focusgroup="menubar"> 35 <span tabindex=0 id=menubarChild>Menu Item</span> 36 </div> 37 38 <!-- Explicit child role (should not be overridden) --> 39 <div id=fgExplicitChild focusgroup="tablist"> 40 <span id="explicitChild" tabindex=0 role=listitem>List Item</span> 41 </div> 42 43 <!-- Native child semantics (button) should be preserved --> 44 <div id=fgNativeChild focusgroup="radiogroup"> 45 <button id=nativeChild>Button</button> 46 </div> 47 48 <script> 49 // Use WebDriver get_computed_role to assert author vs implied roles. 50 // This mirrors pattern in wai-aria/role/basic.html. 51 52 async function assert_role_equals(idref,expected_role) { 53 const element = document.getElementById(idref); 54 const role = await test_driver.get_computed_role(element); 55 assert_equals(role, expected_role); 56 } 57 58 promise_test(async t => { 59 await assert_role_equals('tabChild', 'tab'); 60 }, 'Tablist child gets implied tab role'); 61 62 promise_test(async t => { 63 // Blink exposes role="radio" as AXRadioButton internally; computed role should be 'radio'. 64 await assert_role_equals('radioChild', 'radio'); 65 }, 'Radiogroup child gets implied radio role'); 66 67 promise_test(async t => { 68 await assert_role_equals('listboxChild', 'option'); 69 }, 'Listbox child gets implied option role'); 70 71 promise_test(async t => { 72 await assert_role_equals('menuChild', 'menuitem'); 73 }, 'Menu child gets implied menuitem role'); 74 75 promise_test(async t => { 76 // Menubar items map to menuitem. 77 await assert_role_equals('menubarChild', 'menuitem'); 78 }, 'Menubar child gets implied menuitem role'); 79 80 promise_test(async t => { 81 // Explicit author-supplied listitem role should be preserved. 82 await assert_role_equals('explicitChild', 'listitem'); 83 }, 'Explicit child role preserved over implied mapping'); 84 85 promise_test(async t => { 86 // Native button semantics must be preserved. 87 await assert_role_equals('nativeChild', 'button'); 88 }, 'Native child semantics preserved over implied mapping'); 89 </script>