clickable.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<body>
<script src="../resources/js-test.js"></script>

<div id="wrapper">
  <a id="link" href="#">Link</a>
  <button id="button">Button</button>
  <button id="labeled-button" aria-label="Label">Button</button>
  <button id="button-with-title" title="Title">Button</button>
  <div id="switch" role="switch" onclick="function() {}">Switch</div>
  <details><summary id="disclosure-triangle">Summary</summary>Details</details>
  <input id="text" type="text" value="Value">
  <input id="search-box" role="searchbox" type="text" value="Value">
  <input id="checkbox" type="checkbox" checked>
  <input id="number" type="number" value="23">
  <input id="radio" type="radio" checked>
  <input id="slider" type="range" min="" max="0" value="5">
  <input id="submit" type="submit">
  <input id="combobox" role="combobox" type="text" value="Value">
  <select id="listbox-single"><option><option selected>2</select>
  <select multiple id="listbox-multiple"><option><option selected>2</select>
  <textarea id="textarea">Textarea</textarea>
  <div id="content-editable" contenteditable="true">Content editable</div>
  <div id="focusable" tabindex="0">Focusable</div>
  <h5 id="heading" tabindex="0">Heading</h5>
  <div id="aria-button" tabindex="0" role="button" onclick="function() {}">ARIA button</div>
  <div id="aria-link" tabindex="0" role="link" onclick="function() {}">ARIA link</div>
  <div id="div">Div</div>
  <div id="onclick" onclick="foo()">Onclick</div>
  <div id="keydown-listener">Key down listener</div>
  <div id="click-listener">Click listener</div>
  <div id="mousedown-listener">Mouse down listener</div>
  <div id="ancestor-with-click-listener" onclick="function() {}">
    <div id="click-listener-on-ancestor">Click listener on ancestor</div>
  </div>
  <div>
    <a id="empty-anchor" tabindex=0>Empty anchor</a>
    <a id="href-anchor" href="#">Anchor with href</a>
    <a id="onclick-anchor" onclick="foo()">Anchor with onclick</a>
    <a id="click-listener-anchor">Anchor with click listener</a>
  </div>
  <script>
    document.getElementById('keydown-listener').addEventListener('keydown', function() {}, false);
    document.getElementById('click-listener').addEventListener('click', function() {}, false);
    document.getElementById('mousedown-listener').addEventListener('mousedown', function() {}, false);
    document.getElementById('ancestor-with-click-listener').addEventListener('click', function() {}, false);
    document.getElementById('click-listener-anchor').addEventListener('click', function() {}, false);
  </script>
</div>

<div id="console"></div>
<script>
description("This tests the clickable property of various elements, and tests that a role of an anchor element changes to link when it has a click listener.");

if (window.testRunner && window.accessibilityController) {
    testRunner.dumpAsText();

    function isAXElementClickable(id) {
        return accessibilityController.accessibleElementById(id).isClickable;
    }

    function axRole(id) {
        return accessibilityController.accessibleElementById(id).role;
    }

    shouldBe("isAXElementClickable('link')", "true");
    shouldBe("isAXElementClickable('button')", "true");
    shouldBe("isAXElementClickable('labeled-button')", "true");
    shouldBe("isAXElementClickable('button-with-title')", "true");
    shouldBe("isAXElementClickable('switch')", "true");
    shouldBe("isAXElementClickable('disclosure-triangle')", "true");
    shouldBe("isAXElementClickable('text')", "true");
    shouldBe("isAXElementClickable('search-box')", "true");
    shouldBe("isAXElementClickable('checkbox')", "true");
    shouldBe("isAXElementClickable('number')", "true");
    shouldBe("isAXElementClickable('radio')", "true");
    shouldBe("isAXElementClickable('slider')", "false");
    shouldBe("isAXElementClickable('submit')", "true");
    shouldBe("isAXElementClickable('combobox')", "true");
    shouldBe("isAXElementClickable('listbox-single')", "true");
    shouldBe("isAXElementClickable('listbox-multiple')", "true");
    shouldBe("isAXElementClickable('textarea')", "true");
    shouldBe("isAXElementClickable('content-editable')", "true");
    shouldBe("isAXElementClickable('focusable')", "false");
    shouldBe("isAXElementClickable('heading')", "false");
    shouldBe("isAXElementClickable('aria-button')", "true");
    shouldBe("isAXElementClickable('aria-link')", "true");
    shouldBe("isAXElementClickable('div')", "false");
    shouldBe("isAXElementClickable('onclick')", "true");
    shouldBe("isAXElementClickable('keydown-listener')", "false");
    shouldBe("isAXElementClickable('click-listener')", "true");
    shouldBe("isAXElementClickable('mousedown-listener')", "true");
    shouldBe("isAXElementClickable('click-listener-on-ancestor')", "false");

    shouldBe("axRole('ancestor-with-click-listener')", "'AXRole: AXGenericContainer'");
    shouldBe("axRole('empty-anchor')", "'AXRole: AXGenericContainer'");
    shouldBe("axRole('href-anchor')", "'AXRole: AXLink'");
    shouldBe("axRole('onclick-anchor')", "'AXRole: AXLink'");
    shouldBe("axRole('click-listener-anchor')", "'AXRole: AXLink'");

    document.getElementById("wrapper").hidden = true;
}

</script>

</body>
</html>
chromium/third_party/blink/web_tests/accessibility/clickable.html
