108 lines
5.9 KiB
HTML
108 lines
5.9 KiB
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 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>
|