canvas-fallback-content.html | Explore in Territory

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) => {

    // 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", "AXRole: AXComboBoxSelect");
    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", "AXRole: AXComboBoxSelect", 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>
chromium/third_party/blink/web_tests/accessibility/canvas-fallback-content.html
