| <!DOCTYPE html> |
| <html> |
| <body id="body"> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <div id="host"></div> |
| <div id="some" class="note">some description</div> |
| <div class="note">other description</div> |
| <div id="details1" class="details">some details</div> |
| <div id="details2" class="details">other details</div> |
| <div id="error1" class="error">some error</div> |
| <div id="error2" class="error">other error</div> |
| <script> |
| |
| class CustomElement extends HTMLElement { |
| constructor() |
| { |
| super(); |
| window.internals = this.attachInternals(); |
| internals.role = 'checkbox'; |
| internals.ariaDescribedByElements = Array.from(document.querySelectorAll('.note')); |
| internals.ariaDetailsElements = Array.from(document.querySelectorAll('.details')); |
| internals.ariaErrorMessageElements = Array.from(document.querySelectorAll('.error')); |
| internals.ariaInvalid = true; |
| shouldBe('internals.ariaDescribedByElements.length', '2'); |
| shouldBe('internals.ariaDescribedByElements[0]', 'document.querySelectorAll(".note")[0]'); |
| shouldBe('internals.ariaDescribedByElements[1]', 'document.querySelectorAll(".note")[1]'); |
| shouldBe('internals.ariaDetailsElements.length', '2'); |
| shouldBe('internals.ariaDetailsElements[0]', 'document.querySelectorAll(".details")[0]'); |
| shouldBe('internals.ariaDetailsElements[1]', 'document.querySelectorAll(".details")[1]'); |
| shouldBe('internals.ariaErrorMessageElements.length', '2'); |
| shouldBe('internals.ariaErrorMessageElements[0]', 'document.querySelectorAll(".error")[0]'); |
| shouldBe('internals.ariaErrorMessageElements[1]', 'document.querySelectorAll(".error")[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'); |
| if (accessibilityController.platformName == "mac") |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").customContent', 'description: some description other description'); |
| else |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").helpText', 'AXHelp: some description other description'); |
| |
| shouldBe('accessibilityController.accessibleElementById("custom-1").detailsElements().length', '2'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").detailsElements()[0].domIdentifier', 'details1'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").detailsElements()[1].domIdentifier', 'details2'); |
| shouldBe('accessibilityController.accessibleElementById("custom-1").errorMessageElements().length', '2'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").errorMessageElements()[0].domIdentifier', 'error1'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").errorMessageElements()[1].domIdentifier', 'error2'); |
| } |
| |
| </script> |
| </body> |
| </html> |
