| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../resources/js-test-pre.js"></script> |
| <script src="../resources/accessibility-helper.js"></script> |
| <style> |
| myelement { |
| display: block; |
| } |
| </style> |
| |
| <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(); |
| |
| function check(id, expectedRole) { |
| debug(id); |
| window.element = document.getElementById(id); |
| element.focus(); |
| shouldBe("document.activeElement == element", "true"); |
| window.axElement = accessibilityController.focusedElement; |
| shouldBe("axElement.role", "\"" + expectedRole + "\""); |
| debug(""); |
| } |
| |
| var comboBoxRole = platformRoleForComboBox(accessibilityController.platformName); |
| |
| // Check rendered controls. |
| check("link1", "AXRole: AXLink"); |
| check("button1", "AXRole: AXButton"); |
| check("text1", "AXRole: AXTextField"); |
| check("checkbox1", "AXRole: AXCheckBox"); |
| check("radio1", "AXRole: AXRadioButton"); |
| check("submit1", "AXRole: AXButton"); |
| check("combobox1", comboBoxRole); |
| check("focusable1", "AXRole: AXGroup"); |
| check("aria-button1", "AXRole: AXButton"); |
| check("aria-link1", "AXRole: AXLink"); |
| |
| // Check unrendered controls inside a canvas. |
| check("link2", "AXRole: AXLink"); |
| check("button2", "AXRole: AXButton"); |
| check("text2", "AXRole: AXTextField"); |
| check("checkbox2", "AXRole: AXCheckBox"); |
| check("radio2", "AXRole: AXRadioButton"); |
| check("submit2", "AXRole: AXButton"); |
| check("combobox2", comboBoxRole); |
| check("focusable2", "AXRole: AXGroup"); |
| check("aria-button2", "AXRole: AXButton"); |
| check("aria-link2", "AXRole: AXLink"); |
| |
| // Check that the role is updated when the element changes. |
| document.getElementById('focusable1').setAttribute('role', 'button'); |
| setTimeout(function() { |
| check("focusable1", "AXRole: AXButton"); |
| }, 1); |
| |
| document.getElementById('focusable2').setAttribute('role', 'button'); |
| setTimeout(function() { |
| check("focusable2", "AXRole: AXButton"); |
| finishJSTest(); |
| }, 1); |
| } |
| |
| </script> |
| |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
