| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/accessibility-helper.js"></script> |
| <div id="error1">First error</div> |
| <div id="target1">Target 1</div> |
| <div id="wrapper" tabindex="0"> |
| <div class="error">Second error</div> |
| </div> |
| <div id="target2">Target 2</div> |
| <div id="error3">Third error</div> |
| <x-target></x-target> |
| <div id="error4">Fourth error</div> |
| <div id="target4">Target 4</div> |
| <x-custom></x-custom> |
| |
| <script> |
| class XTarget extends HTMLElement { |
| constructor() { |
| super(); |
| this.attachShadow({ mode: "open" }); |
| let target = document.createElement("div"); |
| target.id = "innertarget"; |
| target.textContent = "Target 3"; |
| target.ariaErrorMessageElements = [error3]; |
| target.ariaInvalid = true; |
| this.shadowRoot.appendChild(target); |
| } |
| } |
| customElements.define("x-target", XTarget); |
| |
| class XCustom extends HTMLElement { |
| constructor() { |
| super(); |
| this.attachShadow({ mode: "open" }); |
| let error = document.createElement("div"); |
| error.id = "error5"; |
| error.textContent = "Fifth error"; |
| let target = document.createElement("div"); |
| target.id = "target5"; |
| target.textContent = "Target 5"; |
| this.shadowRoot.appendChild(error); |
| this.shadowRoot.appendChild(target); |
| target.ariaErrorMessageElements = [error]; |
| target.ariaInvalid = true; |
| document.body.appendChild(error); |
| } |
| } |
| customElements.define("x-custom", XCustom); |
| |
| var output = "Checks that element reflection is exposed to the a11y tree for 'ariaErrorMessageElements'\n\n"; |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true; |
| |
| var axError1, axTarget1, wrapper, axError2, axTarget2, axError3, axInnerTarget, axErrorMessage4, axTarget4, axErrorMessage5, axTarget5; |
| setTimeout(async function() { |
| target1.ariaInvalid = true; |
| target1.ariaErrorMessageElements = [error1]; |
| axError1 = accessibilityController.accessibleElementById("error1"); |
| axTarget1 = accessibilityController.accessibleElementById("target1"); |
| await waitFor(() => axTarget1.ariaErrorMessageElementAtIndex(0)); |
| output += expect("axTarget1.ariaErrorMessageElementAtIndex(0).isEqual(axError1)", "true"); |
| |
| target2.ariaInvalid = true; |
| target2.ariaErrorMessageElements = [document.getElementsByClassName("error")[0]]; |
| wrapper = accessibilityController.accessibleElementById("wrapper"); |
| axError2 = wrapper.childAtIndex(0); |
| axTarget2 = accessibilityController.accessibleElementById("target2"); |
| await waitFor(() => axTarget2.ariaErrorMessageElementAtIndex(0)); |
| output += expect("axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError2)", "true"); |
| target2.setAttribute("aria-errormessage", "error1"); |
| await waitFor(() => axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError1)); |
| output += expect("axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError1)", "true"); |
| |
| axError3 = accessibilityController.accessibleElementById("error3"); |
| axInnerTarget = accessibilityController.accessibleElementById("innertarget"); |
| output += expect("axInnerTarget.ariaErrorMessageElementAtIndex(0).isEqual(axError3)", "true"); |
| |
| target2.ariaErrorMessageElements = [error1, document.getElementsByClassName("error")[0], error3]; |
| await waitFor(() => axTarget2.ariaErrorMessageElementAtIndex(2)); |
| output += expect("axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError1)", "true"); |
| output += expect("axTarget2.ariaErrorMessageElementAtIndex(1).isEqual(axError2)", "true"); |
| output += expect("axTarget2.ariaErrorMessageElementAtIndex(2).isEqual(axError3)", "true"); |
| |
| target4.ariaInvalid = true; |
| target4.ariaErrorMessageElements = [error4]; |
| error4.id = "error4-new"; |
| axErrorMessage4 = accessibilityController.accessibleElementById("error4-new"); |
| axTarget4 = accessibilityController.accessibleElementById("target4"); |
| await waitFor(() => axTarget4.ariaErrorMessageElementAtIndex(0)); |
| output += expect("axTarget4.ariaErrorMessageElementAtIndex(0).isEqual(axErrorMessage4)", "true"); |
| |
| axErrorMessage5 = accessibilityController.accessibleElementById("error5"); |
| axTarget5 = accessibilityController.accessibleElementById("target5"); |
| output += expect("axTarget5.ariaErrorMessageElementAtIndex(0).isEqual(axErrorMessage5)", "true"); |
| debug(output); |
| finishJSTest(); |
| }) |
| } |
| </script> |
