| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <div role="group" aria-label="container"> |
| <div id="listbox" role="listbox" aria-label="Submenu for Products"> |
| <ul> |
| <li><a href=#>Explore products</a></li> |
| </ul> |
| <ul> |
| <li><a href=#>Category A</a></li> |
| <li><a href=#>Category B</a></li> |
| <li><a href=#>Category C</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div id="option-wrapper"> |
| <!-- Add some generic elements in-between to ensure our algorithm is smart enough to traverse through them to find an options. --> |
| <div> |
| <div> |
| <span> |
| <div role="group" aria-label="i'm a group that contains an option, which is a valid child for a listbox"> |
| <div role="option">Foo</div> |
| </div> |
| </span> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| var output = "This test ensures we don't expose invalid role='listbox' elements as platform-role listboxes, as that can cause bad behavior for ATs.\n\n"; |
| // A concrete example of this was on ikea.com, which had product submenus with markup similar to that present in this test. |
| // VoiceOver was not able to navigate inside of it because VoiceOver expected a certain structure and behavior from a listbox. |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true; |
| |
| // The listbox in its initial state is invalid — it has no `option` descendants. We should map it to group. |
| output += expect("accessibilityController.accessibleElementById('listbox').role", "'AXRole: AXGroup'"); |
| |
| // Let's add an option descendant and ensure the role is now reported to be a proper listbox. |
| document.getElementById("listbox").appendChild(document.getElementById("option-wrapper")); |
| setTimeout(async function() { |
| output += await expectAsync("accessibilityController.accessibleElementById('listbox').role", "'AXRole: AXList'"); |
| |
| debug(output); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
| |
