LayoutTests/accessibility/aria-required.html - WebKit - Git at Google

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

 <div id="toBeHidden">


   <!-- textfields -->
   <input type="text" id="textfield" data-expectedrequired="false">
   <input type="text" id="textfield_required" required data-expectedrequired="true">
   <input type="text" required aria-required="true" id="textfield_required_ariarequired" data-expectedrequired="true">
   <input type="text" aria-required="false" id="textfield_ariarequiredfalse" data-expectedrequired="false">
   <!-- these last ones conflict with implicit value of @required, so host language attr should win -->
   <input type="text" aria-required="textfield_required_ariarequiredfalse" required id="textfield5" data-expectedrequired="true">
   <!-- BLOCKED by http://webkit.org/b/119988
   <input type="text" aria-required="true" id="textfield_requiredfalse_ariarequiredtrue" data-expectedrequired="false">
   -->


   <!-- checkboxes -->
   <input type="checkbox" id="checkbox" data-expectedrequired="false">
   <input type="checkbox" id="checkbox_required" required data-expectedrequired="true">
   <input type="checkbox" required aria-required="true" id="checkbox_required_ariarequired" data-expectedrequired="true">
   <input type="checkbox" aria-required="false" id="checkbox_ariarequiredfalse" data-expectedrequired="false">
   <!-- these last ones conflict with implicit value of @required, so host language attr should win -->
   <input type="checkbox" aria-required="false" required id="checkbox_required_ariarequiredfalse" data-expectedrequired="true">
   <!-- BLOCKED by http://webkit.org/b/119988
   <input type="checkbox" aria-required="true" id="checkbox_requiredfalse_ariarequiredtrue" data-expectedrequired="false">
   -->


   <!-- select -->
   <select id="select" data-expectedrequired="false"><option>test</option></select>
   <select id="select_required" required data-expectedrequired="true"><option>test</option></select>
   <select required aria-required="true" id="select_required_ariarequired" data-expectedrequired="true"><option>test</option></select>
   <select aria-required="false" id="select_ariarequiredfalse" data-expectedrequired="false"><option>test</option></select>
   <!-- these last ones conflict with implicit value of @required, so host language attr should win -->
   <select aria-required="false" required id="select_required_ariarequiredfalse" data-expectedrequired="true"><option>test</option></select>
   <!-- BLOCKED by http://webkit.org/b/119988
   <select aria-required="true" id="select_requiredfalse_ariarequiredtrue" data-expectedrequired="false"><option>test</option></select>
   -->


   <!-- textarea -->
   <textarea id="textarea" data-expectedrequired="false"></textarea>
   <textarea id="textarea_required" required data-expectedrequired="true"></textarea>
   <textarea required aria-required="true" id="textarea_required_ariarequired" data-expectedrequired="true"></textarea>
   <textarea aria-required="false" id="textarea_ariarequiredfalse" data-expectedrequired="false"></textarea>
   <!-- these last ones conflict with implicit value of @required, so host language attr should win -->
   <textarea aria-required="false" required id="textarea_required_ariarequiredfalse" data-expectedrequired="true"></textarea>
   <!-- BLOCKED by http://webkit.org/b/119988
   <textarea aria-required="true" id="textarea_requiredfalse_ariarequiredtrue" data-expectedrequired="false"></textarea>
   -->


   <!-- Custom ARIA controls (@required is not allowed on these elements, so no conflict resolution needed.) -->
   <div tabindex="0" aria-required="true" role="listbox" id="listbox_ariarequiredtrue" data-expectedrequired="true">text</div>
   <div tabindex="0" aria-required="false" role="listbox" id="listbox_ariarequiredfalse" data-expectedrequired="false">text</div>
   <div tabindex="0" role="listbox" id="listbox" data-expectedrequired="false">text</div>

   <div tabindex="0" aria-required="true" role="radiogroup" id="radiogroup_ariarequiredtrue" data-expectedrequired="true">text</div>
   <div tabindex="0" aria-required="false" role="radiogroup" id="radiogroup_ariarequiredfalse" data-expectedrequired="false">text</div>
   <div tabindex="0" role="radiogroup" id="radiogroup" data-expectedrequired="false">text</div>

   <div tabindex="0" aria-required="true" role="spinbutton" id="spinbutton_ariarequiredtrue" data-expectedrequired="true">text</div>
   <div tabindex="0" aria-required="false" role="spinbutton" id="spinbutton_ariarequiredfalse" data-expectedrequired="false">text</div>
   <div tabindex="0" role="spinbutton" id="spinbutton" data-expectedrequired="false">text</div>

   <div tabindex="0" aria-required="true" role="tree" id="tree_ariarequiredtrue" data-expectedrequired="true">text</div>
   <div tabindex="0" aria-required="false" role="tree" id="tree_ariarequiredfalse" data-expectedrequired="false">text</div>
   <div tabindex="0" role="tree" id="tree" data-expectedrequired="false">text</div>

 </div>

 <p id="description"></p>
 <div id="console"></div>

 <script>

     description("This tests that aria-required is a usable attribute.");

     if (window.accessibilityController) {

         var result = document.getElementById('console');
         var elements = document.querySelectorAll('[data-expectedrequired]');
         result.innerText += "Elements to test: " + elements.length + "\n\n";

         for (var i = 0, c = elements.length; i < c; i++) {
             var el = elements[i];
             var id = el.id;
             var axElement = accessibilityController.accessibleElementById(id);
             var isRequired = axElement.isRequired;

             // Test whether elementis required.
             var passed = el.dataset.expectedrequired === isRequired.toString();
             var output = (passed ? "PASS" : "FAIL") + " " + id + " isRequired is " + isRequired;
             if (!passed)
                 output += ", expected " + el.dataset.expectedrequired;
             result.innerText += output + "\n";
         }

     }

     document.getElementById('toBeHidden').hidden = true; // hide this to avoid text diffs when adding more elements to the test

 </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>
	</head>
	<body id="body">

	<div id="toBeHidden">


	<!-- textfields -->
	<input type="text" id="textfield" data-expectedrequired="false">
	<input type="text" id="textfield_required" required data-expectedrequired="true">
	<input type="text" required aria-required="true" id="textfield_required_ariarequired" data-expectedrequired="true">
	<input type="text" aria-required="false" id="textfield_ariarequiredfalse" data-expectedrequired="false">
	<!-- these last ones conflict with implicit value of @required, so host language attr should win -->
	<input type="text" aria-required="textfield_required_ariarequiredfalse" required id="textfield5" data-expectedrequired="true">
	<!-- BLOCKED by http://webkit.org/b/119988
	<input type="text" aria-required="true" id="textfield_requiredfalse_ariarequiredtrue" data-expectedrequired="false">
	-->


	<!-- checkboxes -->
	<input type="checkbox" id="checkbox" data-expectedrequired="false">
	<input type="checkbox" id="checkbox_required" required data-expectedrequired="true">
	<input type="checkbox" required aria-required="true" id="checkbox_required_ariarequired" data-expectedrequired="true">
	<input type="checkbox" aria-required="false" id="checkbox_ariarequiredfalse" data-expectedrequired="false">
	<!-- these last ones conflict with implicit value of @required, so host language attr should win -->
	<input type="checkbox" aria-required="false" required id="checkbox_required_ariarequiredfalse" data-expectedrequired="true">
	<!-- BLOCKED by http://webkit.org/b/119988
	<input type="checkbox" aria-required="true" id="checkbox_requiredfalse_ariarequiredtrue" data-expectedrequired="false">
	-->


	<!-- select -->
	<select id="select" data-expectedrequired="false"><option>test</option></select>
	<select id="select_required" required data-expectedrequired="true"><option>test</option></select>
	<select required aria-required="true" id="select_required_ariarequired" data-expectedrequired="true"><option>test</option></select>
	<select aria-required="false" id="select_ariarequiredfalse" data-expectedrequired="false"><option>test</option></select>
	<!-- these last ones conflict with implicit value of @required, so host language attr should win -->
	<select aria-required="false" required id="select_required_ariarequiredfalse" data-expectedrequired="true"><option>test</option></select>
	<!-- BLOCKED by http://webkit.org/b/119988
	<select aria-required="true" id="select_requiredfalse_ariarequiredtrue" data-expectedrequired="false"><option>test</option></select>
	-->


	<!-- textarea -->
	<textarea id="textarea" data-expectedrequired="false"></textarea>
	<textarea id="textarea_required" required data-expectedrequired="true"></textarea>
	<textarea required aria-required="true" id="textarea_required_ariarequired" data-expectedrequired="true"></textarea>
	<textarea aria-required="false" id="textarea_ariarequiredfalse" data-expectedrequired="false"></textarea>
	<!-- these last ones conflict with implicit value of @required, so host language attr should win -->
	<textarea aria-required="false" required id="textarea_required_ariarequiredfalse" data-expectedrequired="true"></textarea>
	<!-- BLOCKED by http://webkit.org/b/119988
	<textarea aria-required="true" id="textarea_requiredfalse_ariarequiredtrue" data-expectedrequired="false"></textarea>
	-->


	<!-- Custom ARIA controls (@required is not allowed on these elements, so no conflict resolution needed.) -->
	<div tabindex="0" aria-required="true" role="listbox" id="listbox_ariarequiredtrue" data-expectedrequired="true">text</div>
	<div tabindex="0" aria-required="false" role="listbox" id="listbox_ariarequiredfalse" data-expectedrequired="false">text</div>
	<div tabindex="0" role="listbox" id="listbox" data-expectedrequired="false">text</div>

	<div tabindex="0" aria-required="true" role="radiogroup" id="radiogroup_ariarequiredtrue" data-expectedrequired="true">text</div>
	<div tabindex="0" aria-required="false" role="radiogroup" id="radiogroup_ariarequiredfalse" data-expectedrequired="false">text</div>
	<div tabindex="0" role="radiogroup" id="radiogroup" data-expectedrequired="false">text</div>

	<div tabindex="0" aria-required="true" role="spinbutton" id="spinbutton_ariarequiredtrue" data-expectedrequired="true">text</div>
	<div tabindex="0" aria-required="false" role="spinbutton" id="spinbutton_ariarequiredfalse" data-expectedrequired="false">text</div>
	<div tabindex="0" role="spinbutton" id="spinbutton" data-expectedrequired="false">text</div>

	<div tabindex="0" aria-required="true" role="tree" id="tree_ariarequiredtrue" data-expectedrequired="true">text</div>
	<div tabindex="0" aria-required="false" role="tree" id="tree_ariarequiredfalse" data-expectedrequired="false">text</div>
	<div tabindex="0" role="tree" id="tree" data-expectedrequired="false">text</div>

	</div>

	<p id="description"></p>
	<div id="console"></div>

	<script>

	description("This tests that aria-required is a usable attribute.");

	if (window.accessibilityController) {

	var result = document.getElementById('console');
	var elements = document.querySelectorAll('[data-expectedrequired]');
	result.innerText += "Elements to test: " + elements.length + "\n\n";

	for (var i = 0, c = elements.length; i < c; i++) {
	var el = elements[i];
	var id = el.id;
	var axElement = accessibilityController.accessibleElementById(id);
	var isRequired = axElement.isRequired;

	// Test whether elementis required.
	var passed = el.dataset.expectedrequired === isRequired.toString();
	var output = (passed ? "PASS" : "FAIL") + " " + id + " isRequired is " + isRequired;
	if (!passed)
	output += ", expected " + el.dataset.expectedrequired;
	result.innerText += output + "\n";
	}

	}

	document.getElementById('toBeHidden').hidden = true; // hide this to avoid text diffs when adding more elements to the test

	</script>

	<script src="../resources/js-test-post.js"></script>
	</body>
	</html>