LayoutTests/accessibility/aria-hidden-false-works-in-subtrees.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
 <script src="../resources/js-test.js"></script>
 <script src="../resources/accessibility-helper.js"></script>
 </head>
 <body>

 <div id="content" role="group">

 <div hidden aria-hidden="false" aria-label="group0">
    <div aria-hidden="true" aria-label="group1">
       ignore me
    </div>
    <div aria-hidden="false" role="group" aria-label="group2">
      <div aria-hidden="false" role="button" aria-label="button1">button</div>
      don't ignore me
   </div>
 </div>

 <!-- The text node should be visible because it inherits from the parent -->
 <div id="group3" hidden aria-hidden="false">
 text3
 </div>

 <!-- The text node should be visible because it inherits from the parent, and all parents need aria-hidden=false -->
 <div id="group4" hidden aria-hidden="false">
   <div role="group" hidden aria-hidden="false">
     text4
   </div>
 </div>

 <!-- The text node should NOT be visible because it inherits from the parent, and all parents need aria-hidden=false -->
 <div id="group5" role="group">
   <div hidden>
     <div role="group" hidden aria-hidden="false">
       text5
     </div>
   </div>
 </div>

 <!-- The button inside should NOT be visible because it is not marked as aria-hidden -->
 <div id="group6" hidden aria-hidden="false">
   <div aria-hidden="false">
      <button>button</button>
   </div>
 </div>

 <!-- The button inside should be visible because it is marked as aria-hidden and all its parents are too -->
 <div id="group7" hidden aria-hidden="false">
   <div aria-hidden="false">
      <button aria-hidden="false">button</button>
   </div>
 </div>

 <div id="iframe">
 <iframe onload="testiFrameContent();" aria-hidden="false" src="resources/cake.png">hidden content</iframe>
 </div>

 </div>

 <script>
     description("This tests that a sub-tree within a node marked with aria-hidden=false will be exposed in the AX tree.");

     function testiFrameContent() {
         setTimeout(async () => {
             // Test that aria-hidden=false does NOT expose iframe fallback text.
             let iframe = accessibilityController.accessibleElementById("iframe").childAtIndex(0).childAtIndex(0);

             debug("Non-rendered iframe content should not be visible when aria-hidden=true. The first child should be a group and NOT static text.");
             let iframeChild = null;
             await waitFor(() => {
                 return iframeChild = iframe.childAtIndex(0);
             });
             debug("iFrame child role: " + iframeChild.role);

             document.getElementById("content").style.visibility = "hidden";
             finishJSTest();
         }, 0);
     }

     function dumpAccessibilityChildren(element, level) {
         if (!element) {
             return;
         }
         var indent = "";
         for (var k = 0; k < level; k++) { indent += "  "; }
         debug(indent + element.role + "\n" + indent + platformValueForW3CName(element, true) + "\n");
         var childrenCount = element.childrenCount;
         for (var k = 0; k < childrenCount; k++) {
             dumpAccessibilityChildren(element.childAtIndex(k), level+1);
         }
     }

     if (window.accessibilityController) {
         window.jsTestIsAsync = true;

         setTimeout(async () => {
             let root = accessibilityController.accessibleElementById("content").childAtIndex(0);
             dumpAccessibilityChildren(root, 0);

             // Text inside aria-hidden=false inherits from parent.
             window.object = null;
             if (accessibilityController.platformName == "atspi") {
                 object = accessibilityController.accessibleElementById("group3");
                 shouldBe("object.role", "'AXRole: AXSection'");
             } else {
                 object = accessibilityController.accessibleElementById("group3").childAtIndex(0);
                 shouldBe("object.role", "'AXRole: AXStaticText'");
             }
             window.stringValue = object.stringValue.replace(/\n/g, '');
             shouldBe("stringValue", "'AXValue: text3'");

             // Text inside nested aria-hidden=false inherits from parent.
             if (accessibilityController.platformName == "atspi") {
                 object = accessibilityController.accessibleElementById("group4").childAtIndex(0);
                 shouldBe("object.role", "'AXRole: AXGroup'");
             } else {
                 object = accessibilityController.accessibleElementById("group4").childAtIndex(0).childAtIndex(0);
                 shouldBe("object.role", "'AXRole: AXStaticText'");
             }
             stringValue = object.stringValue.replace(/\n/g, '');
             if (accessibilityController.platformName == "atspi")
                 shouldBe("stringValue", "'AXValue: text4'");
             else
                 shouldBe("stringValue", "'AXValue:     text4  '");

             // When not all the parents have aria-hidden=false, element should not be visible.
             object = accessibilityController.accessibleElementById("group5").childAtIndex(0);
             shouldBeTrue("!object || !object.isValid");

             // Objects that don't have aria-hidden=false are not visible when the parents have that attribute.
             object = accessibilityController.accessibleElementById("group6").childAtIndex(0);
             if (accessibilityController.platformName == "atspi")
                 shouldBe("object.role", "'AXRole: AXSection'");
             else
                 shouldBe("object.role", "'AXRole: AXGroup'");
             shouldBe("object.childrenCount", "0");

             // When all objects have aria-hidden=false, then the elements are visible.
             object = accessibilityController.accessibleElementById("group7").childAtIndex(0);
             if (accessibilityController.platformName == "atspi")
                 shouldBe("object.role", "'AXRole: AXSection'");
             else
                 shouldBe("object.role", "'AXRole: AXGroup'");
             shouldBe("object.childrenCount", "1");
             shouldBe("object.childAtIndex(0).role", "'AXRole: AXButton'");
         }, 0);
     }
 </script>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<script src="../resources/js-test.js"></script>
	<script src="../resources/accessibility-helper.js"></script>
	</head>
	<body>

	<div id="content" role="group">

	<div hidden aria-hidden="false" aria-label="group0">
	<div aria-hidden="true" aria-label="group1">
	ignore me
	</div>
	<div aria-hidden="false" role="group" aria-label="group2">
	<div aria-hidden="false" role="button" aria-label="button1">button</div>
	don't ignore me
	</div>
	</div>

	<!-- The text node should be visible because it inherits from the parent -->
	<div id="group3" hidden aria-hidden="false">
	text3
	</div>

	<!-- The text node should be visible because it inherits from the parent, and all parents need aria-hidden=false -->
	<div id="group4" hidden aria-hidden="false">
	<div role="group" hidden aria-hidden="false">
	text4
	</div>
	</div>

	<!-- The text node should NOT be visible because it inherits from the parent, and all parents need aria-hidden=false -->
	<div id="group5" role="group">
	<div hidden>
	<div role="group" hidden aria-hidden="false">
	text5
	</div>
	</div>
	</div>

	<!-- The button inside should NOT be visible because it is not marked as aria-hidden -->
	<div id="group6" hidden aria-hidden="false">
	<div aria-hidden="false">
	<button>button</button>
	</div>
	</div>

	<!-- The button inside should be visible because it is marked as aria-hidden and all its parents are too -->
	<div id="group7" hidden aria-hidden="false">
	<div aria-hidden="false">
	<button aria-hidden="false">button</button>
	</div>
	</div>

	<div id="iframe">
	<iframe onload="testiFrameContent();" aria-hidden="false" src="resources/cake.png">hidden content</iframe>
	</div>

	</div>

	<script>
	description("This tests that a sub-tree within a node marked with aria-hidden=false will be exposed in the AX tree.");

	function testiFrameContent() {
	setTimeout(async () => {
	// Test that aria-hidden=false does NOT expose iframe fallback text.
	let iframe = accessibilityController.accessibleElementById("iframe").childAtIndex(0).childAtIndex(0);

	debug("Non-rendered iframe content should not be visible when aria-hidden=true. The first child should be a group and NOT static text.");
	let iframeChild = null;
	await waitFor(() => {
	return iframeChild = iframe.childAtIndex(0);
	});
	debug("iFrame child role: " + iframeChild.role);

	document.getElementById("content").style.visibility = "hidden";
	finishJSTest();
	}, 0);
	}

	function dumpAccessibilityChildren(element, level) {
	if (!element) {
	return;
	}
	var indent = "";
	for (var k = 0; k < level; k++) { indent += " "; }
	debug(indent + element.role + "\n" + indent + platformValueForW3CName(element, true) + "\n");
	var childrenCount = element.childrenCount;
	for (var k = 0; k < childrenCount; k++) {
	dumpAccessibilityChildren(element.childAtIndex(k), level+1);
	}
	}

	if (window.accessibilityController) {
	window.jsTestIsAsync = true;

	setTimeout(async () => {
	let root = accessibilityController.accessibleElementById("content").childAtIndex(0);
	dumpAccessibilityChildren(root, 0);

	// Text inside aria-hidden=false inherits from parent.
	window.object = null;
	if (accessibilityController.platformName == "atspi") {
	object = accessibilityController.accessibleElementById("group3");
	shouldBe("object.role", "'AXRole: AXSection'");
	} else {
	object = accessibilityController.accessibleElementById("group3").childAtIndex(0);
	shouldBe("object.role", "'AXRole: AXStaticText'");
	}
	window.stringValue = object.stringValue.replace(/\n/g, '');
	shouldBe("stringValue", "'AXValue: text3'");

	// Text inside nested aria-hidden=false inherits from parent.
	if (accessibilityController.platformName == "atspi") {
	object = accessibilityController.accessibleElementById("group4").childAtIndex(0);
	shouldBe("object.role", "'AXRole: AXGroup'");
	} else {
	object = accessibilityController.accessibleElementById("group4").childAtIndex(0).childAtIndex(0);
	shouldBe("object.role", "'AXRole: AXStaticText'");
	}
	stringValue = object.stringValue.replace(/\n/g, '');
	if (accessibilityController.platformName == "atspi")
	shouldBe("stringValue", "'AXValue: text4'");
	else
	shouldBe("stringValue", "'AXValue: text4 '");

	// When not all the parents have aria-hidden=false, element should not be visible.
	object = accessibilityController.accessibleElementById("group5").childAtIndex(0);
	shouldBeTrue("!object \|\| !object.isValid");

	// Objects that don't have aria-hidden=false are not visible when the parents have that attribute.
	object = accessibilityController.accessibleElementById("group6").childAtIndex(0);
	if (accessibilityController.platformName == "atspi")
	shouldBe("object.role", "'AXRole: AXSection'");
	else
	shouldBe("object.role", "'AXRole: AXGroup'");
	shouldBe("object.childrenCount", "0");

	// When all objects have aria-hidden=false, then the elements are visible.
	object = accessibilityController.accessibleElementById("group7").childAtIndex(0);
	if (accessibilityController.platformName == "atspi")
	shouldBe("object.role", "'AXRole: AXSection'");
	else
	shouldBe("object.role", "'AXRole: AXGroup'");
	shouldBe("object.childrenCount", "1");
	shouldBe("object.childAtIndex(0).role", "'AXRole: AXButton'");
	}, 0);
	}
	</script>
	</body>
	</html>