blob: 8526be5888993c02971c2e8f10deade1c08994c0 [file] [log] [blame]
<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
.hideAllContainers .container {
display: none;
}
</style>
<div class="container">
<h3 id="heading1">
Before
<p id="hidden1" aria-hidden="true">Hidden text</p>
After
</h3>
<button id="button1" aria-labelledby="hidden1"></button>
</div>
<script>
test(function(t) {
var axHeading1 = accessibilityController.accessibleElementById("heading1");
assert_equals(axHeading1.name, "Before After");
var axButton1 = accessibilityController.accessibleElementById("button1");
assert_equals(axButton1.name, "Hidden text");
}, "Aria-labelledby can get accessible text from aria-hidden subtree");
</script>
<div class="container">
<h3 id="heading2">
Before
<p id="hidden2" aria-hidden="true">Hidden text</p>
After
</h3>
<button id="button2" aria-labelledby="heading2"></button>
</div>
<script>
test(function(t) {
var axHeading2 = accessibilityController.accessibleElementById("heading2");
assert_equals(axHeading2.name, "Before After");
var axButton2 = accessibilityController.accessibleElementById("button2");
assert_equals(axButton2.name, "Before After");
}, "Aria-labelledby ignores accessible text that's aria-hidden inside subtree");
</script>
<div class="container">
<h3 id="heading3" aria-hidden="true">
Before
<p id="hidden3">Text within hidden subtree</p>
After
</h3>
<button id="button3" aria-labelledby="hidden3"></button>
</div>
<script>
test(function(t) {
var axHeading3 = accessibilityController.accessibleElementById("heading3");
assert_equals(axHeading3, undefined);
var axButton3 = accessibilityController.accessibleElementById("button3");
assert_equals(axButton3.name, "Text within hidden subtree");
}, "Aria-labelledby can get accessible text from within aria-hidden subtree");
</script>
<div class="container">
<h3 id="heading4" aria-hidden="true">
Before
<p id="hidden4" aria-hidden="true">Text within hidden subtree</p>
After
</h3>
<button id="button4" aria-labelledby="heading4"></button>
</div>
<script>
test(function(t) {
var axButton4 = accessibilityController.accessibleElementById("button4");
assert_equals(axButton4.name, "Before After");
}, "Aria-labelledby of aria-hidden subtree with another aria-hidden inside");
</script>
<div class="container">
<label for="input5" aria-hidden="true">
Before
<p aria-hidden="true">Hidden text</p>
After</label>
<input id="input5">
</div>
<script>
test(function(t) {
var axInput5 = accessibilityController.accessibleElementById("input5");
assert_equals(axInput5.name, "Before After");
}, "Label can get accessible text from aria-hidden subtree");
</script>
<script>
if (window.testRunner)
document.body.className = "hideAllContainers";
</script>