| <!DOCTYPE html> |
| <html> |
| <body id="body"> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <div role="button" class="flowto">FlowTo1</div> |
| <div id="flowto2" role="button" class="flowto">FlowTo2</div> |
| <div class="label">label 1</div> |
| <div id="label2" class="label">label 2</div> |
| <div id="host"></div> |
| <script> |
| |
| class CustomElement extends HTMLElement { |
| constructor() |
| { |
| super(); |
| window.internals = this.attachInternals(); |
| internals.role = 'checkbox'; |
| internals.ariaFlowToElements = Array.from(document.querySelectorAll('.flowto')); |
| internals.ariaLabelledByElements = Array.from(document.querySelectorAll('.label')); |
| shouldBe('internals.ariaFlowToElements.length', '2'); |
| shouldBe('internals.ariaFlowToElements[0]', 'document.querySelectorAll(".flowto")[0]'); |
| shouldBe('internals.ariaFlowToElements[1]', 'document.querySelectorAll(".flowto")[1]'); |
| shouldBe('internals.ariaLabelledByElements.length', '2'); |
| shouldBe('internals.ariaLabelledByElements[0]', 'document.querySelectorAll(".label")[0]'); |
| shouldBe('internals.ariaLabelledByElements[1]', 'document.querySelectorAll(".label")[1]'); |
| } |
| }; |
| customElements.define('custom-element', CustomElement); |
| |
| const shadowRoot = host.attachShadow({'mode': 'closed'}); |
| const customElement = new CustomElement; |
| customElement.id = 'custom-1'; |
| shadowRoot.appendChild(customElement); |
| |
| description("This tests that aria fallback roles work correctly."); |
| if (!window.accessibilityController) |
| debug('This test requires accessibilityController'); |
| else { |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").role', 'AXRole: AXCheckBox'); |
| shouldBeEqualToString('platformValueForW3CName(accessibilityController.accessibleElementById("custom-1"))', 'label 1 label 2'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").ariaFlowToElementAtIndex(0).role', 'AXRole: AXButton'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").ariaFlowToElementAtIndex(0).title', 'AXTitle: FlowTo1'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").ariaFlowToElementAtIndex(1).role', 'AXRole: AXButton'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").ariaFlowToElementAtIndex(1).title', 'AXTitle: FlowTo2'); |
| shouldBe('accessibilityController.accessibleElementById("custom-1").ariaFlowToElementAtIndex(2)', 'null'); |
| } |
| |
| </script> |
| </body> |
| </html> |
