third_party/WebKit/LayoutTests/accessibility/clickable.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4 <script src="../resources/js-test.js"></script>
   5
   6 <div id="wrapper">
   7   <a id="link" href="#">Link</a>
   8   <button id="button">Button</button>
   9   <button id="labeled-button" aria-label="Label">Button</button>
  10   <button id="button-with-title" title="Title">Button</button>
  11   <input id="text" type="text" value="Value">
  12   <input id="checkbox" type="checkbox" checked>
  13   <input id="number" type="number" value="23">
  14   <input id="radio" type="radio" checked>
  15   <input id="slider" type="range" min="" max="0" value="5">
  16   <input id="submit" type="submit">
  17   <select id="combobox"><option><option selected>2</select>
  18   <select multiple id="listbox"><option><option selected>2</select>
  19   <textarea id="textarea">Textarea</textarea>
  20   <div id="focusable" tabindex="0">Focusable</div>
  21   <h5 id="heading" tabindex="0">Heading</h5>
  22   <div id="aria-button" tabindex="0" role="button">ARIA button</div>
  23   <div id="aria-link" tabindex="0" role="link">ARIA link</div>
  24   <div id="div">Div</div>
  25   <div id="onclick" onclick="foo()">Onclick</div>
  26   <div id="keydown-listener">Key down listener</div>
  27   <div id="click-listener">Click listener</div>
  28   <div id="mousedown-listener">Mouse down listener</div>
  29   <div>
  30     <a id="empty-anchor" tabindex=0>Empty anchor</a>
  31     <a id="href-anchor" href="#">Anchor with href</a>
  32     <a id="onclick-anchor" onclick="foo()">Anchor with onclick</a>
  33     <a id="click-listener-anchor">Anchor with click listener</a>
  34   </div>
  35   <script>
  36     document.getElementById('keydown-listener').addEventListener('keydown', function() {}, false);
  37     document.getElementById('click-listener').addEventListener('click', function() {}, false);
  38     document.getElementById('mousedown-listener').addEventListener('mousedown', function() {}, false);
  39     document.getElementById('click-listener-anchor').addEventListener('click', function() {}, false);
  40   </script>
  41 </div>
  42
  43 <div id="console"></div>
  44 <script>
  45 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.");
  46
  47 if (window.testRunner && window.accessibilityController) {
  48     window.testRunner.dumpAsText();
  49
  50     function isAXElementClickable(id) {
  51         return accessibilityController.accessibleElementById(id).isClickable;
  52     }
  53
  54     function axRole(id) {
  55         return accessibilityController.accessibleElementById(id).role;
  56     }
  57
  58     shouldBe("isAXElementClickable('link')", "true");
  59     shouldBe("isAXElementClickable('button')", "true");
  60     shouldBe("isAXElementClickable('labeled-button')", "true");
  61     shouldBe("isAXElementClickable('button-with-title')", "true");
  62     shouldBe("isAXElementClickable('text')", "true");
  63     shouldBe("isAXElementClickable('checkbox')", "true");
  64     shouldBe("isAXElementClickable('number')", "true");
  65     shouldBe("isAXElementClickable('radio')", "true");
  66     shouldBe("isAXElementClickable('slider')", "false");
  67     shouldBe("isAXElementClickable('submit')", "true");
  68     shouldBe("isAXElementClickable('combobox')", "true");
  69     shouldBe("isAXElementClickable('listbox')", "false");  // The items are clickable, not the listbox.
  70     shouldBe("isAXElementClickable('textarea')", "true");
  71     shouldBe("isAXElementClickable('focusable')", "false");
  72     shouldBe("isAXElementClickable('heading')", "false");
  73     shouldBe("isAXElementClickable('aria-button')", "true");
  74     shouldBe("isAXElementClickable('aria-link')", "true");
  75     shouldBe("isAXElementClickable('div')", "false");
  76     shouldBe("isAXElementClickable('onclick')", "true");
  77     shouldBe("isAXElementClickable('keydown-listener')", "false");
  78     shouldBe("isAXElementClickable('click-listener')", "true");
  79     shouldBe("isAXElementClickable('mousedown-listener')", "true");
  80
  81     shouldBe("axRole('empty-anchor')", "'AXRole: AXUnknown'");
  82     shouldBe("axRole('href-anchor')", "'AXRole: AXLink'");
  83     shouldBe("axRole('onclick-anchor')", "'AXRole: AXLink'");
  84     shouldBe("axRole('click-listener-anchor')", "'AXRole: AXLink'");
  85
  86     document.getElementById("wrapper").hidden = true;
  87 }
  88
  89 </script>
  90
  91 </body>
  92 </html>