<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>
Codebase Browser
chromium