mirror of
https://github.com/servo/servo.git
synced 2025-08-12 17:05:33 +01:00
Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255
This commit is contained in:
parent
b2a5225831
commit
1a81b18b9f
12321 changed files with 544385 additions and 6 deletions
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>AT-SPI ONLY: option within listbox exposed as ROLE_MENU: option is exposed as ROLE_MENU_ITEM</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>AT-SPI ONLY: option within listbox exposed as ROLE_MENU: option is exposed as ROLE_MENU_ITEM</h1>
|
||||
<div role="combobox" aria-expanded="true" aria-label="Combobox for AT-SPI test of listbox/option mappings">
|
||||
<input type="text" value="combobox entry field">
|
||||
<div role="listbox" aria-label="Listbox child of combobox for AT-SPI test of listbox/option mappings">
|
||||
<p role="option" id="test">Test option</p>
|
||||
<p role="option">Another option</p>
|
||||
<p role="option">A third option</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE HTML><!-- HTML 5 -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>ARIA Tree Example</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<link rel="stylesheet" href="./css/treesimple.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/prototype.js"></script>
|
||||
<script type="text/javascript" src="./js/aria.js"></script>
|
||||
<script type="text/javascript" src="./js/init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Directions</h1>
|
||||
<ol>
|
||||
<li>Tab into the tree control.</li>
|
||||
<li>Use the up/down arrow keys to change the active descendant.</li>
|
||||
<li>Use the right/left arrow keys to expand/collapse appropriate nodes.</li>
|
||||
</ol>
|
||||
|
||||
<p>Some <a href="javascript:$('tree0').focus();">focusable</a> content before the ARIA application.</p>
|
||||
|
||||
<div role="application">
|
||||
<h1 id="treelabel">ARIA Tree Example</h1>
|
||||
<ul id="tree0" role="tree" aria-labelledby="treelabel" aria-activedescendant="tree0_item0_2_0_1" tabindex="0">
|
||||
<!-- all the ids and aria-* attributes are hardcoded here for sake of example (final version will use javascript to assign ids as needed) -->
|
||||
<li id="tree0_item0" role="treeitem" aria-level="1" aria-expanded="true">
|
||||
<!-- .expander becomes the javascript trigger for expand/collapse -->
|
||||
<span class="expander"></span>
|
||||
Animals
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li>
|
||||
<li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false">
|
||||
<span class="expander"></span>
|
||||
Cats
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_1_0" role="treeitem" aria-level="3">Siamese</li>
|
||||
<li id="tree0_item0_1_1" role="treeitem" aria-level="3">Tabby</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true">
|
||||
<span class="expander"></span>
|
||||
Dogs
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true">
|
||||
<span class="expander"></span>
|
||||
Small Breeds
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_0_0" role="treeitem" aria-level="4">Chihuahua</li>
|
||||
<li id="tree0_item0_2_0_1" role="treeitem" aria-level="4">Italian Greyhound</li>
|
||||
<li id="tree0_item0_2_0_2" role="treeitem" aria-level="4">Japanese Chin</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false">
|
||||
<span class="expander"></span>
|
||||
Medium Breeds
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_1_0" role="treeitem" aria-level="4">Beagle</li>
|
||||
<li id="tree0_item0_2_1_1" role="treeitem" aria-level="4">Cocker Spaniel</li>
|
||||
<li id="tree0_item0_2_1_2" role="treeitem" aria-level="4">Pit Bull</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false">
|
||||
<span class="expander"></span>
|
||||
Large Breeds
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_2_0" role="treeitem" aria-level="4">Afghan</li>
|
||||
<li id="tree0_item0_2_2_1" role="treeitem" aria-level="4">Great Dane</li>
|
||||
<li id="tree0_item0_2_2_2" role="treeitem" aria-level="4">Mastiff</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true">
|
||||
<span class="expander"></span>
|
||||
Minerals
|
||||
<ul role="group">
|
||||
<li id="tree0_item1_0" role="treeitem" aria-level="2">Zinc</li>
|
||||
<li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false">
|
||||
<span class="expander"></span>
|
||||
Gold
|
||||
<ul role="group">
|
||||
<li id="tree0_item1_1_0" role="treeitem" aria-level="3">Yellow Gold</li>
|
||||
<li id="tree0_item1_1_1" role="treeitem" aria-level="3">White Gold</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item1_2" role="treeitem" aria-level="2">Silver</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true">
|
||||
<span class="expander"></span>
|
||||
Vegetables
|
||||
<ul role="group">
|
||||
<li id="tree0_item2_0" role="treeitem" aria-level="2">Carrot</li>
|
||||
<li id="tree0_item2_1" role="treeitem" aria-level="2">Tomato</li>
|
||||
<li id="tree0_item2_2" role="treeitem" aria-level="2">Lettuce</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE HTML><!-- HTML 5 -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>ARIA Tree Example</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<link rel="stylesheet" href="./css/treebox.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/prototype.js"></script>
|
||||
<script type="text/javascript" src="./js/aria.js"></script>
|
||||
<script type="text/javascript" src="./js/init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Directions</h1>
|
||||
<ol>
|
||||
<li>Tab into the tree control.</li>
|
||||
<li>Use the up/down arrow keys to change the active descendant.</li>
|
||||
<li>Use the right/left arrow keys to expand/collapse appropriate nodes.</li>
|
||||
</ol>
|
||||
|
||||
<p>Some <a href="javascript:$('tree0').focus();">focusable</a> content before the ARIA application.</p>
|
||||
|
||||
<div role="application">
|
||||
<h1 id="treelabel">ARIA Tree Example</h1>
|
||||
<ul id="tree0" role="tree" aria-labelledby="treelabel" aria-activedescendant="tree0_item0_2_0_1" tabindex="0">
|
||||
<!-- all the ids and aria-* attributes are hardcoded here for sake of example (final version will use javascript to assign ids as needed) -->
|
||||
<li id="tree0_item0" role="treeitem" aria-level="1" aria-expanded="true">
|
||||
<!-- .expander becomes the javascript trigger for expand/collapse -->
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Animals
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li>
|
||||
<li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Cats
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_1_0" role="treeitem" aria-level="3"><span>Siamese</span></li>
|
||||
<li id="tree0_item0_1_1" role="treeitem" aria-level="3"><span>Tabby</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Dogs
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Small Breeds
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_0_0" role="treeitem" aria-level="4"><span>Chihuahua</span></li>
|
||||
<li id="tree0_item0_2_0_1" role="treeitem" aria-level="4"><span>Italian Greyhound</span></li>
|
||||
<li id="tree0_item0_2_0_2" role="treeitem" aria-level="4"><span>Japanese Chin</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Medium Breeds
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_1_0" role="treeitem" aria-level="4"><span>Beagle</span></li>
|
||||
<li id="tree0_item0_2_1_1" role="treeitem" aria-level="4"><span>Cocker Spaniel</span></li>
|
||||
<li id="tree0_item0_2_1_2" role="treeitem" aria-level="4"><span>Pit Bull</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Large Breeds
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item0_2_2_0" role="treeitem" aria-level="4"><span>Afghan</span></li>
|
||||
<li id="tree0_item0_2_2_1" role="treeitem" aria-level="4"><span>Great Dane</span></li>
|
||||
<li id="tree0_item0_2_2_2" role="treeitem" aria-level="4"><span>Mastiff</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Minerals
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item1_0" role="treeitem" aria-level="2"><span>Zinc</span></li>
|
||||
<li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Gold
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item1_1_0" role="treeitem" aria-level="3"><span>Yellow Gold</span></li>
|
||||
<li id="tree0_item1_1_1" role="treeitem" aria-level="3"><span>White Gold</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item1_2" role="treeitem" aria-level="2"><span>Silver</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true">
|
||||
<span>
|
||||
<span class="expander"></span>
|
||||
Vegetables
|
||||
</span>
|
||||
<ul role="group">
|
||||
<li id="tree0_item2_0" role="treeitem" aria-level="2"><span>Carrot</span></li>
|
||||
<li id="tree0_item2_1" role="treeitem" aria-level="2"><span>Tomato</span></li>
|
||||
<li id="tree0_item2_2" role="treeitem" aria-level="2"><span>Lettuce</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
Binary file not shown.
After Width: | Height: | Size: 80 B |
|
@ -0,0 +1,65 @@
|
|||
|
||||
/* variant of treesimple.css, that adds slightly more complex styling. */
|
||||
|
||||
html, body {
|
||||
color:#333;
|
||||
background-color:#fff;
|
||||
font-family:"helvetica neue", arial, helvetica, sans-serif;
|
||||
font-size:12px;
|
||||
line-height:1.4em;
|
||||
}
|
||||
h1{
|
||||
font-size:14px;
|
||||
}
|
||||
[role="tree"]{
|
||||
border:solid 1px #000;
|
||||
width:300px; /* hardcoded for example */
|
||||
cursor:default;
|
||||
}
|
||||
ul[role="tree"], [role="tree"] li, [role="tree"] ul {
|
||||
display:block;
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
li[role="treeitem"] {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
[role="treeitem"] > span{ display:block; }
|
||||
|
||||
/* looks kinda redundant, but is necessary to get the full left bleed on sub-level items */
|
||||
[role="treeitem"] > span{ padding-left:15px; }
|
||||
[role="treeitem"] [role="treeitem"] > span{ padding-left:30px; }
|
||||
[role="treeitem"] [role="treeitem"] [role="treeitem"] > span{ padding-left:45px; }
|
||||
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] > span{ padding-left:60px; }
|
||||
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] > span{ padding-left:75px; }
|
||||
|
||||
.expander {
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:2px;
|
||||
top:0.3em;
|
||||
width:9px;
|
||||
height:9px;
|
||||
background:transparent url(./img/expander.gif) -9px 0 no-repeat;
|
||||
}
|
||||
[aria-expanded="false"] > * > .expander {
|
||||
background-position:0 0;
|
||||
}
|
||||
[role="treeitem"] [role="treeitem"] .expander { left:17px; }
|
||||
[role="treeitem"] [role="treeitem"] [role="treeitem"] .expander { left:32px; }
|
||||
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] .expander { left:47px; }
|
||||
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] .expander { left:62px; }
|
||||
|
||||
|
||||
[aria-expanded="false"] [role="group"] {
|
||||
display:none;
|
||||
}
|
||||
[role="tree"] .activedescendant > span {
|
||||
background-color:#ccc;
|
||||
}
|
||||
[role="tree"]:focus .activedescendant > span {
|
||||
color:#fff;
|
||||
background-color:#03c;
|
||||
}
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
html, body {
|
||||
color:#333;
|
||||
background-color:#fff;
|
||||
font-family:"helvetica neue", arial, helvetica, sans-serif;
|
||||
font-size:12px;
|
||||
line-height:1.4em;
|
||||
}
|
||||
h1{
|
||||
font-size:14px;
|
||||
}
|
||||
[role="tree"]{
|
||||
cursor:default;
|
||||
}
|
||||
ul[role="tree"], [role="tree"] li, [role="tree"] ul {
|
||||
display:block;
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
li[role="treeitem"] {
|
||||
position:relative;
|
||||
padding-left:15px;
|
||||
}
|
||||
.expander {
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:2px;
|
||||
top:0.3em;
|
||||
width:9px;
|
||||
height:9px;
|
||||
background:transparent url(./img/expander.gif) -9px 0 no-repeat;
|
||||
}
|
||||
[aria-expanded="false"] > * > .expander {
|
||||
background-position:0 0;
|
||||
}
|
||||
[aria-expanded="false"] [role="group"] {
|
||||
display:none;
|
||||
}
|
||||
[role="tree"] .activedescendant {
|
||||
font-weight:bold;
|
||||
color:#000;
|
||||
}
|
||||
[role="tree"]:focus .activedescendant{
|
||||
color:#03c;
|
||||
}
|
||||
[role="tree"] .activedescendant [role="group"] {
|
||||
font-weight:normal;
|
||||
color:#000;
|
||||
}
|
|
@ -0,0 +1,160 @@
|
|||
|
||||
/* Aria Singleton */
|
||||
var Aria = {
|
||||
Trees: new Array(), // instances of Aria.Tree Class
|
||||
isEnabled: function(inNode){
|
||||
// todo: this may need to check isEnabled on all parentNodes, inheritence of aria-enabled is ambiguous
|
||||
if(inNode.getAttribute('aria-enabled') && inNode.getAttribute('aria-enabled').toLowerCase()=='false') return false;
|
||||
else return true;
|
||||
},
|
||||
isExpanded: function(inNode){
|
||||
if(inNode.getAttribute('aria-expanded') && inNode.getAttribute('aria-expanded').toLowerCase()=='false') return false;
|
||||
else return true;
|
||||
},
|
||||
isTreeItem: function(inNode){
|
||||
if(inNode.getAttribute('role') && inNode.getAttribute('role').toLowerCase()=='treeitem') return true;
|
||||
else return false;
|
||||
}
|
||||
};
|
||||
|
||||
Aria.Tree = Class.create();
|
||||
Aria.Tree.prototype = {
|
||||
initialize: function(inNode){
|
||||
if(!$(inNode) && console.error) console.error('Error from aria.js: Aria.Tree instance initialized with invalid element, '+ inNode);
|
||||
this.el = $(inNode);
|
||||
this.index = Aria.Trees.length; // each tree should know its index in the Aria singleton's list, in order to concatenate id strings
|
||||
this.strActiveDescendant = this.el.getAttribute('aria-activedescendant');
|
||||
this.strDefaultActiveDescendant = 'tree'+this.index+'_item0'; // default first item
|
||||
if(!$(this.strActiveDescendant)) this.strActiveDescendant = this.strDefaultActiveDescendant; // set to default if no existing activedescendant
|
||||
this.setActiveDescendant($(this.strActiveDescendant));
|
||||
|
||||
// set up event delegation on the tree node
|
||||
Event.observe(this.el, 'click', this.handleClick.bindAsEventListener(this));
|
||||
Event.observe(this.el, 'keydown', this.handleKeyPress.bindAsEventListener(this)); //webkit doesn't send keypress events for arrow keys, so use keydown instead
|
||||
|
||||
},
|
||||
getActiveDescendant: function(inNode){
|
||||
if(inNode){ // if inNode (from event target), sets the activedescendant to nearest ancestor treeitem
|
||||
var el = $(inNode);
|
||||
while(el != this.el){
|
||||
if(Aria.isTreeItem(el)) break; // exit the loop; we have the treeitem
|
||||
el = el.parentNode;
|
||||
}
|
||||
if(el == this.el) {
|
||||
this.setActiveDescendant(); // set to default activedescendant
|
||||
} else {
|
||||
this.setActiveDescendant(el);
|
||||
return el;
|
||||
}
|
||||
} else {
|
||||
return $(this.el.getAttribute('aria-activedescendant'));
|
||||
}
|
||||
},
|
||||
getNextTreeItem: function(inNode){
|
||||
var el = $(inNode);
|
||||
var originalElm = $(inNode);
|
||||
while(!Aria.isTreeItem(el) || el == originalElm){
|
||||
if(Aria.isExpanded(el) && el.down()){ // should be el.down('[role="treeitem"]');
|
||||
var elements = el.getElementsByTagName('*');
|
||||
for(var i=0, c=elements.length; i<c; i++){
|
||||
if(Aria.isTreeItem(elements[i])) return elements[i];
|
||||
}
|
||||
}
|
||||
if(el.next()){
|
||||
el = el.next();
|
||||
} else {
|
||||
while(!el.parentNode.next() && el.parentNode != this.el){
|
||||
el = el.parentNode;
|
||||
}
|
||||
if(el.parentNode == this.el) return originalElm; // if no next items in tree, return current treeitem
|
||||
else el = el.parentNode.next();
|
||||
}
|
||||
}
|
||||
return el;
|
||||
},
|
||||
getPreviousTreeItem: function(inNode){
|
||||
var el = $(inNode);
|
||||
var originalElm = $(inNode);
|
||||
while(!Aria.isTreeItem(el) || el == originalElm){
|
||||
if(el.previous()){
|
||||
el = el.previous();
|
||||
// recursively choose last child node of previous el, as long as it's not in an collapsed node
|
||||
if (el.down() && Aria.isExpanded(el)){
|
||||
el = el.down();
|
||||
while (el.next() || (el.down() && Aria.isExpanded(el))){
|
||||
if (el.next()) el = el.next();
|
||||
else el = el.down();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if(el.parentNode == this.el) return originalElm; // if no previous items in tree, return current treeitem
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
if(el == this.el) return originalElm; // if no previous items in tree, return current treeitem
|
||||
return el;
|
||||
},
|
||||
handleClick: function(inEvent){
|
||||
var target = inEvent.target; // get the click target
|
||||
var el = this.getActiveDescendant(target);
|
||||
if(target.className.indexOf('expander')>-1){ // if it's an expander widget
|
||||
this.toggleExpanded(el); // toggle the aria-expanded attribute on activedescendant
|
||||
Event.stop(inEvent); // and stop the event
|
||||
}
|
||||
},
|
||||
handleKeyPress: function(inEvent){
|
||||
switch(inEvent.keyCode){
|
||||
// case Event.KEY_PAGEUP: break;
|
||||
// case Event.KEY_PAGEDOWN: break;
|
||||
// case Event.KEY_END: break;
|
||||
// case Event.KEY_HOME: break;
|
||||
case Event.KEY_LEFT: this.keyLeft(); break;
|
||||
case Event.KEY_UP: this.keyUp(); break;
|
||||
case Event.KEY_RIGHT: this.keyRight(); break;
|
||||
case Event.KEY_DOWN: this.keyDown(); break;
|
||||
default:
|
||||
//console.log(inEvent.keyCode);
|
||||
return;
|
||||
}
|
||||
Event.stop(inEvent);
|
||||
},
|
||||
keyLeft: function(){
|
||||
var el = this.activeDescendant;
|
||||
if(Aria.isExpanded(el)){
|
||||
el.setAttribute('aria-expanded','false');
|
||||
this.setActiveDescendant(this.activeDescendant);
|
||||
}
|
||||
},
|
||||
keyUp: function(){
|
||||
var el = this.activeDescendant;
|
||||
this.setActiveDescendant(this.getPreviousTreeItem(el));
|
||||
},
|
||||
keyRight: function(){
|
||||
var el = this.activeDescendant;
|
||||
if(!Aria.isExpanded(el)){
|
||||
el.setAttribute('aria-expanded','true');
|
||||
this.setActiveDescendant(this.activeDescendant);
|
||||
}
|
||||
},
|
||||
keyDown: function(){
|
||||
var el = this.activeDescendant;
|
||||
this.setActiveDescendant(this.getNextTreeItem(el));
|
||||
},
|
||||
setActiveDescendant: function(inNode){
|
||||
Element.removeClassName(this.activeDescendant,'activedescendant')
|
||||
if($(inNode)) this.activeDescendant = $(inNode);
|
||||
else this.activeDescendant = $(this.strDefaultActiveDescendant);
|
||||
Element.addClassName(this.activeDescendant,'activedescendant')
|
||||
this.strActiveDescendant = this.activeDescendant.id;
|
||||
this.el.setAttribute('aria-activedescendant', this.activeDescendant.id);
|
||||
},
|
||||
toggleExpanded: function(inNode){
|
||||
var el = $(inNode);
|
||||
if(Aria.isExpanded(el)){
|
||||
el.setAttribute('aria-expanded','false');
|
||||
} else {
|
||||
el.setAttribute('aria-expanded','true');
|
||||
}
|
||||
this.setActiveDescendant(el);
|
||||
}
|
||||
};
|
|
@ -0,0 +1,8 @@
|
|||
function myLoad(){
|
||||
$$('[role="tree"]').each(function(elm){
|
||||
// for each node where [role="tree"], create a new Aria.Tree instance and append it to array Aria.Trees
|
||||
Aria.Trees.push(new Aria.Tree(elm));
|
||||
});
|
||||
}
|
||||
Event.observe(window, 'load', myLoad); // will probably use onDOMContentLoaded instead of onLoad
|
||||
|
4184
tests/wpt/web-platform-tests/conformance-checkers/html-aria/_functional/tree/js/prototype.js
vendored
Normal file
4184
tests/wpt/web-platform-tests/conformance-checkers/html-aria/_functional/tree/js/prototype.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Checkbox with title attribute and no other labeling mechanism</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox" id="test" title="foo" />
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>File input with title attribute and no other labeling mechanism</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="file" id="test" title="foo" />
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Password input with title attribute and no other labeling mechanism</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="password" id="test" title="foo" />
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Radio button with title attribute and no other labeling mechanism</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="radio" id="test" title="foo" />
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Text input with title attribute and no other labeling mechanism</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="text" id="test" title="foo" />
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 673</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 673</h1>
|
||||
|
||||
<div id="TEST_ID" aria-live="polite" >
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="polite".
|
||||
After the onload event completes a child DOM text node is added to the element with
|
||||
the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addTextNode() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addTextNode,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 674</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 674</h1>
|
||||
|
||||
<div id="TEST_ID" aria-live="polite" >
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="polite".
|
||||
After the onload event completes a child DOM text node is added to the element
|
||||
with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addTextNode() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addTextNode,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 675</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 675</h1>
|
||||
|
||||
<div id="TEST_ID">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element without an aria-live attribute is defined in markup.
|
||||
After the onload event completes an aria-live attribute with the
|
||||
value 'assertive' is added to the element and a child DOM text
|
||||
node is added to the element.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
node.setAttribute('aria-live', 'assertive');
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 676</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 676</h1>
|
||||
|
||||
<div id="TEST_ID">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element without an aria-live attribute is defined in markup.
|
||||
After the onload event completes a new element with an aria-live attribute with the
|
||||
value 'assertive' is added to the document and a child element and text
|
||||
node is added to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addElement() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
var element_node = document.createElement('span');
|
||||
element_node.setAttribute('aria-live','assertive');
|
||||
var text_node = document.createTextNode('Text added in a span element on load');
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 677</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 677</h1>
|
||||
|
||||
<div aria-live="polite" >
|
||||
<span id="TEST_ID" style="display: none">Text in markup</span>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="polite"
|
||||
which has a child DOM element node with text content that is hidden using CSS display="none".
|
||||
After the onload event completes a child DOM element node with text content has the
|
||||
CSS dsiplay property changed to display="block".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
node.style.display = 'block';
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 678</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 678</h1>
|
||||
|
||||
<div aria-live="assertive" >
|
||||
<span id="TEST_ID" style="display: none">Text in markup</span>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the
|
||||
value="assertive" which has a child DOM element node with text content
|
||||
that is hidden using CSS display="none". After the onload event completes
|
||||
a child DOM element node with text content has the CSS dsiplay property
|
||||
changed to display="block".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
node.style.display = 'block';
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 679</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 679</h1>
|
||||
|
||||
<div aria-live="polite" >
|
||||
<span>Text before test : </span>
|
||||
<span id="TEST_ID" style="visibility: hidden">TEST TEXT</span>
|
||||
<span> : Text after test</span>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="polite" which has a child
|
||||
DOM element node with text content that is hidden using CSS visibility="hidden".
|
||||
After the onload event completes a child DOM element node with text content has the
|
||||
CSS dsiplay property changed to visibility="visible".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
node.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 680</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 680</h1>
|
||||
|
||||
<div aria-live="assertive" >
|
||||
<span>Text before test : </span>
|
||||
<span id="TEST_ID" style="visibility: hidden">TEST TEXT</span>
|
||||
<span> : Text after test</span>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
|
||||
which has a child DOM element node with text content that is hidden using CSS visibility="hidden".
|
||||
After the onload event completes a child DOM element node with text content has the CSS dsiplay
|
||||
property changed to visibility="visible".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
node.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 681</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 681</h1>
|
||||
|
||||
<div id="TEST_ID" aria-live="polite">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during the onload
|
||||
event with the value="polite". After the onload event completes a child DOM text node is added
|
||||
to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildTextNode() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addChildTextNode,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 682</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 682</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during the onload
|
||||
event with the value="assertive". After the onload event completes a child DOM text node is
|
||||
added to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildTextNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildTextNode,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 683</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 683</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during the onload
|
||||
event with the value="polite". After the onload event completes a child DOM element node is
|
||||
added to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('id', 'TEST_ID_2');
|
||||
live_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(live_node);
|
||||
setTimeout(addChildElementNode,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 684</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 684</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during
|
||||
the onload event with the value="assertive". After the onload event completes a
|
||||
child DOM element node is added to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(element_node);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode, 1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 685</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 685</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during the onload
|
||||
event with the value="polite" and the element has a child DOM element node with text content
|
||||
that is hidden using CSS display="none". After the onload event completes a child DOM element
|
||||
node with text content has the CSS display property changed to display="block".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_3');
|
||||
node.style.display = "block";
|
||||
}
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_3');
|
||||
element_node.setAttribute('style', 'display: none');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 686</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 686</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during the onload
|
||||
event with the value="assertive" and the element has a child DOM element node with text content
|
||||
that is hidden using CSS display="none". After the onload event completes a child DOM element
|
||||
node with text content has the CSS display property changed to display="block".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_3');
|
||||
node.style.display = "block";
|
||||
}
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_3');
|
||||
element_node.setAttribute('style', 'display: none');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 687</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 687</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during
|
||||
the onload event with the value="polite" and the element has a child DOM element node
|
||||
with text content that is hidden using CSS visibility="hidden". After the onload
|
||||
event completes a child DOM element node with text content has the CSS display property
|
||||
changed to visibility="visible".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_3');
|
||||
node.setAttribute('style', 'visibility: visible');
|
||||
}
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_3');
|
||||
element_node.setAttribute('style', 'visibility: hidden');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 688</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 688</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script
|
||||
during the onload event with the value="assertive" and the element has a child
|
||||
DOM element node with text content that is hidden using CSS visibility="hidden".
|
||||
After the onload event completes a child DOM element node with text content
|
||||
has the CSS display property changed to visibility="visible".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_3');
|
||||
node.setAttribute('style', 'visibility: visible');
|
||||
}
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_3');
|
||||
element_node.setAttribute('style', 'visibility: hidden');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
setTimeout(showElement,1000);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 689</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 689</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script after the
|
||||
onload event completes with the value="polite". After the aria-live attribute is added,
|
||||
a child DOM text node is added to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildTextNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildTextNode,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 690</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 690</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script after
|
||||
the onload event completes with the value="assertive". After the aria-live attribute
|
||||
is added, a child DOM text node is added to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildTextNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildTextNode,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 691</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 691</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script
|
||||
after the onload event completes with the value="polite". After the aria-live
|
||||
attribute is added, a child DOM element node is added to the element with
|
||||
the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 692</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 692</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script after
|
||||
the onload event completes with the value="assertive". After the aria-live attribute
|
||||
is added, a child DOM element node is added to the element with the aria-live attribute.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(element_node);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 693</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 693</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script after
|
||||
the onload event completes with the value="polite" and the element has a child DOM
|
||||
element node with text content that is hidden using CSS display="none". After the
|
||||
aria-live attribute is added, the child DOM element node with text content has the
|
||||
CSS display property changed to display="block".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.setAttribute('style', 'display: block');
|
||||
}
|
||||
|
||||
function addChildElementNode() {
|
||||
var element_node = document.getElementById('TEST_ID_2');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
element_node.setAttribute('style', 'display: none');
|
||||
setTimeout(showElement,500);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 694</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 694</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script after
|
||||
the onload event completes with the value="assertive" and the element has a child
|
||||
DOM element node with text content that is hidden using CSS display="none". After
|
||||
the aria-live attribute is added, the child DOM element node with text content has
|
||||
the CSS display property changed to display="block".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_3');
|
||||
node.setAttribute('style', 'display: block');
|
||||
}
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_3');
|
||||
element_node.setAttribute('style', 'display: none');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
setTimeout(showElement,500);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 695</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 695</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script
|
||||
after the onload event completes with the value="polite" and the element has
|
||||
a child DOM element node with text content that is hidden using CSS
|
||||
visibility="hidden". After the aria-live attribute is added, the child DOM
|
||||
element node with text content has the CSS display property changed to visibility="visible".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_3');
|
||||
node.setAttribute('style', 'visibility: visible');
|
||||
}
|
||||
|
||||
function addChildElementNode() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_3');
|
||||
element_node.setAttribute('style', 'visibility: hidden');
|
||||
var text_node = document.createTextNode("TEST TEXT");
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
setTimeout(showElement,500);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
node.appendChild(element_node);
|
||||
setTimeout(addChildElementNode,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 696</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 696</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
<div id="TEST_ID_2" style="visibility: hidden">TEST TEXT</div>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script after the
|
||||
onload event completes with the value="assertive" and the element has a child DOM
|
||||
element node with text content that is hidden using CSS visibility="hidden". After
|
||||
the aria-live attribute is added, the child DOM element node with text content has
|
||||
the CSS display property changed to visibility="visible".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function showElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.setAttribute('style', 'visibility: visible');
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
node.setAttribute('aria-live', 'assertive');
|
||||
setTimeout(showElement,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 697</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 697</h1>
|
||||
|
||||
<div id="TEST_ID_1" aria-live="polite">
|
||||
TEST TEXT
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="polite"
|
||||
has a child DOM text node with content. After the onload event completes the child
|
||||
DOM text node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 698</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 698</h1>
|
||||
|
||||
<div id="TEST_ID_1" aria-live="assertive">
|
||||
TEST TEXT
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
|
||||
has a child DOM text node with content. After the onload event completes the child DOM
|
||||
text node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 699</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 699</h1>
|
||||
|
||||
<div id="TEST_ID_1" aria-live="polite">
|
||||
<div>TEST TEXT</div>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="polite"
|
||||
has a child DOM element node that contains text content. After the onload event completes
|
||||
the child DOM element node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 700</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 700</h1>
|
||||
|
||||
<div id="TEST_ID_1" aria-live="assertive">
|
||||
<div>TEST TEXT</div>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the
|
||||
value="assertive" has a child DOM element node that contains text content.
|
||||
After the onload event completes the child DOM element node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 701</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 701</h1>
|
||||
|
||||
<div id="TESTZ" aria-live="polite">
|
||||
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with
|
||||
the value="polite" has a child DOM element node that contains text
|
||||
content. After the onload event completes the CSS 'display' property
|
||||
of the child DOM element node is changed to display="none".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
node.setAttribute('style', 'display: none');
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 702</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 702</h1>
|
||||
|
||||
<div id="TESTZ" aria-live="assertive">
|
||||
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
|
||||
has a child DOM element node that contains text content. After the onload event completes
|
||||
the CSS 'display' property of the child DOM element node is changed to display="none".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
node.setAttribute('style', 'display: none');
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 703</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 703</h1>
|
||||
|
||||
<div id="TESTZ" aria-live="polite">
|
||||
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="polite"
|
||||
has a child DOM element node that contains text content. After the onload event
|
||||
completes the CSS 'visibility' property of the child DOM element node is changed
|
||||
to visibility="hidden".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
node.setAttribute('style', 'visibility: hidden');
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 704</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 704</h1>
|
||||
|
||||
<div id="TESTZ" aria-live="assertive">
|
||||
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
|
||||
has a child DOM element node that contains text content. After the onload event completes
|
||||
the CSS 'visibility' property of the child DOM element node is changed to visibility="hidden".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
node.setAttribute('style', 'visibility: hidden');
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 705</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 705</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script
|
||||
during the onload event with the value="polite" and the element has a child DOM
|
||||
text node with content. After the onload event completes the child DOM text
|
||||
node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
element_node.setAttribute('aria-live', 'polite');
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
setTimeout(deleteChildNodes,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 706</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 706</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during the onload
|
||||
event with the value="assertive" and the element has a child DOM text node with content. After
|
||||
the onload event completes the child DOM text node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('aria-live', 'assertive');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
element_node.appendChild(text_node);
|
||||
node.appendChild(element_node);
|
||||
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 707</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 707</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script
|
||||
during the onload event with the value="polite" and the element has a child
|
||||
DOM element node that contains text content. After the onload event completes
|
||||
the child DOM element node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'polite');
|
||||
live_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 708</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 708</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during
|
||||
the onload event with the value="assertive" and the element has a child DOM element
|
||||
node that contains text content. After the onload event completes the child DOM
|
||||
element node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'assertive');
|
||||
live_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 709</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 709</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during
|
||||
the onload event with the value="polite" and the element has a child DOM element node
|
||||
that contains text content. After the onload event completes the CSS 'display'
|
||||
property of the child DOM element node is changed to display="none".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.setAttribute('style', 'display: none');
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'polite');
|
||||
live_node.setAttribute('id','TESTZ');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 710</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 710</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script during
|
||||
the onload event with the value="assertive" and the element has a child DOM element
|
||||
node that contains text content. After the onload event completes the CSS 'display'
|
||||
property of the child DOM element node is changed to display="none".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.setAttribute('style', 'display: none');
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'assertive');
|
||||
live_node.setAttribute('id','TESTZ');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 711</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 711</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a script
|
||||
during the onload event with the value="polite" and the element has a child
|
||||
DOM element node that contains text content. After the onload event completes
|
||||
the CSS 'visibility' property of the child DOM element node is changed
|
||||
to visibility="hidden".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.setAttribute('style', 'visibility: hidden');
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'polite');
|
||||
live_node.setAttribute('id', 'TESTZ');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 712</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 712</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute is added to the document by a
|
||||
script during the onload event with the value="assertive" and the element
|
||||
has a child DOM element node that contains text content. After the onload
|
||||
event completes the CSS 'visibility' property of the child DOM element
|
||||
node is changed to visibility="hidden".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.setAttribute('style', 'visibility: hidden');
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'assertive');
|
||||
live_node.setAttribute('id', 'TESTZ');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
addLiveRegion();
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 713</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 713</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a
|
||||
script after the onload event completes with the value="polite" and
|
||||
the element has a child DOM text node with content. After the
|
||||
aria-live attribute is added, the child DOM text node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'polite');
|
||||
live_node.setAttribute('id', 'TESTZ');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(deleteChildNodes,1000);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion, 1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 714</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 714</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a
|
||||
script after the onload event completes with the value="assertive"
|
||||
and the element has a child DOM text node with content. After the
|
||||
aria-live attribute is added, the child DOM text node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'assertive');
|
||||
live_node.setAttribute('id', 'TESTZ');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(deleteChildNodes,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 715</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 715</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script
|
||||
after the onload event completes with the value="polite" and the element has
|
||||
a child DOM element node that contains text content. After the aria-live
|
||||
attribute is added, the child DOM element node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
node.setAttribute('aria-live', 'polite');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
node.appendChild(text_node);
|
||||
|
||||
setTimeout(deleteChildNodes,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 716</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 716</h1>
|
||||
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script
|
||||
after the onload event completes with the value="polite" and the element has
|
||||
a child DOM element node that contains text content. After the aria-live
|
||||
attribute is added, the child DOM element node is deleted.</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function deleteChildNodes() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
node.setAttribute('aria-live', 'assertive');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
node.appendChild(text_node);
|
||||
|
||||
setTimeout(deleteChildNodes,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 717</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 717</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script
|
||||
after the onload event completes with the value="polite" and the element has
|
||||
a child DOM element node that contains text content. After the aria-live
|
||||
attribute is added, the CSS 'display' property of the child DOM element
|
||||
node is changed to display="none".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.style.display = "none";
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'polite');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 718</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 718</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a script
|
||||
after the onload event completes with the value="assertive" and the element has
|
||||
a child DOM element node that contains text content. After the aria-live
|
||||
attribute is added, the CSS 'display' property of the child DOM element
|
||||
node is changed to display="none".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.style.display = "none";
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'assertive');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 719</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 719</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a
|
||||
script after the onload event completes with the value="polite" and
|
||||
the element has a child DOM element node that contains text content.
|
||||
After the aria-live attribute is added, the CSS 'visibility' property
|
||||
of the child DOM element node is changed to visibility="hidden".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.style.visibility = "hidden";
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'polite');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Test Case 720</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Test Case 720</h1>
|
||||
|
||||
<div id="TEST_ID_1">
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>The aria-live attribute is added to an element in the document by a
|
||||
script after the onload event completes with the value="assertive" and
|
||||
the element has a child DOM element node that contains text content.
|
||||
After the aria-live attribute is added, the CSS 'visibility' property
|
||||
of the child DOM element node is changed to visibility="hidden".</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function hideElement() {
|
||||
var node = document.getElementById('TEST_ID_2');
|
||||
node.style.visibility = "hidden";
|
||||
}
|
||||
|
||||
function addLiveRegion() {
|
||||
var node = document.getElementById('TEST_ID_1');
|
||||
|
||||
var live_node = document.createElement('div');
|
||||
live_node.setAttribute('aria-live', 'assertive');
|
||||
|
||||
var element_node = document.createElement('div');
|
||||
element_node.setAttribute('id', 'TEST_ID_2');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
element_node.appendChild(text_node);
|
||||
live_node.appendChild(element_node);
|
||||
node.appendChild(live_node);
|
||||
|
||||
setTimeout(hideElement,500);
|
||||
}
|
||||
|
||||
function onload() {
|
||||
setTimeout(addLiveRegion,1000);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onload);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>test 772
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
|
||||
<div id="t1">foo</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>test 773
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
|
||||
<div id="t1" style="display:none">foo</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>test 774</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
|
||||
<span id="t1" role="presentation">foo</span>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>test 773
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
|
||||
<div id="t1" style="visibility:hidden">foo</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A <div> with role "button" followed by a modification to the value of "checkbox".</title>
|
||||
<script type="text/javascript">
|
||||
function changeRole (/* Element */ element, /* String */ newRole) {
|
||||
element.setAttribute ('role', newRole);
|
||||
element.innerHTML = "This <div> has role '" + newRole + "'";
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div role="button" id="test" tabindex="0" onclick="changeRole (this, 'checkbox');" onkeydown="changeRole (this, 'checkbox');">This <div> has role 'button'</div>
|
||||
<p>
|
||||
<button onclick="changeRole (document.getElementById ('test'), 'checkbox')" type="button">Change Role</button>
|
||||
<button onclick="window.location.reload()" type="button">Reload Page</button>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A <div> with role "button" followed by removal of the element and its children and an insertion of a new div having role="checkbox"</title>
|
||||
<script type="text/javascript">
|
||||
function changeRoleByRemoval (/* Element */ element, /* String */ newRole) {
|
||||
var parent = element.parentNode;
|
||||
if (parent) {
|
||||
parent.removeChild (element);
|
||||
var div = document.createElement ('div');
|
||||
div.setAttribute ('role', newRole);
|
||||
div.setAttribute ('id', 'test');
|
||||
div.setAttribute ('tabindex', '0');
|
||||
div.setAttribute ('onclick', 'changeRoleByRemoval (this, "checkbox");');
|
||||
div.setAttribute ('onkeydown', 'changeRoleByRemoval (this, "checkbox");');
|
||||
div.innerHTML = "This <div> has role '" + newRole + "'";
|
||||
parent.appendChild (div);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div role="button" id="test" tabindex="0" onclick="changeRoleByRemoval (this, 'checkbox');" onkeydown="changeRoleByRemoval (this, 'checkbox');">This <div> has role 'button'</div>
|
||||
</div>
|
||||
<p>
|
||||
<button onclick="changeRoleByRemoval (document.getElementById ('test'), 'checkbox')" type="button">Change Role</button>
|
||||
<button onclick="window.location.reload()" type="button">Reload Page</button>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A <div> with role role="listbox" aria-busy="true", but no "option" descendants.</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="listbox" aria-busy="true">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>In a <div> element with role="combobox" and aria-autocomplete="none", change values of the combobox by typing.</title>
|
||||
<style type="text/css">
|
||||
.hasFocus { border: 2px solid red; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var DEL = 8;
|
||||
var BACK_SPACE = 72;
|
||||
var comboInfo = {};
|
||||
|
||||
function initComboInfo() {
|
||||
comboInfo.comboBox = document.getElementById ('test');
|
||||
comboInfo.textEntry = document.getElementById ('textEntry');
|
||||
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
|
||||
comboInfo.options = active.parentElement.children;
|
||||
return active;
|
||||
}
|
||||
|
||||
function matchOption(/* String */ entryVal) {
|
||||
var theOption = null;
|
||||
|
||||
// Check only if entryVal is not empty.
|
||||
//
|
||||
if (entryVal != null && entryVal.length != 0) {
|
||||
for (var i = 0; i < comboInfo.options.length; i++) {
|
||||
var anOption = comboInfo.options[i];
|
||||
var optionText = anOption.innerHTML.toLowerCase();
|
||||
if (optionText.indexOf (entryVal) == 0) {
|
||||
theOption = anOption;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return theOption;
|
||||
}
|
||||
|
||||
function updateActive (/* Element */ newActive) {
|
||||
var oldActive = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
|
||||
if (oldActive != newActive) {
|
||||
comboInfo.comboBox.setAttribute ('aria-activedescendant', newActive.getAttribute ('id'));
|
||||
oldActive.removeAttribute ('class');
|
||||
newActive.setAttribute ('class', 'hasFocus');
|
||||
}
|
||||
}
|
||||
|
||||
function doOnload() {
|
||||
var active = initComboInfo();
|
||||
active.setAttribute ('class', 'hasFocus');
|
||||
comboInfo.textEntry.value = active.innerHTML;
|
||||
comboInfo.textEntry.focus();
|
||||
}
|
||||
|
||||
function handleTyping (event) {
|
||||
/* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */
|
||||
/* NOTE: Supports deletion only from the end of the text INPUT value */
|
||||
var stringSoFar = event.target.value;
|
||||
|
||||
if (event.which == DEL || event.which == BACK_SPACE)
|
||||
stringSoFar = stringSoFar.slice(0, stringSoFar.length-1);
|
||||
else
|
||||
stringSoFar = stringSoFar + String.fromCharCode (event.which);
|
||||
|
||||
var matchedOption = matchOption (stringSoFar.toLowerCase());
|
||||
if (matchedOption != null)
|
||||
updateActive (matchedOption);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="doOnload();">
|
||||
<div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="none" aria-activedescendant="o1">
|
||||
<input id="textEntry" role="textbox" aria-owns="owned_listbox" onkeypress="handleTyping(event);" type="text">
|
||||
<ul role="listbox" id="owned_listbox" style="list-style-type: none;">
|
||||
<li role="option" id="o1">Zebra</li>
|
||||
<li role="option" id="o2">Zoom</li>
|
||||
<li role="option" id="o3">Zeta</li>
|
||||
<li role="option" id="o4">Zaphod</li>
|
||||
<li role="option" id="o5">Alpha</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>In a <div> element with role="combobox" and aria-autocomplete="inline", change values of the combobox by adjusting the up and down arrow keys with focus on the textfield in the combobox.</title>
|
||||
<style type="text/css">
|
||||
.hasFocus { border: 2px solid red; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var UP = 38;
|
||||
var DOWN = 40;
|
||||
comboInfo = {};
|
||||
|
||||
function toArray (/* NodeList */ nodeList) {
|
||||
var result = [];
|
||||
for (var i=0; i < nodeList.length; i++) {
|
||||
result[i] = nodeList[i];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function initComboInfo() {
|
||||
comboInfo.comboBox = document.getElementById ('test');
|
||||
comboInfo.textEntry = document.getElementById ('testEntry');
|
||||
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
|
||||
comboInfo.options = toArray (active.parentElement.children);
|
||||
return active;
|
||||
}
|
||||
|
||||
function handleArrow (/* Event */ event) {
|
||||
/* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */
|
||||
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
|
||||
var currentIndex = comboInfo.options.indexOf (active);
|
||||
var nextIndex = currentIndex;
|
||||
if (event.which == DOWN) {
|
||||
nextIndex = (currentIndex + 1) % comboInfo.options.length;
|
||||
}
|
||||
else if (event.which == UP) {
|
||||
nextIndex = currentIndex - 1;
|
||||
if (nextIndex < 0)
|
||||
nextIndex = comboInfo.options.length - 1;
|
||||
}
|
||||
|
||||
if (nextIndex != currentIndex) {
|
||||
active.removeAttribute ('class');
|
||||
active = comboInfo.options[nextIndex];
|
||||
comboInfo.comboBox.setAttribute ('aria-activedescendant', active.getAttribute ('id'));
|
||||
active.setAttribute ('class', 'hasFocus');
|
||||
event.target.value = active.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
function doOnload() {
|
||||
var active = initComboInfo();
|
||||
comboInfo.textEntry.value = active.innerHTML;
|
||||
comboInfo.textEntry.focus();
|
||||
active.setAttribute ('class', 'hasFocus');
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload='doOnload()'>
|
||||
<div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="inline" aria-activedescendant="o1">
|
||||
<input id="testEntry" type="text" role="textbox" aria-owns="owned_listbox" onkeydown='handleArrow (event)'>
|
||||
<ul role="listbox" id="owned_listbox" style="list-style-type: none;">
|
||||
<li role="option" id="o1">Zebra</li>
|
||||
<li role="option" id="o2">Zoom</li>
|
||||
<li role="option" id="o3">Zeta</li>
|
||||
<li role="option" id="o4">Zaphod</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>In a <div> element with role="combobox" and aria-autocomplete="both", change values of the combobox by adjusting the up and down arrow keys with focus on the textfield in the combobox.</title>
|
||||
<style type="text/css">
|
||||
.hasFocus { border: 2px solid red; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var UP = 38;
|
||||
var DOWN = 40;
|
||||
comboInfo = {};
|
||||
|
||||
function toArray (/* NodeList */ nodeList) {
|
||||
var result = [];
|
||||
for (var i=0; i < nodeList.length; i++) {
|
||||
result[i] = nodeList[i];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function initComboInfo() {
|
||||
comboInfo.comboBox = document.getElementById ('test');
|
||||
comboInfo.textEntry = document.getElementById ('testEntry');
|
||||
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
|
||||
comboInfo.options = toArray (active.parentElement.children);
|
||||
return active;
|
||||
}
|
||||
|
||||
function handleArrow (/* Event */ event) {
|
||||
/* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */
|
||||
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
|
||||
var currentIndex = comboInfo.options.indexOf (active);
|
||||
var nextIndex = currentIndex;
|
||||
if (event.which == DOWN) {
|
||||
nextIndex = (currentIndex + 1) % comboInfo.options.length;
|
||||
}
|
||||
else if (event.which == UP) {
|
||||
nextIndex = currentIndex - 1;
|
||||
if (nextIndex < 0)
|
||||
nextIndex = comboInfo.options.length - 1;
|
||||
}
|
||||
|
||||
if (nextIndex != currentIndex) {
|
||||
active.removeAttribute ('class');
|
||||
active = comboInfo.options[nextIndex];
|
||||
comboInfo.comboBox.setAttribute ('aria-activedescendant', active.getAttribute ('id'));
|
||||
active.setAttribute ('class', 'hasFocus');
|
||||
event.target.value = active.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
function doOnload() {
|
||||
var active = initComboInfo();
|
||||
comboInfo.textEntry.value = active.innerHTML;
|
||||
comboInfo.textEntry.focus();
|
||||
active.setAttribute ('class', 'hasFocus');
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload='doOnload()'>
|
||||
<div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="both" aria-activedescendant="o2">
|
||||
<input id="testEntry" type="text" role="textbox" aria-owns="owned_listbox" onkeydown='handleArrow (event)'>
|
||||
<ul role="listbox" id="owned_listbox" style="list-style-type: none;">
|
||||
<li role="option" id="o1">Zebra</li>
|
||||
<li role="option" id="o2">Zoom</li>
|
||||
<li role="option" id="o3">Zeta</li>
|
||||
<li role="option" id="o4">Zaphod</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A <div> with role="list" and a child div with role="group" who has a child of role="button".</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="list">
|
||||
<div id="listChild" role="group">
|
||||
<span id="groupChild" role="button">List <abbr title="containing">→</abbr> group <abbr title="containing">→</abbr> button</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A <div>with role="menu" and a child div with role="group" who has a child of role="button"..</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="menu">
|
||||
<div id="menuChild" role="group">
|
||||
<span id="groupChild" role="button">Menu <abbr title="containing">→</abbr> group <abbr title="containing">→</abbr> button</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A <div> with role="tree" and a child div with role="group" who has a child of role="button"</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="tree">
|
||||
<div id="treeChild" role="group">
|
||||
<span id="groupChild" role="button">Tree <abbr title="containing">→</abbr> group <abbr title="containing">→</abbr> button</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A <div> with role="grid" and a child div with role="rowgroup" who has a child of role="button".</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="grid">
|
||||
<div id="gridChild" role="rowgroup">
|
||||
<span id="rowgroupChild" role="button">Grid <abbr title="containing">→</abbr> rowgroup <abbr title="containing">→</abbr> button</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A page with two div elements that have role="toolbar" but not aria-label property.</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="toolbar">Toolbar 1</div>
|
||||
<div id="test2" role="toolbar">Toolbar 2</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A page with one div element that has role="toolbar" but not aria-label property.</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="toolbar">Toolbar 1</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A div element with style="display:none" has aria-hidden="true", and then script sets style to "display: block".</title>
|
||||
<script type="text/javascript">
|
||||
function replaceStyle (/* Element */ element, /* String */ selector, /* String */ newValue) {
|
||||
element.setAttribute ('style', selector + ':' + newValue);
|
||||
if (newValue == 'block')
|
||||
element.setAttribute ('aria-hidden', 'false');
|
||||
else if (newValue == 'none')
|
||||
element.setAttribute ('aria-hidden', 'true');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" aria-hidden="true" style="display:none;">This <div>'s style switched from 'display:none' to 'display:block'. It's <code>aria-hidden</code> was simultaneously switched to 'false'.</div>
|
||||
<p>
|
||||
<button onclick="replaceStyle (document.getElementById ('test'), 'display', 'block')" type="button">Change to 'display:block'</button>
|
||||
<button onclick="replaceStyle (document.getElementById ('test'), 'display', 'none')" type="button">Change to 'display:none'</button>
|
||||
<button onclick="window.location.reload()" type="button">Reload Page</button>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>A page with a div element with id="owned1" is referenced by two div elements that each have aria-owns="owned1".</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="owner1" aria-owns="owned1">First owner of owned1</div>
|
||||
<div id="owner2" aria-owns="owned1">Second owner of owned1</div>
|
||||
<div id="owned1">I am owned1</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>An element with aria-setsize=5 has aria-posinset=6.</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2 id="label_fruit"> Available Fruit </h2>
|
||||
<ul role="listbox" aria-labelledby="label_fruit">
|
||||
<li role="option" aria-setsize="5" aria-posinset="6" id="test"> apples </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="2"> bananas </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="3"> cantaloupes </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="4"> dates </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="5"> kumquat </li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>An element with aria-setsize=1 has aria-posinset=5</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2 id="label_fruit"> Available Fruit </h2>
|
||||
<ul role="listbox" aria-labelledby="label_fruit">
|
||||
<li role="option" aria-setsize="1" aria-posinset="5" id="test"> apples </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="2"> bananas </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="3"> cantaloupes </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="4"> dates </li>
|
||||
<li role="option" aria-setsize="5" aria-posinset="5"> kumquat </li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>An element with role button without the aria-pressed state.</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="button">This div has role button</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>An element with role button with an aria-pressed state of "true".</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" role="button" aria-pressed='true'>This div has role button, with aria-pressed='true'</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Div with role="combobox" and aria-autocomplete="list"</title>
|
||||
</head>
|
||||
<body>
|
||||
<div role="combobox" aria-expanded="true" aria-label="Tag"
|
||||
aria-autocomplete="list" aria-activedescendant="selected_option">
|
||||
<input type="text" role="textbox" aria-owns="owned_listbox" />
|
||||
<ul role="listbox" id="owned_listbox">
|
||||
<li role="option">Zebra</li>
|
||||
<li role="option" id="selected_option" aria-selected="true">Zoom</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Input with role="combobox" and aria-autocomplete="list"</title>
|
||||
</head>
|
||||
<body>
|
||||
<input tabindex="0" type="text" id="test" role="combobox" aria-label="Tag" aria-expanded="true"
|
||||
aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option" />
|
||||
<ul role="listbox" id="owned_listbox">
|
||||
<li role="option">Zebra</li>
|
||||
<li role="option" id="selected_option" aria-selected="true">Zoom</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Native checkbox with aria-checked that conflicts with native checked</title>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="checkbox" role="checkbox" checked="checked" aria-checked="false" id="test" value="Placeholder content" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Native checkbox with aria-checked but no role</title>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="checkbox" checked="checked" aria-checked="mixed" id="test" value="Placeholder content" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Native checkbox with aria-checked with role</title>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="checkbox" checked="checked" role="checkbox" aria-checked="mixed" id="test" value="Placeholder content" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>valuetext</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<input id="test" type="range" min="0" max="100" value="75" aria-valuetext="awesome">
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Live Region Event Test Case: Add text content</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style type="text/css">
|
||||
div#TEST_ID {
|
||||
margin: 0.5em;
|
||||
padding: 0.25em;
|
||||
border: medium gray solid;
|
||||
width: 10em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Live Region Event Test Case: Add text content</h1>
|
||||
|
||||
<div id="TEST_ID" aria-live="assertive" aria-label="charlotte">
|
||||
</div>
|
||||
|
||||
<button onclick="tryAgain()">Try Again</button>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute with the value "assertive" has a text content added
|
||||
1.5 seconds after the document is loaded.</p>
|
||||
|
||||
<h2>Expected Results</h2>
|
||||
|
||||
<dl>
|
||||
<dt>ATK/AT-SPI</dt>
|
||||
<dd>ATK/AT-SPIevent: text_changed::insert event</dd>
|
||||
|
||||
<dt>AXAPI</dt>
|
||||
<dd>AXLiveRegionChanged notification</dd>
|
||||
|
||||
<dt>MSAA + IAccessible2</dt>
|
||||
<dd>IAccessible2: IA2_EVENT_TEXT_INSERTED event</dd>
|
||||
|
||||
<dt>MSAA + UIA Express</dt>
|
||||
<dd>TextPattern..::.TextChangedEvent event</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function tryAgain() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
|
||||
onLoad();
|
||||
|
||||
}
|
||||
|
||||
function addText () {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT ADDED');
|
||||
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
|
||||
setTimeout(addText,1500);
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener('load', onLoad);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Live Region Event Test Case: Delete text content</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style type="text/css">
|
||||
div#TEST_ID {
|
||||
margin: 0.5em;
|
||||
padding: 0.25em;
|
||||
border: medium gray solid;
|
||||
width: 10em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Live Region Event Test Case: Delete text content</h1>
|
||||
|
||||
<div id="TEST_ID" aria-live="polite" >
|
||||
TEST TEXT
|
||||
</div>
|
||||
|
||||
<button onclick="tryAgain()">Try Again</button>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute with the value "polite" has a text content deleted
|
||||
1.5 seconds after the document is loaded.</p>
|
||||
|
||||
<h2>Expected Results</h2>
|
||||
|
||||
<dl>
|
||||
<dt>ATK/AT-SPI</dt>
|
||||
<dd>ATK/AT-SPIevent: text_changed::delete event</dd>
|
||||
|
||||
<dt>AXAPI</dt>
|
||||
<dd></dd>
|
||||
<dd>AXLiveRegionChanged notification</dd>
|
||||
|
||||
<dt>MSAA + IAccessible2</dt>
|
||||
<dd>IAccessible2: IA2_EVENT_TEXT_REMOVED event</dd>
|
||||
|
||||
<dt>MSAA + UIA Express</dt>
|
||||
<dd>TextPattern..::.TextChangedEvent event</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function tryAgain() {
|
||||
addText()
|
||||
|
||||
onLoad();
|
||||
|
||||
}
|
||||
|
||||
function clearText() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
}
|
||||
|
||||
function addText () {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
|
||||
var text_node = document.createTextNode('TEST TEXT');
|
||||
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
|
||||
setTimeout(clearText,1500);
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener('load', onLoad);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Live Region Event Test Case: Change text content</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style type="text/css">
|
||||
div#TEST_ID {
|
||||
margin: 0.5em;
|
||||
padding: 0.25em;
|
||||
border: medium gray solid;
|
||||
width: 10em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Live Region Event Test Case: Change text content</h1>
|
||||
|
||||
<div id="TEST_ID" aria-live="assertive">
|
||||
TEST TEXT 1
|
||||
</div>
|
||||
|
||||
<button onclick="tryAgain()">Try Again</button>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an aria-live attribute with the value "assertive" has a text content changed
|
||||
1.5 seconds after the document is loaded.</p>
|
||||
|
||||
<h2>Expected Results</h2>
|
||||
|
||||
<dl>
|
||||
<dt>ATK/AT-SPI</dt>
|
||||
<dd>ATK/AT-SPIevent: text_changed::delete event followed by text_changed::insert event</dd>
|
||||
|
||||
<dt>AXAPI</dt>
|
||||
<dd></dd>
|
||||
<dd>AXLiveRegionChanged notification</dd>
|
||||
|
||||
<dt>MSAA + IAccessible2</dt>
|
||||
<dd>IAccessible2: IA2_EVENT_TEXT_REMOVED event followed by IA2_EVENT_TEXT_INSERTED event</dd>
|
||||
|
||||
<dt>MSAA + UIA Express</dt>
|
||||
<dd>TextPattern..::.TextChangedEvent event followed by another TextPattern..::.TextChangedEvent event</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function tryAgain() {
|
||||
changeText('TEST TEXT 1')
|
||||
onLoad();
|
||||
}
|
||||
|
||||
function changeText(str) {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
|
||||
if (typeof str !== 'string') str = 'changed test text 2';
|
||||
addText(str)
|
||||
}
|
||||
|
||||
function addText (str) {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
var text_node = document.createTextNode(str);
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
setTimeout(changeText,1500);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onLoad);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Live Region Event Test Case: Add text content (ALERT role)</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style type="text/css">
|
||||
div#TEST_ID {
|
||||
margin: 0.5em;
|
||||
padding: 0.25em;
|
||||
border: medium gray solid;
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Live Region Event Test Case: Add text content (ALERT role)</h1>
|
||||
|
||||
<div id="TEST_ID" role="alert" >
|
||||
</div>
|
||||
|
||||
<button onclick="tryAgain()">Try Again</button>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an role attribute with the value "alert" has a text content added
|
||||
1.5 seconds after the document is loaded.</p>
|
||||
|
||||
<h2>Expected Results</h2>
|
||||
|
||||
<dl>
|
||||
<dt>ATK/AT-SPI</dt>
|
||||
<dd>ATK/AT-SPIevent: text_changed::insert event</dd>
|
||||
|
||||
<dt>AXAPI</dt>
|
||||
<dd>AXLiveRegionChanged notification</dd>
|
||||
|
||||
<dt>MSAA + IAccessible2</dt>
|
||||
<dd>IAccessible2: IA2_EVENT_TEXT_INSERTED event</dd>
|
||||
|
||||
<dt>MSAA + UIA Express</dt>
|
||||
<dd>TextPattern..::.TextChangedEvent event</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function tryAgain() {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
|
||||
onLoad();
|
||||
|
||||
}
|
||||
|
||||
function addText () {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
|
||||
var text_node = document.createTextNode('ALERT ROLE TEST TEXT ADDED');
|
||||
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
|
||||
setTimeout(addText,1500);
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener('load', onLoad);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA 1.0 Live Region Event Test Case: Change text content (LOG role)</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<style type="text/css">
|
||||
div#TEST_ID {
|
||||
margin: 0.5em;
|
||||
padding: 0.25em;
|
||||
border: medium gray solid;
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ARIA 1.0 Live Region Event Test Case: Change text content (LOG role)</h1>
|
||||
|
||||
<div id="TEST_ID" role="log">
|
||||
LOG ROLE TEST TEXT 1
|
||||
</div>
|
||||
|
||||
<button onclick="tryAgain()">Try Again</button>
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>An element with an role attribute with the value "log" has a text content changed
|
||||
1.5 seconds after the document is loaded.</p>
|
||||
|
||||
<h2>Expected Results</h2>
|
||||
|
||||
<dl>
|
||||
<dt>ATK/AT-SPI</dt>
|
||||
<dd>ATK/AT-SPIevent: text_changed::delete event followed by text_changed::insert event</dd>
|
||||
|
||||
<dt>AXAPI</dt>
|
||||
<dd></dd>
|
||||
<dd>AXLiveRegionChanged notification</dd>
|
||||
|
||||
<dt>MSAA + IAccessible2</dt>
|
||||
<dd>IAccessible2: IA2_EVENT_TEXT_REMOVED event followed by IA2_EVENT_TEXT_INSERTED event</dd>
|
||||
|
||||
<dt>MSAA + UIA Express</dt>
|
||||
<dd>TextPattern..::.TextChangedEvent event followed by another TextPattern..::.TextChangedEvent event</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function tryAgain() {
|
||||
changeText('LOG ROLE TEST TEXT 1')
|
||||
onLoad();
|
||||
}
|
||||
|
||||
function changeText(str) {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
while (node.firstChild) node.removeChild(node.firstChild);
|
||||
|
||||
if (typeof str !== 'string') str = 'log role changed test text 2';
|
||||
addText(str)
|
||||
}
|
||||
|
||||
function addText (str) {
|
||||
var node = document.getElementById('TEST_ID');
|
||||
var text_node = document.createTextNode(str);
|
||||
node.appendChild(text_node);
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
setTimeout(changeText,1500);
|
||||
}
|
||||
|
||||
window.addEventListener('load', onLoad);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue