LayoutTests/accessibility/aria-roles.html

   1 <html>
   2 <head>
   3 <title>ARIA roles simple tests</title>
   4 <style>
   5     .newRole {
   6         border: 2px solid blue;
   7         background-color: lightblue;
   8     }
   9 </style>
  10 </head>
  11
  12 <body>
  13 <script>
  14     if (window.testRunner)
  15         testRunner.dumpAsText();
  16
  17     function validateRole(aria, real, result) {
  18         if (!window.accessibilityController)
  19             return;
  20
  21         aria.focus();
  22         var ariaRole = accessibilityController.focusedElement.role;
  23
  24         real.focus();
  25         var realRole = accessibilityController.focusedElement.role;
  26
  27         if (ariaRole == realRole)
  28             result.innerText = "This test PASSES in DumpRenderTree. The role is " + ariaRole;
  29         else
  30             result.innerText = "This test FAILS in DumpRenderTree. The ARIA role is " + ariaRole + ", but the real role is "
  31                 + realRole;
  32     }
  33 </script>
  34
  35   <!--Checkbox-->
  36   <div class="newRole">
  37     <p>The following should be a checkbox:</p>
  38     <p><span tabindex="0" role="checkbox" id="ariaCheckBox">X</span></p>
  39     <p>Actual checkboxes:</p>
  40     <form>
  41         <input type="checkbox" name="broccoli" id="realCheckBox">Broccoli<br>
  42         <input type="checkbox" name="asparagus">Asparagus<br>
  43     </form>
  44     <span id="resultCheckBox"></span>
  45     <script>
  46         validateRole(document.getElementById('ariaCheckBox'),
  47             document.getElementById('realCheckBox'),
  48             document.getElementById('resultCheckBox'));
  49     </script>
  50   </div>
  51   <br/>
  52
  53   <!--Button-->
  54   <div class="newRole">
  55     <p>The following should be a button:</p>
  56     <p><span tabindex="0" role="button" id="ariaButton">X</span></p>
  57     <p>Actual button:</p>
  58     <button id="realButton">Hello</button>
  59     <span id="resultButton"></span>
  60     <script>
  61         validateRole(document.getElementById('ariaButton'),
  62             document.getElementById('realButton'),
  63             document.getElementById('resultButton'));
  64     </script>
  65   </div>
  66   <br/>
  67
  68   <!--Heading-->
  69   <div class="newRole">
  70     <p>The following should be a heading:</p>
  71     <p><span tabindex="0" role="heading" id="ariaHeading">X</span></p>
  72     <p>Actual heading:</p>
  73     <h1 id="realHeading">Hello</h1>
  74     <span id="resultHeading"></span>
  75     <script>
  76         validateRole(document.getElementById('ariaHeading'),
  77             document.getElementById('realHeading'),
  78             document.getElementById('resultHeading'));
  79     </script>
  80   </div>
  81   <br/>
  82
  83   <!--Link-->
  84   <div class="newRole">
  85     <p>The following should be a link:</p>
  86     <p><span tabindex="0" role="link" id="ariaLink">X</span></p>
  87     <p>Actual link:</p>
  88     <a href="/" id="realLink">Hello</a>
  89     <span id="resultLink"></span>
  90     <script>
  91         validateRole(document.getElementById('ariaLink'),
  92             document.getElementById('realLink'),
  93             document.getElementById('resultLink'));
  94     </script>
  95   </div>
  96   <br/>
  97
  98   <!--Radio-->
  99   <div class="newRole">
 100     <p>The following should be a radio button:</p>
 101     <p><span tabindex="0" role="radio" id="ariaRadio">X</span></p>
 102     <p>Actual radio buttons:</p>
 103     <form>
 104         <input type="radio" name="broccoli" id="realRadio">Broccoli<br>
 105         <input type="radio" name="asparagus">Asparagus<br>
 106     </form>
 107     <span id="resultRadio"></span>
 108     <script>
 109         validateRole(document.getElementById('ariaRadio'),
 110             document.getElementById('realRadio'),
 111             document.getElementById('resultRadio'));
 112     </script>
 113   </div>
 114   <br/>
 115
 116   <!--Textbox-->
 117   <div class="newRole">
 118     <p>The following should be a text box:</p>
 119     <p><span tabindex="0" role="textbox" id="ariaTextBox">X</span></p>
 120     <p>Actual text box:</p>
 121     <input type="text" id="realTextBox"></input>
 122     <span id="resultTextBox"></span>
 123     <script>
 124         validateRole(document.getElementById('ariaTextBox'),
 125             document.getElementById('realTextBox'),
 126             document.getElementById('resultTextBox'));
 127     </script>
 128   </div>
 129   <br/>
 130
 131   <!--Image-->
 132   <div class="newRole">
 133     <p>The following should be an image:</p>
 134     <p><span tabindex="0" role="img" alt="Hello" id="ariaImage">X</span></p>
 135     <p>Actual image:</p>
 136     <img src="resources/cake.png" alt="Giant cupcake" tabindex="0" id="realImage"></img>
 137     <span id="resultImage"></span>
 138     <script>
 139         validateRole(document.getElementById('ariaImage'),
 140             document.getElementById('realImage'),
 141             document.getElementById('resultImage'));
 142     </script>
 143   </div>
 144   <br/>
 145
 146   <!--List-->
 147   <div class="newRole">
 148     <p>The following should be a list:</p>
 149     <p><span tabindex="0" role="list" id="ariaList">X</span></p>
 150     <p>Actual list:</p>
 151     <ul id="realList">
 152         <li>Broccoli</li>
 153         <li>Beets</li>
 154     </ul>
 155     <span id="resultList"></span>
 156     <script>
 157         validateRole(document.getElementById('ariaList'),
 158             document.getElementById('realList'),
 159             document.getElementById('resultList'));
 160     </script>
 161   </div>
 162   <br/>
 163
 164  </body>
 165 </html>