2018-01-18 17:26:23 +00:00
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
< html >
< head >
< script src = "../resources/js-test-pre.js" > < / script >
< script src = "../resources/accessibility-helper.js" > < / script >
< / head >
< body id = "body" >
<!-- Example 1: controls a list -->
< input type = "text" role = "combobox" id = "combobox1" aria-controls = "list1" aria-label = "Combobox1" >
< div role = "list" id = "list1" aria-label = "List1" >
< div role = "listitem" id = "item1_1" > item1< / div >
< div role = "listitem" id = "item1_2" > item2< / div >
< / div >
<!-- Example 2: owns a listbox -->
< input type = "text" role = "combobox" id = "combobox2" aria-owns = "listbox2" aria-label = "Combobox2" >
< div role = "listbox" id = "listbox2" aria-label = "Listbox2" >
< div role = "option" id = "option2_1" > item1< / div >
< div role = "option" id = "option2_2" > item2< / div >
< / div >
<!-- Example 3: owns a grid -->
< input type = "text" role = "combobox" id = "combobox3" aria-owns = "grid3" aria-label = "Combobox3" >
< div role = "grid" id = "grid3" aria-label = "Grid3" >
< div role = "row" id = "row3_1" >
< div role = "gridcell" id = "gridcell3_1" > cell1< / div >
< / div >
< / div >
<!-- Example 3: owns a tree -->
< input type = "text" role = "combobox" id = "combobox4" aria-owns = "tree4" aria-label = "Combobox4" >
< div role = "tree" id = "tree4" aria-label = "Tree4" >
< div role = "treeitem" id = "treeitem4_1" > treeitem1< / div >
< div role = "treeitem" id = "treeitem4_2" > treeitem2< / div >
< / div >
< p id = "description" > < / p >
< div id = "console" > < / div >
< script >
description("This tests variations of the comboboxes and elements it can control and own. Then verifies the active-descendant is reflected correctly.");
if (window.accessibilityController) {
window.jsTestIsAsync = true;
var selectedChildrenChangeCount = 0;
window.accessibilityController.addNotificationListener(function (target, notification) {
if (notification == "AXSelectedChildrenChanged" || notification == "AXSelectedRowsChanged") {
selectedChildrenChangeCount++;
var targetString = platformValueForW3CName(target);
debug("Received " + notification + " for " + targetString);
}
});
// Example 1: aria-controls a list.
document.getElementById("combobox1").focus();
var list = accessibilityController.accessibleElementById("list1");
shouldBe("list.selectedChildrenCount", "0");
// Set active-descendant, verify notification is sent and that list has correct selected children.
document.getElementById("combobox1").setAttribute("aria-activedescendant", "item1_1");
var listitem1 = accessibilityController.accessibleElementById("item1_1");
2020-09-23 15:53:01 +00:00
setTimeout(async function() {
debug("list has " + list.selectedChildrenCount + " selected children");
debug(list.selectedChildAtIndex(0).isEqual(listitem1)
? "PASS list.selectedChildAtIndex(0) is listitem1"
: "FAIL list.selectedChildAtIndex(0) is not listitem1");
// Example 2: aria-owns a listbox.
document.getElementById("combobox2").focus();
var listbox = accessibilityController.accessibleElementById("listbox2");
debug("listbox has " + listbox.selectedChildrenCount + " selected children");
// Set active-descendant, verify notification is sent and that list has correct selected children.
document.getElementById("combobox2").setAttribute("aria-activedescendant", "option2_1");
var option2_1 = accessibilityController.accessibleElementById("option2_1");
await waitFor(() => {
return selectedChildrenChangeCount == 2 & & listbox.selectedChildrenCount;
});
debug("listbox has " + listbox.selectedChildrenCount + " selected children");
debug(listbox.selectedChildAtIndex(0).isEqual(option2_1)
? "PASS listbox.selectedChildAtIndex(0) is option2_1"
: "FAIL listbox.selectedChildAtIndex(0) is not option2_1");
// Example 3: aria-owns a grid.
document.getElementById("combobox3").focus();
var grid = accessibilityController.accessibleElementById("grid3");
debug("grid has " + grid.selectedChildrenCount + " selected children");
// Set active-descendant, verify notification is sent and that list has correct selected children.
document.getElementById("combobox3").setAttribute("aria-activedescendant", "row3_1");
var row3_1 = accessibilityController.accessibleElementById("row3_1");
await waitFor(() => {
return selectedChildrenChangeCount == 3 & & grid.selectedChildrenCount;
});
debug("grid has " + grid.selectedChildrenCount + " selected children");
debug(grid.selectedChildAtIndex(0).isEqual(row3_1)
? "PASS grid.selectedChildAtIndex(0) is row3_1"
: "FAIL grid.selectedChildAtIndex(0) is not row3_1");
// Example 4: aria-owns a tree.
document.getElementById("combobox4").focus();
var tree = accessibilityController.accessibleElementById("tree4");
debug("tree has " + tree.selectedChildrenCount + " selected children");
// Set active-descendant, verify notification is sent and that list has correct selected children.
document.getElementById("combobox4").setAttribute("aria-activedescendant", "treeitem4_1");
var treeitem4_1 = accessibilityController.accessibleElementById("treeitem4_1");
await waitFor(() => {
return selectedChildrenChangeCount == 4 & & tree.selectedChildrenCount;
});
debug("tree has " + tree.selectedChildrenCount + " selected children");
debug(tree.selectedChildAtIndex(0).isEqual(treeitem4_1)
? "PASS tree.selectedChildAtIndex(0) is treeitem4_1"
: "FAIL tree.selectedChildAtIndex(0) is not treeitem4_1");
accessibilityController.removeNotificationListener();
finishJSTest();
}, 0);
2018-01-18 17:26:23 +00:00
}
< / script >
< script src = "../resources/js-test-post.js" > < / script >
< / body >
< / html >