| <html> |
| <head> |
| <title>ARIA roles simple tests</title> |
| <style> |
| .newRole { |
| border: 2px solid blue; |
| background-color: lightblue; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function validateRole(aria, real, result) { |
| if (!window.accessibilityController) |
| return; |
| |
| var axElement = accessibilityController.accessibleElementById(aria.id); |
| if (!axElement) { |
| result.innerText = "ERROR: could not retrieve element " + aria.id; |
| return; |
| } |
| var ariaRole = axElement.role; |
| |
| axElement = accessibilityController.accessibleElementById(real.id); |
| if (!axElement) { |
| result.innerText = "ERROR: could not retrieve element " + real.id; |
| return; |
| } |
| var realRole = axElement.role; |
| |
| if (ariaRole == realRole) |
| result.innerText = "This test PASSES in DumpRenderTree. The role is " + ariaRole; |
| else |
| result.innerText = "This test FAILS in DumpRenderTree. The ARIA role is " + ariaRole + ", but the real role is " |
| + realRole; |
| } |
| </script> |
| |
| <!--Checkbox--> |
| <div class="newRole"> |
| <p>The following should be a checkbox:</p> |
| <p><span role="checkbox" id="ariaCheckBox">X</span></p> |
| <p>Actual checkboxes:</p> |
| <form> |
| <input type="checkbox" name="broccoli" id="realCheckBox">Broccoli<br> |
| <input type="checkbox" name="asparagus">Asparagus<br> |
| </form> |
| <span id="resultCheckBox"></span> |
| <script> |
| validateRole(document.getElementById('ariaCheckBox'), |
| document.getElementById('realCheckBox'), |
| document.getElementById('resultCheckBox')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--Button--> |
| <div class="newRole"> |
| <p>The following should be a button:</p> |
| <p><span role="button" id="ariaButton">X</span></p> |
| <p>Actual button:</p> |
| <button id="realButton">Hello</button> |
| <span id="resultButton"></span> |
| <script> |
| validateRole(document.getElementById('ariaButton'), |
| document.getElementById('realButton'), |
| document.getElementById('resultButton')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--Heading--> |
| <div class="newRole"> |
| <p>The following should be a heading:</p> |
| <p><span role="heading" id="ariaHeading">X</span></p> |
| <p>Actual heading:</p> |
| <h1 id="realHeading">Hello</h1> |
| <span id="resultHeading"></span> |
| <script> |
| validateRole(document.getElementById('ariaHeading'), |
| document.getElementById('realHeading'), |
| document.getElementById('resultHeading')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--Link--> |
| <div class="newRole"> |
| <p>The following should be a link:</p> |
| <p><span role="link" id="ariaLink">X</span></p> |
| <p>Actual link:</p> |
| <a href="/" id="realLink">Hello</a> |
| <span id="resultLink"></span> |
| <script> |
| validateRole(document.getElementById('ariaLink'), |
| document.getElementById('realLink'), |
| document.getElementById('resultLink')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--Radio--> |
| <div class="newRole"> |
| <p>The following should be a radio button:</p> |
| <p><span role="radio" id="ariaRadio">X</span></p> |
| <p>Actual radio buttons:</p> |
| <form> |
| <input type="radio" name="broccoli" id="realRadio">Broccoli<br> |
| <input type="radio" name="asparagus">Asparagus<br> |
| </form> |
| <span id="resultRadio"></span> |
| <script> |
| validateRole(document.getElementById('ariaRadio'), |
| document.getElementById('realRadio'), |
| document.getElementById('resultRadio')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--Textbox--> |
| <div class="newRole"> |
| <p>The following should be a text box:</p> |
| <p><span role="textbox" id="ariaTextBox">X</span></p> |
| <p>Actual text box:</p> |
| <input type="text" id="realTextBox"></input> |
| <span id="resultTextBox"></span> |
| <script> |
| validateRole(document.getElementById('ariaTextBox'), |
| document.getElementById('realTextBox'), |
| document.getElementById('resultTextBox')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--Image--> |
| <div class="newRole"> |
| <p>The following should be an image:</p> |
| <p><span role="img" alt="Hello" id="ariaImage">X</span></p> |
| <p>Actual image:</p> |
| <img src="resources/cake.png" alt="Giant cupcake" id="realImage"></img> |
| <span id="resultImage"></span> |
| <script> |
| validateRole(document.getElementById('ariaImage'), |
| document.getElementById('realImage'), |
| document.getElementById('resultImage')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--List--> |
| <div class="newRole"> |
| <p>The following should be a list:</p> |
| <p><span role="list" id="ariaList">X</span></p> |
| <p>Actual list:</p> |
| <ul id="realList"> |
| <li>Broccoli</li> |
| <li>Beets</li> |
| </ul> |
| <span id="resultList"></span> |
| <script> |
| validateRole(document.getElementById('ariaList'), |
| document.getElementById('realList'), |
| document.getElementById('resultList')); |
| </script> |
| </div> |
| <br/> |
| |
| <!--Dialog --> |
| <div class="newRole"> |
| <p>The following should be a dialog:</p> |
| <p><span role="dialog" id="ariaDialog">X</span></p> |
| <p>Actual dialog:</p> |
| <dialog id="realDialog" open>Hello.</dialog> |
| <span id="resultDialog"></dialog> |
| <script> |
| validateRole(document.getElementById('ariaDialog'), |
| document.getElementById('realDialog'), |
| document.getElementById('resultDialog')); |
| </script> |
| </div> |
| |
| </body> |
| </html> |
