3 <title>ARIA roles simple tests</title>
6 border: 2px solid blue;
7 background-color: lightblue;
14 if (window.testRunner)
15 testRunner.dumpAsText();
17 function validateRole(aria, real, result) {
18 if (!window.accessibilityController)
22 var ariaRole = accessibilityController.focusedElement.role;
25 var realRole = accessibilityController.focusedElement.role;
27 if (ariaRole == realRole)
28 result.innerText = "This test PASSES in DumpRenderTree. The role is " + ariaRole;
30 result.innerText = "This test FAILS in DumpRenderTree. The ARIA role is " + ariaRole + ", but the real role is "
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>
41 <input type="checkbox" name="broccoli" id="realCheckBox">Broccoli<br>
42 <input type="checkbox" name="asparagus">Asparagus<br>
44 <span id="resultCheckBox"></span>
46 validateRole(document.getElementById('ariaCheckBox'),
47 document.getElementById('realCheckBox'),
48 document.getElementById('resultCheckBox'));
55 <p>The following should be a button:</p>
56 <p><span tabindex="0" role="button" id="ariaButton">X</span></p>
58 <button id="realButton">Hello</button>
59 <span id="resultButton"></span>
61 validateRole(document.getElementById('ariaButton'),
62 document.getElementById('realButton'),
63 document.getElementById('resultButton'));
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>
76 validateRole(document.getElementById('ariaHeading'),
77 document.getElementById('realHeading'),
78 document.getElementById('resultHeading'));
85 <p>The following should be a link:</p>
86 <p><span tabindex="0" role="link" id="ariaLink">X</span></p>
88 <a href="/" id="realLink">Hello</a>
89 <span id="resultLink"></span>
91 validateRole(document.getElementById('ariaLink'),
92 document.getElementById('realLink'),
93 document.getElementById('resultLink'));
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>
104 <input type="radio" name="broccoli" id="realRadio">Broccoli<br>
105 <input type="radio" name="asparagus">Asparagus<br>
107 <span id="resultRadio"></span>
109 validateRole(document.getElementById('ariaRadio'),
110 document.getElementById('realRadio'),
111 document.getElementById('resultRadio'));
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>
124 validateRole(document.getElementById('ariaTextBox'),
125 document.getElementById('realTextBox'),
126 document.getElementById('resultTextBox'));
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>
136 <img src="resources/cake.png" alt="Giant cupcake" tabindex="0" id="realImage"></img>
137 <span id="resultImage"></span>
139 validateRole(document.getElementById('ariaImage'),
140 document.getElementById('realImage'),
141 document.getElementById('resultImage'));
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>
155 <span id="resultList"></span>
157 validateRole(document.getElementById('ariaList'),
158 document.getElementById('realList'),
159 document.getElementById('resultList'));