<!DOCTYPE HTML>
<html>
<body>
<script src="../resources/js-test.js"></script>
<div>
<a id="link1" href="#">Link</a>
<button id="button1">Button</button>
A<input id="text1" type="text" value="Value">
B<input id="text-readonly1" type="text" value="Value" readonly>
C<input id="text-readonly2" type="text" value="Value" readonly aria-readonly="false">
D<input id="checkbox1" type="checkbox" checked>
E<input id="number1" type="number" value="123">
F<input id="radio1" type="radio" checked>
G<input id="slider1" type="range" min="1" max="10" value="5">
H<input id="submit1" type="submit">
I<select id="combobox1"><option>1<option selected>2</select>
J<select multiple id="listbox1"><option>1<option selected>2</select>
K<textarea id="textarea1">Textarea</textarea>
L<textarea id="textarea-readonly1" readonly>Textarea</textarea>
M<textarea id="textarea-readonly2" readonly aria-readonly="false">Textarea</textarea>
N<div id="focusable1" tabindex="0">Focusable</div>
<h5 id="heading1" tabindex="0">Heading</h5>
<div id="div1" tabindex="0" aria-readonly="true">Plain div can't be readonly</div>
<div id="aria-button1" tabindex="0" role="button" aria-readonly="false">ARIA button</div>
<div id="aria-togglebutton1" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div>
<div id="aria-link1" tabindex="0" role="link">ARIA link</div>
<div id="aria-slider1" tabindex="0" role="slider" aria-readonly="true">ARIA slider</div>
<div id="aria-progress1" tabindex="0" role="progressbar" aria-readonly="true">ARIA progress meter</div>
<div id="aria-textbox1" tabindex="0" role="textbox" aria-readonly="true">ARIA textbox</div>
<div id="contenteditable_root1" contentEditable>
<button id="contenteditable_button1">Button</button>
</div>
<div id="contenteditable_root-readonly1" contentEditable aria-readonly="true">
</div>
<div id="contenteditable_root-readonly2" role="textbox" contentEditable aria-readonly="true">
</div>
<div id="contenteditable_root-readonly3" tabindex="0" role="textbox" contentEditable="false" aria-readonly="true">
</div>
</div>
<div id="console"></div>
<script>
description("This tests which elements expose themselves as readonly. Readonly here refers to whether the item is not editable, not whether a control value can be changed vs if it's unavailable.");
if (window.testRunner && window.accessibilityController) {
testRunner.dumpAsText();
function check(id, expected_readonly) {
debug(id);
window.element = document.getElementById(id);
element.focus();
shouldBe("document.activeElement == element", "true");
window.axElement = accessibilityController.focusedElement;
shouldBe("axElement.isReadOnly", "" + expected_readonly);
debug("");
}
check("link1", false);
check("button1", false);
check("text1", false);
check("text-readonly1", true);
check("text-readonly2", true);
check("checkbox1", false);
check("number1", false);
check("radio1", false);
check("slider1", false);
check("submit1", false);
check("combobox1", false);
check("listbox1", false);
check("textarea1", false);
check("textarea-readonly1", true);
check("textarea-readonly2", true);
check("focusable1", false);
check("heading1", false);
check("div1", false);
check("aria-button1", false);
check("aria-togglebutton1", false);
check("aria-link1", false);
check("aria-slider1", true);
check("aria-progress1", false);
check("aria-textbox1", true);
check("contenteditable_root1", false);
check("contenteditable_button1", false);
// This is correct according to ARIA spec, as aria-readonly is supported
// on specific roles only -- it is not a universal ARIA property.
check("contenteditable_root-readonly1", false);
// This is correct according to HTML-AAM, the readonly state is ignored if
// the element is set to contenteditable and readonly="true",
check("contenteditable_root-readonly2", false);
check("contenteditable_root-readonly3", true);
}
</script>
</body>
</html>
Codebase Browser
chromium