aom-click-action.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/accessibility/aom-click-action.html
