<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div class="container" id="container1" role="group" aria-label="Container">
<div id="heading1" role="heading" aria-owns="menu1">heading</div>
<div id="menu1" role="menu">menu</div>
</div>
<script>
test(function(t) {
// No problem with using aria-owns to put a menu inside a heading.
var axHeading1 = accessibilityController.accessibleElementById("heading1");
assert_equals(axHeading1.name, "heading");
var axContainer1 = accessibilityController.accessibleElementById("container1");
assert_equals(axContainer1.childrenCount, 1);
assert_equals(axContainer1.childAtIndex(0).role, "AXRole: AXHeading");
}, "Aria-owns should re-parent a target when the source role allows children.");
</script>
<div class="container" id="container2" role="group" aria-label="Container">
<div id="image2" role="img" aria-owns="menu2">image</div>
<div id="menu2" role="menu">menu</div>
</div>
<script>
test(function(t)
{
// An image can't have children, so we should ignore aria-owns.
var axImage2 = accessibilityController.accessibleElementById("image2");
var axContainer2 = accessibilityController.accessibleElementById("container2");
assert_equals(axContainer2.childrenCount, 2);
assert_equals(axContainer2.childAtIndex(0).role, "AXRole: AXImage");
assert_equals(axContainer2.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't move an element if the role doesn't allow children.");
</script>
<style>
input, textarea {
display: block;
}
</style>
<div class="container" id="container3" role="group" aria-label="Container">
<input id="textfield3" aria-owns="menu3" aria-label="textfield">
<div id="menu3" role="menu">menu</div>
</div>
<script>
test(function(t)
{
var axTextfield3 = accessibilityController.accessibleElementById("textfield3");
assert_equals(axTextfield3.name, "textfield");
var axContainer3 = accessibilityController.accessibleElementById("container3");
assert_equals(axContainer3.childrenCount, 2);
assert_equals(axContainer3.childAtIndex(0).role, "AXRole: AXTextField");
// An input element naturally gets 1 child that corresponds to the anonymous
// inner editor element.
assert_equals(axContainer3.childAtIndex(0).childrenCount, 1);
assert_equals(axContainer3.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't create extra children of an input element.");
</script>
<div class="container" id="container4" role="group" aria-label="Container">
<textarea id="textfield4" aria-owns="menu4" aria-label="textfield">
</textarea>
<div id="menu4" role="menu">menu</div>
</div>
<script>
test(function(t)
{
var axTextfield4 = accessibilityController.accessibleElementById("textfield4");
assert_equals(axTextfield4.name, "textfield");
var axContainer4 = accessibilityController.accessibleElementById("container4");
assert_equals(axContainer4.childrenCount, 2);
assert_equals(axContainer4.childAtIndex(0).role, "AXRole: AXTextField");
assert_equals(axContainer4.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't create children of a textarea element.");
</script>
<div class="container" id="container5" role="group" aria-label="Container">
<div id="textfield5" aria-owns="menu5" aria-label="textfield"
contentEditable="true">
</div>
<div id="menu5" role="menu">menu</div>
</div>
<script>
test(function(t)
{
var axTextfield5 = accessibilityController.accessibleElementById("textfield5");
assert_equals(axTextfield5.name, "textfield");
var axContainer5 = accessibilityController.accessibleElementById("container5");
assert_equals(axContainer5.childrenCount, 2);
assert_equals(axContainer5.childAtIndex(0).role, "AXRole: AXGenericContainer");
assert_equals(axContainer5.childAtIndex(0).childrenCount, 0);
assert_equals(axContainer5.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't create children of a contenteditable element.");
</script>
Codebase Browser
chromium