ax-role-inference-item-elementinternals-nested.html (1984B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Nested owners ElementInternals item roles preserved</title> 4 <meta name="assert" content="In nested focusgroups, ElementInternals supplied item roles (button/menuitem) remain preserved and are not coerced by owner inference."> 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 10 <div id="outerToolbar" focusgroup="toolbar"> 11 <focusgroup-toolbar-button-internals id="tbItem" tabindex="0"></focusgroup-toolbar-button-internals> 12 <div id="innerMenu" focusgroup="menu"> 13 <focusgroup-menuitem-internals id="menuItem" tabindex="0"></focusgroup-menuitem-internals> 14 </div> 15 </div> 16 17 <script> 18 class FocusgroupToolbarButtonInternals extends HTMLElement { 19 constructor() { 20 super(); 21 this.internals_ = this.attachInternals(); 22 this.internals_.role = 'button'; 23 this.textContent = 'Tool'; 24 } 25 } 26 customElements.define('focusgroup-toolbar-button-internals', FocusgroupToolbarButtonInternals); 27 28 class FocusgroupMenuItemInternals extends HTMLElement { 29 constructor() { 30 super(); 31 this.internals_ = this.attachInternals(); 32 this.internals_.role = 'menuitem'; 33 this.textContent = 'Action'; 34 } 35 } 36 customElements.define('focusgroup-menuitem-internals', FocusgroupMenuItemInternals); 37 </script> 38 39 <script> 40 if (!window.accessibilityController) { 41 test(() => { assert_true(true); }, 'accessibilityController not available (noop)'); 42 } else { 43 test(() => { 44 const tbAX = accessibilityController.accessibleElementById('tbItem'); 45 assert_equals(tbAX.role, 'AXRole: AXButton'); 46 const menuItemAX = accessibilityController.accessibleElementById('menuItem'); 47 assert_equals(menuItemAX.role, 'AXRole: AXMenuItem'); 48 }, 'Nested focusgroup ElementInternals item roles preserved'); 49 } 50 </script>