| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/accessibility-helper.js"></script> |
| <div id="flow1">First flow</div> |
| <div id="target1">Target 1</div> |
| <div id="wrapper" tabindex="0"> |
| <div class="flow">Second flow</div> |
| </div> |
| <div id="target2">Target 2</div> |
| <div id="flow3">Third flow</div> |
| <x-target></x-target> |
| <div id="flow4">Fourth flow</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.ariaFlowToElements = [flow3]; |
| this.shadowRoot.appendChild(target); |
| } |
| } |
| customElements.define("x-target", XTarget); |
| |
| class XCustom extends HTMLElement { |
| constructor() { |
| super(); |
| this.attachShadow({ mode: "open" }); |
| let flow = document.createElement("div"); |
| flow.id = "flow5"; |
| flow.textContent = "Fifth flow"; |
| let target = document.createElement("div"); |
| target.id = "target5"; |
| target.textContent = "Target 5"; |
| this.shadowRoot.appendChild(flow); |
| this.shadowRoot.appendChild(target); |
| target.ariaFlowToElements = [flow]; |
| document.body.appendChild(flow); |
| } |
| } |
| customElements.define("x-custom", XCustom); |
| |
| var output = "Checks that element reflection is exposed to the a11y tree for 'ariaFlowToElements'\n\n"; |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true |
| |
| var axFlow1, axTarget1, axTarget2, axFlow2, axFlow3, axInnerTarget, axFlow4, axTarget4, wrapper; |
| setTimeout(async function() { |
| target1.ariaFlowToElements = [flow1]; |
| axFlow1 = accessibilityController.accessibleElementById("flow1"); |
| axTarget1 = accessibilityController.accessibleElementById("target1"); |
| await waitFor(() => axTarget1.ariaFlowToElementAtIndex(0)); |
| output += expect("axTarget1.ariaFlowToElementAtIndex(0).isEqual(axFlow1)", "true"); |
| |
| target2.ariaFlowToElements = [document.getElementsByClassName("flow")[0]]; |
| wrapper = accessibilityController.accessibleElementById("wrapper"); |
| axFlow2 = wrapper.childAtIndex(0); |
| axTarget2 = accessibilityController.accessibleElementById("target2"); |
| await waitFor(() => axTarget2.ariaFlowToElementAtIndex(0)); |
| output += expect("axTarget2.ariaFlowToElementAtIndex(0).isEqual(axFlow2)", "true"); |
| target2.setAttribute("aria-flowto", "flow1"); |
| await waitFor(() => axTarget2.ariaFlowToElementAtIndex(0).isEqual(axFlow1)); |
| output += expect("axTarget2.ariaFlowToElementAtIndex(0).isEqual(axFlow1)", "true"); |
| |
| axFlow3 = accessibilityController.accessibleElementById("flow3"); |
| axInnerTarget = accessibilityController.accessibleElementById("innertarget"); |
| output += expect("axInnerTarget.ariaFlowToElementAtIndex(0).isEqual(axFlow3)", "true"); |
| |
| target2.ariaFlowToElements = [flow1, document.getElementsByClassName("flow")[0], flow3]; |
| await waitFor(() => axTarget2.ariaFlowToElementAtIndex(2)); |
| output += expect("axTarget2.ariaFlowToElementAtIndex(0).isEqual(axFlow1)", "true"); |
| output += expect("axTarget2.ariaFlowToElementAtIndex(1).isEqual(axFlow2)", "true"); |
| output += expect("axTarget2.ariaFlowToElementAtIndex(2).isEqual(axFlow3)", "true"); |
| |
| target4.ariaFlowToElements = [flow4]; |
| flow4.id = "flow4-new"; |
| axFlow4 = accessibilityController.accessibleElementById("flow4-new"); |
| axTarget4 = accessibilityController.accessibleElementById("target4"); |
| await waitFor(() => axTarget4.ariaFlowToElementAtIndex(0)); |
| output += expect("axTarget4.ariaFlowToElementAtIndex(0).isEqual(axFlow4)", "true"); |
| |
| axFlow5 = accessibilityController.accessibleElementById("flow5"); |
| axTarget5 = accessibilityController.accessibleElementById("target5"); |
| output += expect("axTarget5.ariaFlowToElementAtIndex(0).isEqual(axFlow5)", "true"); |
| |
| debug(output); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
