LayoutTests/accessibility/aria-combobox-control-owns-elements.html - WebKit - Git at Google

 <!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");
         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);
     }
 </script>
 <script src="../resources/js-test-post.js"></script>
 </body>
 </html>
	<!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");
	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);
	}
	</script>
	<script src="../resources/js-test-post.js"></script>
	</body>
	</html>