166 lines
4.9 KiB
HTML
166 lines
4.9 KiB
HTML
<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;
|
|
|
|
aria.focus();
|
|
var ariaRole = accessibilityController.focusedElement.role;
|
|
|
|
real.focus();
|
|
var realRole = accessibilityController.focusedElement.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 tabindex="0" 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 tabindex="0" 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 tabindex="0" 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 tabindex="0" 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 tabindex="0" 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 tabindex="0" 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 tabindex="0" role="img" alt="Hello" id="ariaImage">X</span></p>
|
|
<p>Actual image:</p>
|
|
<img src="resources/cake.png" alt="Giant cupcake" tabindex="0" 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 tabindex="0" role="list" id="ariaList"><span role="listitem">X</span></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/>
|
|
|
|
</body>
|
|
</html>
|