access-key-for-all-elements.html | Explore in Territory

<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/element_names.js"></script>

<fieldset id='declared-focusable-elements'>
  <!--  begin setup for <rp> element -->
    <rp style="display: block">(</rp>
  <!--  end of setup for <rp> element -->

  <!--  begin setup for <area> element -->
    <img usemap="#testMap">
    <map name="testMap">
      <area>test</area>
    </map>
  <!-- end of setup for <area> element -->

  <!--  begin setup for <audio> element -->
    <audio controls>
  <!-- end of setup for <audio> element -->
<fieldset>

<script>
const modifiers = /\bMac OS X\b/.test(navigator.userAgent) ? ["ctrlKey", "altKey"] : ["altKey"];

function pressKey(key) {
  eventSender.keyDown(key, modifiers);
}

const nonFocusableTagNames = ['base', 'basefont', 'body', 'datalist', 'dialog', 'embed', 'head', 'link', 'meta', 'noembed', 'noframes', 'noscript', 'param', 'script', 'style', 'template', 'title'];
const skipTagNames = ['input', 'legend', 'optgroup', 'option', 'select', 'textarea'];
const old_and_new_elements = [...HTML5_ELEMENTS, ...HTML5_DEPRECATED_ELEMENTS];
const focusableTagNames = old_and_new_elements.filter(x => !nonFocusableTagNames.includes(x) && !skipTagNames.includes(x));

function testPressAccessKeyOnElement(element) {
  var clicked = false;
  element.onclick = () => { clicked = true; }
  var focused = false;
  element.onfocus = () => { focused = true; }

  pressKey(element.accessKey);
  const isFocusable = focusableTagNames.includes(element.tagName.toLowerCase());
  assert_true(clicked, `Pressing access key on a ${!isFocusable ? "non-" : ""}focusable element should ${!isFocusable ? "not" : ""} trigger click handler.`);
  assert_equals(focused, isFocusable, `Pressing access key on a ${!isFocusable ? "non-" : ""}focusable element should ${!isFocusable ? "not" : ""} focus on the element.`);
}

focusableTagNames.concat(nonFocusableTagNames).forEach((name) => {
  test(() => {
    const declaredElementsContainer = document.getElementById('declared-focusable-elements');
    let element = declaredElementsContainer.getElementsByTagName(name)[0];
    if (!element) {
      element = document.createElement(name);
      document.body.appendChild(element);
    }
    element.tabIndex = 0;
    assert_not_equals(element.accessKey, undefined);
    element.accessKey = "k";
    assert_equals(element.accessKey, "k");
    testPressAccessKeyOnElement(element);
    element.remove();
  }, "Check for " + name + " tag");
});
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/access-key-for-all-elements.html
