170 lines
5.1 KiB
HTML
170 lines
5.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<script src="../resources/js-test-pre.js"></script>
|
|
<script src="../resources/accessibility-helper.js"></script>
|
|
|
|
<style>
|
|
myelement {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div>
|
|
<a id="link1" href="#">Link</a>
|
|
<button id="button1">Button</button>
|
|
<input id="text1" type="text">
|
|
<input id="checkbox1" type="checkbox">
|
|
<input id="radio1" type="radio">
|
|
<input id="submit1" type="submit">
|
|
<select id="combobox1"><option>1<option>2</select>
|
|
<myelement id="focusable1" tabindex="0">Focusable</myelement>
|
|
<div id="aria-button1" tabindex="0" role="button">ARIA button</div>
|
|
<div id="aria-link1" tabindex="0" role="link">ARIA link</div>
|
|
</div>
|
|
|
|
<canvas id="myCanvas" width="300" height="300">
|
|
<a id="link2" href="#">Link</a>
|
|
<button id="button2">Button</button>
|
|
<input id="text2" type="text">
|
|
<input id="checkbox2" type="checkbox">
|
|
<input id="radio2" type="radio">
|
|
<input id="submit2" type="submit">
|
|
<select id="combobox2"><option>1<option>2</select>
|
|
<myelement id="focusable2" tabindex="0">Focusable</myelement>
|
|
<div id="aria-button2" tabindex="0" role="button">ARIA button</div>
|
|
<div id="aria-link2" tabindex="0" role="link">ARIA link</div>
|
|
</canvas>
|
|
|
|
<div id="console"></div>
|
|
|
|
<script>
|
|
description("This test makes sure that focusable elements in canvas fallback content are accessible.");
|
|
|
|
if (window.testRunner && window.accessibilityController) {
|
|
window.jsTestIsAsync = true;
|
|
window.testRunner.dumpAsText();
|
|
|
|
var comboBoxRole = platformRoleForComboBox(accessibilityController.platformName);
|
|
|
|
function check(id, expectedRole) {
|
|
window.element = document.getElementById(id);
|
|
element.focus();
|
|
|
|
window.axElement = accessibilityController.focusedElement;
|
|
if (axElement.role == expectedRole) {
|
|
// Do all the logging here and return true.
|
|
debug(id);
|
|
shouldBe("document.activeElement == element", "true");
|
|
shouldBe("axElement.role", "\"" + expectedRole + "\"");
|
|
debug("");
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
setTimeout(async function() {
|
|
// Check rendered controls.
|
|
await waitFor(() => {
|
|
return check("link1", "AXRole: AXLink");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("button1", "AXRole: AXButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("text1", "AXRole: AXTextField");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("checkbox1", "AXRole: AXCheckBox");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("radio1", "AXRole: AXRadioButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("submit1", "AXRole: AXButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("combobox1", comboBoxRole);
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("focusable1", "AXRole: AXGroup");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("aria-button1", "AXRole: AXButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("aria-link1", "AXRole: AXLink");
|
|
});
|
|
|
|
// Check unrendered controls inside a canvas.
|
|
await waitFor(() => {
|
|
return check("link2", "AXRole: AXLink");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("button2", "AXRole: AXButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("text2", "AXRole: AXTextField");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("checkbox2", "AXRole: AXCheckBox");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("radio2", "AXRole: AXRadioButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("submit2", "AXRole: AXButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("combobox2", comboBoxRole);
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("focusable2", "AXRole: AXGroup");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("aria-button2", "AXRole: AXButton");
|
|
});
|
|
|
|
await waitFor(() => {
|
|
return check("aria-link2", "AXRole: AXLink");
|
|
});
|
|
|
|
// Check that the role is updated when the element changes.
|
|
document.getElementById('focusable1').setAttribute('role', 'button');
|
|
await waitFor(() => {
|
|
return check("focusable1", "AXRole: AXButton");
|
|
});
|
|
|
|
document.getElementById('focusable2').setAttribute('role', 'button');
|
|
await waitFor(() => {
|
|
return check("focusable2", "AXRole: AXButton");
|
|
});
|
|
|
|
finishJSTest();
|
|
}, 0);
|
|
}
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|