| <!DOCTYPE HTML> |
| <script src="../resources/gc.js"></script> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="../http/tests/resources/permissions-helper.js"></script> |
| <script src="resources/aom-helper.js"></script> |
| |
| <!-- |
| |
| Accessibility Object Model |
| Explainer: https://github.com/WICG/aom/blob/gh-pages/explainer.md |
| Spec: https://wicg.github.io/aom/spec/ |
| |
| --> |
| <script> |
| test(function(t) { |
| assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled); |
| }, "Make sure that Accessibility Object Model is enabled"); |
| </script> |
| |
| <button id="target1">Target</button> |
| |
| <script> |
| async_test(function(t) { |
| enableAccessibilityEventsPermission().then(function() { |
| var target1 = document.getElementById("target1"); |
| var axTarget1 = accessibilityController.accessibleElementById("target1"); |
| |
| var success = false; |
| target1.accessibleNode.onaccessibleclick = function() { |
| success = true; |
| }; |
| axTarget1.press(); |
| |
| assert_true(success); |
| t.done(); |
| }); |
| }, "AccessibleNode.onaccessibleclick"); |
| </script> |
| |
| <button id="target2">Target</button> |
| |
| <script> |
| async_test(function(t) { |
| enableAccessibilityEventsPermission().then(function() { |
| var target2 = document.getElementById("target2"); |
| var axTarget2 = accessibilityController.accessibleElementById("target2"); |
| |
| var success = false; |
| target2.accessibleNode.addEventListener("accessibleclick", function() { |
| success = true; |
| }, false); |
| axTarget2.press(); |
| |
| assert_true(success); |
| t.done(); |
| }); |
| }, "AccessibleNode.addEventListener('accessibleclick')"); |
| </script> |
| |
| <button id="target3a">Target without preventDefault</button> |
| <button id="target3b">Target with preventDefault</button> |
| |
| <script> |
| async_test(function(t) { |
| enableAccessibilityEventsPermission().then(function() { |
| var target3a = document.getElementById("target3a"); |
| var target3b = document.getElementById("target3b"); |
| var axTarget3a = accessibilityController.accessibleElementById("target3a"); |
| var axTarget3b = accessibilityController.accessibleElementById("target3b"); |
| |
| // Without preventDefault, the AOM event listener gets called |
| // first, and then the DOM event listener. |
| var calledAOMForTargetA = false; |
| target3a.accessibleNode.onaccessibleclick = function() { |
| calledAOMForTargetA = true; |
| }; |
| var calledDOMForTargetA = false; |
| target3a.addEventListener("click", function() { |
| calledDOMForTargetA = true; |
| }, false); |
| axTarget3a.press(); |
| |
| assert_true(calledAOMForTargetA, "called AOM for target A"); |
| assert_true(calledDOMForTargetA, "called DOM for target A"); |
| |
| // With preventDefault, the AOM event listener gets called only. |
| var calledAOMForTargetB = false; |
| target3b.accessibleNode.onaccessibleclick = function(evt) { |
| calledAOMForTargetB = true; |
| evt.preventDefault(); |
| }; |
| var calledDOMForTargetB = false; |
| target3b.addEventListener("click", function() { |
| calledDOMForTargetB = true; |
| }, false); |
| axTarget3b.press(); |
| |
| assert_true(calledAOMForTargetB, "called AOM for target B"); |
| assert_false(calledDOMForTargetB, "called DOM for target B"); |
| t.done(); |
| }); |
| }, "AOM events preventDefault"); |
| </script> |
| |
| <p id="p4"> |
| <button id="target4">Target</button> |
| </p> |
| |
| <script> |
| async_test(function(t) { |
| enableAccessibilityEventsPermission().then(function() { |
| var p4 = document.getElementById("p4"); |
| var axTarget4 = accessibilityController.accessibleElementById("target4"); |
| |
| var success = false; |
| p4.accessibleNode.onaccessibleclick = function() { |
| success = true; |
| }; |
| axTarget4.press(); |
| |
| assert_true(success); |
| t.done(); |
| }); |
| }, "AOM events bubble"); |
| </script> |
| |
| <section id="section5"> |
| <ul id="ul5"> |
| <li id="li5"> |
| <button id="target5">Target</button> |
| </li> |
| </ul> |
| </section> |
| |
| <script> |
| async_test(function(t) { |
| enableAccessibilityEventsPermission().then(function() { |
| var section5 = document.getElementById("section5"); |
| var ul5 = document.getElementById("ul5"); |
| var li5 = document.getElementById("li5"); |
| var target5 = document.getElementById("target5"); |
| |
| var axTarget5 = accessibilityController.accessibleElementById("target5"); |
| |
| var seq = []; |
| |
| section5.accessibleNode.addEventListener("accessibleclick", function() { |
| seq.push("AOM capture SECTION"); |
| }, true); |
| section5.accessibleNode.addEventListener("accessibleclick", function() { |
| seq.push("AOM bubble SECTION"); |
| }, false); |
| section5.addEventListener("click", function() { |
| seq.push("DOM capture SECTION"); |
| }, true); |
| section5.addEventListener("click", function() { |
| seq.push("DOM bubble SECTION"); |
| }, false); |
| ul5.accessibleNode.addEventListener("accessibleclick", function() { |
| seq.push("AOM capture UL"); |
| }, true); |
| ul5.accessibleNode.addEventListener("accessibleclick", function() { |
| seq.push("AOM bubble UL"); |
| }, false); |
| li5.accessibleNode.addEventListener("accessibleclick", function() { |
| seq.push("AOM capture LI"); |
| }, true); |
| li5.accessibleNode.addEventListener("accessibleclick", function() { |
| seq.push("AOM bubble LI"); |
| }, false); |
| target5.accessibleNode.addEventListener("accessibleclick", function() { |
| seq.push("AOM main event listener BUTTON"); |
| }, false); |
| target5.addEventListener("click", function() { |
| seq.push("DOM main event listener BUTTON"); |
| }, false); |
| |
| axTarget5.press(); |
| |
| assert_equals(seq.join(", "), |
| "AOM capture SECTION, " + |
| "AOM capture UL, " + |
| "AOM capture LI, " + |
| "AOM main event listener BUTTON, " + |
| "AOM bubble LI, " + |
| "AOM bubble UL, " + |
| "AOM bubble SECTION, " + |
| "DOM capture SECTION, " + |
| "DOM main event listener BUTTON, " + |
| "DOM bubble SECTION"); |
| t.done(); |
| }); |
| }, "AOM event capturing and bubbling"); |
| </script> |
| |
| <ul id="ul6a" aria-owns="li6b"> |
| <li id="li6a">Item A</li> |
| </ul> |
| <ul id="ul6b"> |
| <li id="li6b">Item B</li> |
| </ul> |
| </section> |
| |
| <script> |
| async_test(function(t) { |
| enableAccessibilityEventsPermission().then(function() { |
| var ul6a = document.getElementById("ul6a"); |
| var ul6b = document.getElementById("ul6b"); |
| var li6b = document.getElementById("li6b"); |
| |
| var axLI6B = accessibilityController.accessibleElementById("li6b"); |
| |
| var ul6a_got_event = false; |
| var ul6b_got_event = false; |
| |
| ul6a.accessibleNode.addEventListener("accessibleclick", function() { |
| ul6a_got_event = true; |
| }, false); |
| ul6b.accessibleNode.addEventListener("accessibleclick", function() { |
| ul6b_got_event = true; |
| }, false); |
| |
| axLI6B.press(); |
| assert_true(ul6a_got_event); |
| assert_false(ul6b_got_event); |
| t.done(); |
| }); |
| }, "AOM event bubbling respects aria-owns over DOM parent chain"); |
| </script> |
| |
| <p id="container7" aria-label="Container7"></p> |
| |
| <script> |
| async_test(function(t) { |
| enableAccessibilityEventsPermission().then(function() { |
| var container7 = document.getElementById("container7"); |
| var axContainer7 = accessibilityController.accessibleElementById( |
| "container7"); |
| |
| var virtualNode = new AccessibleNode(); |
| virtualNode.role = "button"; |
| virtualNode.label = "Button7"; |
| container7.accessibleNode.appendChild(virtualNode); |
| var axVirtualNode = axContainer7.childAtIndex(0); |
| |
| var success = false; |
| virtualNode.onaccessibleclick = function() { |
| success = true; |
| }; |
| axVirtualNode.press(); |
| |
| assert_true(success); |
| t.done(); |
| }); |
| }, "AccessibleNode.onaccessibleclick on virtual node"); |
| </script> |