blob: fb33992e19e3b622e57570892d562011cf0d3cd0 [file] [log] [blame]
<!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>