| <!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 ARIA should win --> |
| <input type="checkbox" aria-required="false" required id="checkbox_required_ariarequiredfalse" data-expectedrequired="false"> |
| <input type="checkbox" aria-required="true" id="checkbox_requiredfalse_ariarequiredtrue" data-expectedrequired="true"> |
| |
| |
| <!-- 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 ARIA should win --> |
| <select aria-required="false" required id="select_required_ariarequiredfalse" data-expectedrequired="false"><option>test</option></select> |
| <select aria-required="true" id="select_requiredfalse_ariarequiredtrue" data-expectedrequired="true"><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 ARIA should win --> |
| <textarea aria-required="false" required id="textarea_required_ariarequiredfalse" data-expectedrequired="false"></textarea> |
| <textarea aria-required="true" id="textarea_requiredfalse_ariarequiredtrue" data-expectedrequired="true"></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> |
