| <!DOCTYPE html> |
| <html> |
| <body> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <div class="control">Panel 1</div> |
| <div class="control">Panel 2</div> |
| <div id="host"></div> |
| <script> |
| |
| class CustomTabElement extends HTMLElement { |
| constructor() |
| { |
| super(); |
| window.internals = this.attachInternals(); |
| internals.role = 'tab'; |
| internals.ariaControlsElements = Array.from(document.querySelectorAll('.control')); |
| shouldBe('internals.ariaControlsElements.length', '2'); |
| shouldBe('internals.ariaControlsElements[0]', 'document.querySelectorAll(".control")[0]'); |
| shouldBe('internals.ariaControlsElements[1]', 'document.querySelectorAll(".control")[1]'); |
| } |
| }; |
| customElements.define('custom-tab', CustomTabElement); |
| |
| const customElement = new CustomTabElement; |
| customElement.id = 'custom-tab'; |
| const shadowRoot = host.attachShadow({'mode': 'closed'}); |
| shadowRoot.appendChild(customElement); |
| |
| description("This tests that ElementInternals.ariaControlsElements can reference nodes outside the shadow tree."); |
| if (!window.accessibilityController) |
| debug('This test requires accessibilityController'); |
| else { |
| function labelForControl(control) { |
| if (accessibilityController.platformName == "mac") |
| return control.childAtIndex(0).stringValue; |
| return control.stringValue; |
| } |
| window.customTab = accessibilityController.accessibleElementById('custom-tab'); |
| shouldBeEqualToString('labelForControl(customTab.ariaControlsElementAtIndex(0))', 'AXValue: Panel 1'); |
| shouldBeEqualToString('labelForControl(customTab.ariaControlsElementAtIndex(1))', 'AXValue: Panel 2'); |
| } |
| |
| </script> |
| </body> |
| </html> |
