| pc<!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.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> |
| function check(id, expectedRole) { |
| console.log('Checking for ' + expectedRole + ' at #' + id); |
| var axElement = accessibilityController.accessibleElementById(id); |
| assert_true(Boolean(axElement)); |
| assert_equals(axElement.role, expectedRole, id); |
| var element = document.getElementById(id); |
| // TODO(crbug.com/930327): focus() triggers a lifecycle update without updating observers. |
| // Make sure to get the axElement before calling focus(), to trigger a full update cycle. |
| element.focus(); |
| assert_equals(document.activeElement, element); |
| assert_equals(axElement.role, expectedRole, id); |
| } |
| |
| test((t) => { |
| var comboBoxRole = (testRunner.platformName == "gtk" || testRunner.platformName == "efl") ? "AXRole: AXComboBox" : "AXRole: AXPopUpButton"; |
| |
| // 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: AXGenericContainer"); |
| 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", t); |
| check("combobox2", comboBoxRole, t); |
| check("focusable2", "AXRole: AXGenericContainer", t); |
| check("aria-button2", "AXRole: AXButton", t); |
| check("aria-link2", "AXRole: AXLink", t); |
| |
| // Check that the role is updated when the element changes. |
| document.getElementById('focusable1').setAttribute('role', 'button'); |
| document.getElementById('focusable2').setAttribute('role', 'button'); |
| // Role changes do not take effect immediately. |
| requestAnimationFrame(() => { |
| check("focusable1", "AXRole: AXButton", t); |
| check("focusable2", "AXRole: AXButton", t,); |
| }); |
| }, "This test makes sure that focusable elements in canvas fallback content are accessible."); |
| |
| |
| </script> |
| |
| </body> |
| </html> |
