--- a/ARIA-UAIG/1.0/tests/test-files/test85.html Thu Sep 26 08:27:42 2013 -0500
+++ b/ARIA-UAIG/1.0/tests/test-files/test85.html Mon Sep 30 17:05:28 2013 -0700
@@ -1,12 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
- <title> test 85: div element with role="listbox" and child div with role="option" and tabindex="0", set focus to the option by tabbing to Item 1.</title>
+ <title> test 85: div element with role="listbox" and child div with role="option" and tabindex="0", set focus to the option by tabbing to Item 1, then press the Down arrow to change selection.</title>
+ <style type="text/css">
+ [role="option"][tabindex="0"] {
+ background-color: #ccc;
+ }
+ [role="option"]:focus {
+ background-color: #ccf;
+ }
+ </style>
+ <script type="text/javascript">
+ function $(id){
+ return document.getElementById(id);
+ }
+
+ function changeSelection(e){
+ if (e.keyCode === 40) { // Down arrow
+ var el = $('el1');
+ el.setAttribute('tabindex', '-1');
+ el.setAttribute('aria-selected', 'false');
+ el = $('el2');
+ el.setAttribute('tabindex', '0');
+ el.setAttribute('aria-selected', 'true');
+ el.focus();
+ }
+ }
+ </script>
</head>
<body>
+ <p>test 85: div element with role="listbox" and child div with role="option" and tabindex="0", set focus to the option by tabbing to Item 1, then press the Down arrow to change selection.</p>
<div role="listbox">
- <div role="option" id="test" tabindex="0">Item 1</div>
- <div role="option">Item 2</div>
+ <div id="el1" role="option" id="test" tabindex="0" aria-selected="true" onkeyup="return changeSelection(event)">Item 1</div>
+ <div id="el2" role="option">Item 2</div>
</ul>
</body>
</html>
--- a/ARIA-UAIG/1.0/tests/test-files/test86.html Thu Sep 26 08:27:42 2013 -0500
+++ b/ARIA-UAIG/1.0/tests/test-files/test86.html Mon Sep 30 17:05:28 2013 -0700
@@ -1,19 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
- <title> test 86: table element with role="grid" with a child tr with role="row" with two child td elements with role="gridcell" and tabindex="0" and text contents, set focus on the first one</title>
+ <title> test 86: table element with role="grid" with a child tr with role="row" with two child td elements with role="gridcell" and tabindex="0" and text contents, set focus on the first one, then press Right arrow to change the selection</title>
+ <style type="text/css">
+ [role="gridcell"][tabindex="0"] {
+ background-color: #ccc;
+ }
+ [role="gridcell"]:focus {
+ background-color: #ccf;
+ }
+ </style>
+ <script type="text/javascript">
+ function $(id){
+ return document.getElementById(id);
+ }
+
+ function changeSelection(e){
+ if (e.keyCode === 39) { // Right arrow
+ var el = $('el1');
+ el.setAttribute('tabindex', '-1');
+ el.setAttribute('aria-selected', 'false');
+ el = $('el2');
+ el.setAttribute('tabindex', '0');
+ el.setAttribute('aria-selected', 'true');
+ el.focus();
+ }
+ }
+ </script>
</head>
<body>
+ <p>test 86: table element with role="grid" with a child tr with role="row" with two child td elements with role="gridcell" and tabindex="0" and text contents, set focus on the first one, then press Right arrow to change the selection</p>
<table role="grid">
- <tr role="row">
- <th role="columnheader">column1</th>
- <th role="columnheader">column2</th>
- </tr>
- </tr>
- <tr role="row">
- <td role="gridcell" id="test" tabindex="0">Item 1</td>
- <td role="gridcell">Item 2</td>
- </tr>
+ <tr role="row">
+ <th role="columnheader">column1</th>
+ <th role="columnheader">column2</th>
+ </tr>
+ </tr>
+ <tr role="row">
+ <td id="el1" role="gridcell" id="test" tabindex="0" aria-selected="true" onkeyup="return changeSelection(event)">Item 1</td>
+ <td id="el2" role="gridcell">Item 2</td>
+ </tr>
</table>
</body>
</html>
--- a/ARIA-UAIG/1.0/tests/test-files/test87.html Thu Sep 26 08:27:42 2013 -0500
+++ b/ARIA-UAIG/1.0/tests/test-files/test87.html Mon Sep 30 17:05:28 2013 -0700
@@ -1,18 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
- <title> test 87: table with role="grid" with a child tr with role="row" and tabindex="0" with two child td elements with role="gridcell" and text contents, set focus on the row by tabbing to the row containing Item 1 and Item 2. </title>
- </head>
+ <title> test 87: table with role="grid" with a child tr with role="row" and tabindex="0" with two child td elements with role="gridcell" and text contents, set focus on the row by tabbing to the row containing Item 1 and Item 2, then press the Down arrow keyc to change selection</title>
+ <style type="text/css">
+ [role="row"][tabindex="0"] {
+ background-color: #ccc;
+ }
+ [role="row"]:focus {
+ background-color: #ccf;
+ }
+ </style>
+ <script type="text/javascript">
+ function $(id){
+ return document.getElementById(id);
+ }
+
+ function changeSelection(e){
+ if (e.keyCode === 40) { // Down arrow
+ var row = $('row1');
+ row.setAttribute('tabindex', '-1');
+ row.setAttribute('aria-selected', 'false');
+ row = $('row2');
+ row.setAttribute('tabindex', '0');
+ row.setAttribute('aria-selected', 'true');
+ row.focus();
+ }
+ }
+ </script>
+ </head>
<body>
+
+ <p>test 87: table with role="grid" with a child tr with role="row" and tabindex="0" with two child td elements with role="gridcell" and text contents, set focus on the row by tabbing to the row containing Item 1 and Item 2, then press the Down arrow key to change selection to the next row.</p>
+
<table role="grid">
- <tr role="row">
- <th role="columnheader">column1</th>
- <th role="columnheader">column2</th>
- </tr>
- <tr tabindex="0" role="row">
- <td role="gridcell" id="test">Item 1</td>
- <td role="gridcell">Item 2</td>
- </tr>
+ <tr role="row">
+ <th role="columnheader">column1</th>
+ <th role="columnheader">column2</th>
+ </tr>
+ <tr id="row1" tabindex="0" role="row" onkeyup="return changeSelection(event)" aria-selected="true">
+ <td role="gridcell" id="test">Item 1</td>
+ <td role="gridcell">Item 2</td>
+ </tr>
+ <tr id="row2" tabindex="-1" role="row" aria-selected="false">
+ <td role="gridcell" id="test2">Item 3</td>
+ <td role="gridcell">Item 4</td>
+ </tr>
</table>
</body>
</html>
--- a/ARIA-UAIG/1.0/tests/test-files/test88.html Thu Sep 26 08:27:42 2013 -0500
+++ b/ARIA-UAIG/1.0/tests/test-files/test88.html Mon Sep 30 17:05:28 2013 -0700
@@ -1,16 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
- <title> test 88:table element with role="tablist" with a child tr with role="presentation" with two child td elements with role="tab" and tabindex="0" and text contents, set focus on the first one using the tab key </title>
+ <title> test 88:table element with role="tablist" with a child tr with role="presentation" with two child td elements with role="tab" and tabindex="0" and text contents, set focus on the first one using the tab key, then press Right arrow to change the selection</title>
+ <script type="text/javascript">
+ function $(id){
+ return document.getElementById(id);
+ }
+
+ function changeSelection(e){
+ if (e.keyCode === 39) { // Right arrow
+ var tab = $('tab1');
+ tab.setAttribute('tabindex', '-1');
+ tab.setAttribute('aria-selected', 'false');
+ tab = $('tab2');
+ tab.setAttribute('tabindex', '0');
+ tab.setAttribute('aria-selected', 'true');
+ tab.focus();
+ }
+ }
+ </script>
</head>
<body>
+ <p>test 88:table element with role="tablist" with a child tr with role="presentation" with two child td elements with role="tab" and tabindex="0" and text contents, set focus on the first one using the tab key, then press Right arrow to change the selection</p>
<table role="tablist">
- <tr role="presentation">
- <th role="tab" tabindex="0">panel 1</th>
- <th role="tab">panel 2</th>
- </tr>
+ <tr role="presentation">
+ <th id="tab1" role="tab" tabindex="0" aria-selected="true" onkeyup="return changeSelection(event)">panel 1</th>
+ <th id="tab2" role="tab" tabindex="-1">panel 2</th>
+ </tr>
</table>
- <div role="tabpanel">
- </div>
+ <div role="tabpanel"></div>
</body>
</html>