зеркало из https://github.com/mozilla/pjs.git
Bug 491683 - provide simple mochitest for ARIA grid based on html:table, r=marcoz, davidb
This commit is contained in:
Alexander Surkov
Родитель
ec01f7fc32
Коммит
b69df62f09
|
|
@ -53,6 +53,7 @@ _TEST_FILES =\
|
|||
attributes.js \
|
||||
common.js \
|
||||
events.js \
|
||||
grid.js \
|
||||
layout.js \
|
||||
namerules.xml \
|
||||
nsIAccessible_actions.js \
|
||||
|
|
@ -72,6 +73,7 @@ _TEST_FILES =\
|
|||
test_aria_activedescendant.html \
|
||||
test_aria_role_article.html \
|
||||
test_aria_role_equation.html \
|
||||
test_aria_role_grid.html \
|
||||
test_aria_token_attrs.html \
|
||||
test_bug420863.html \
|
||||
$(warning test_childAtPoint.xul temporarily disabled) \
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ function testAccessibleTree(aAccOrElmOrID, aAccTree)
|
|||
|
||||
if ("children" in aAccTree) {
|
||||
var children = acc.children;
|
||||
is(aAccTree.children.length, children.length,
|
||||
is(children.length, aAccTree.children.length,
|
||||
"Different amount of expected children.");
|
||||
|
||||
if (aAccTree.children.length == children.length) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
const nsIDOMKeyEvent = Components.interfaces.nsIDOMKeyEvent;
|
||||
|
||||
/**
|
||||
* Create grid object based on HTML table.
|
||||
*/
|
||||
function grid(aTableIdentifier)
|
||||
{
|
||||
this.getRowsCount = function getRowsCount()
|
||||
{
|
||||
return this.table.rows.length - (this.table.tHead ? 1 : 0);
|
||||
}
|
||||
this.getColsCount = function getColsCount()
|
||||
{
|
||||
return this.table.rows[0].cells.length;
|
||||
}
|
||||
|
||||
this.getRowAtIndex = function getRowAtIndex(aIndex)
|
||||
{
|
||||
return this.table.rows[this.table.tHead ? aIndex + 1 : aIndex];
|
||||
}
|
||||
|
||||
this.getMaxIndex = function getMaxIndex()
|
||||
{
|
||||
return this.getRowsCount() * this.getColsCount() - 1;
|
||||
}
|
||||
|
||||
this.getCellAtIndex = function getCellAtIndex(aIndex)
|
||||
{
|
||||
var rowsCount = this.getRowsCount();
|
||||
var colsCount = this.getColsCount();
|
||||
|
||||
var rowIdx = Math.floor(aIndex / colsCount);
|
||||
var colIdx = aIndex % colsCount;
|
||||
|
||||
var row = this.getRowAtIndex(rowIdx);
|
||||
return row.cells[colIdx];
|
||||
}
|
||||
|
||||
this.getIndexByCell = function getIndexByCell(aCell)
|
||||
{
|
||||
var colIdx = aCell.cellIndex;
|
||||
|
||||
var rowIdx = aCell.parentNode.rowIndex;
|
||||
if (this.table.tHead)
|
||||
rowIdx -= 1;
|
||||
|
||||
var colsCount = this.getColsCount();
|
||||
return rowIdx * colsCount + colIdx;
|
||||
}
|
||||
|
||||
this.getCurrentCell = function getCurrentCell()
|
||||
{
|
||||
var rowsCount = this.table.rows.length;
|
||||
var colsCount = this.getColsCount();
|
||||
for (var rowIdx = 0; rowIdx < rowsCount; rowIdx++) {
|
||||
for (var colIdx = 0; colIdx < colsCount; colIdx++) {
|
||||
var cell = this.table.rows[rowIdx].cells[colIdx];
|
||||
if (cell.hasAttribute("tabindex"))
|
||||
return cell;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
this.initGrid = function initGrid()
|
||||
{
|
||||
this.table.addEventListener("keypress", this, false);
|
||||
this.table.addEventListener("click", this, false);
|
||||
}
|
||||
|
||||
this.handleEvent = function handleEvent(aEvent)
|
||||
{
|
||||
if (aEvent instanceof nsIDOMKeyEvent)
|
||||
this.handleKeyEvent(aEvent);
|
||||
else
|
||||
this.handleClickEvent(aEvent);
|
||||
}
|
||||
|
||||
this.handleKeyEvent = function handleKeyEvent(aEvent)
|
||||
{
|
||||
if (aEvent.target.localName != "TD")
|
||||
return;
|
||||
|
||||
var cell = aEvent.target;
|
||||
switch(aEvent.keyCode) {
|
||||
case nsIDOMKeyEvent.DOM_VK_UP:
|
||||
var colsCount = this.getColsCount();
|
||||
var idx = this.getIndexByCell(cell);
|
||||
var upidx = idx - colsCount;
|
||||
if (upidx >= 0) {
|
||||
cell.removeAttribute("tabindex");
|
||||
var upcell = this.getCellAtIndex(upidx);
|
||||
upcell.setAttribute("tabindex", "0");
|
||||
upcell.focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case nsIDOMKeyEvent.DOM_VK_DOWN:
|
||||
var colsCount = this.getColsCount();
|
||||
var idx = this.getIndexByCell(cell);
|
||||
var downidx = idx + colsCount;
|
||||
if (downidx <= this.getMaxIndex()) {
|
||||
cell.removeAttribute("tabindex");
|
||||
var downcell = this.getCellAtIndex(downidx);
|
||||
downcell.setAttribute("tabindex", "0");
|
||||
downcell.focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case nsIDOMKeyEvent.DOM_VK_LEFT:
|
||||
var idx = this.getIndexByCell(cell);
|
||||
if (idx > 0) {
|
||||
cell.removeAttribute("tabindex");
|
||||
var prevcell = this.getCellAtIndex(idx - 1);
|
||||
prevcell.setAttribute("tabindex", "0");
|
||||
prevcell.focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case nsIDOMKeyEvent.DOM_VK_RIGHT:
|
||||
var idx = this.getIndexByCell(cell);
|
||||
if (idx < this.getMaxIndex()) {
|
||||
cell.removeAttribute("tabindex");
|
||||
var nextcell = this.getCellAtIndex(idx + 1);
|
||||
nextcell.setAttribute("tabindex", "0");
|
||||
nextcell.focus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.handleClickEvent = function handleClickEvent(aEvent)
|
||||
{
|
||||
if (aEvent.target.localName != "TD")
|
||||
return;
|
||||
|
||||
var curCell = this.getCurrentCell();
|
||||
var cell = aEvent.target;
|
||||
|
||||
if (cell != curCell) {
|
||||
curCell.removeAttribute("tabindex");
|
||||
cell.setAttribute("tabindex", "0");
|
||||
cell.focus();
|
||||
}
|
||||
}
|
||||
|
||||
this.table = getNode(aTableIdentifier);
|
||||
this.initGrid();
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ const ROLE_CHROME_WINDOW = nsIAccessibleRole.ROLE_CHROME_WINDOW;
|
|||
const ROLE_COMBOBOX = nsIAccessibleRole.ROLE_COMBOBOX;
|
||||
const ROLE_COMBOBOX_LIST = nsIAccessibleRole.ROLE_COMBOBOX_LIST;
|
||||
const ROLE_COMBOBOX_OPTION = nsIAccessibleRole.ROLE_COMBOBOX_OPTION;
|
||||
const ROLE_COLUMNHEADER = nsIAccessibleRole.ROLE_COLUMNHEADER;
|
||||
const ROLE_DOCUMENT = nsIAccessibleRole.ROLE_DOCUMENT;
|
||||
const ROLE_ENTRY = nsIAccessibleRole.ROLE_ENTRY;
|
||||
const ROLE_FLAT_EQUATION = nsIAccessibleRole.ROLE_FLAT_EQUATION;
|
||||
|
|
@ -27,6 +28,7 @@ const ROLE_PARAGRAPH = nsIAccessibleRole.ROLE_PARAGRAPH;
|
|||
const ROLE_PASSWORD_TEXT = nsIAccessibleRole.ROLE_PASSWORD_TEXT;
|
||||
const ROLE_PROGRESSBAR = nsIAccessibleRole.ROLE_PROGRESSBAR;
|
||||
const ROLE_PUSHBUTTON = nsIAccessibleRole.ROLE_PUSHBUTTON;
|
||||
const ROLE_ROW = nsIAccessibleRole.ROLE_ROW;
|
||||
const ROLE_SECTION = nsIAccessibleRole.ROLE_SECTION;
|
||||
const ROLE_SLIDER = nsIAccessibleRole.ROLE_SLIDER;
|
||||
const ROLE_TABLE = nsIAccessibleRole.ROLE_TABLE;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ARIA grid based on HTML table tests</title>
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
||||
|
||||
<style>
|
||||
td:focus {
|
||||
background-color: lightblue;
|
||||
}
|
||||
th {
|
||||
-moz-box-align: center;
|
||||
-moz-box-pack: center;
|
||||
border: 2px solid;
|
||||
-moz-border-top-colors: ThreeDHighlight ThreeDLightShadow;
|
||||
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
|
||||
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
|
||||
-moz-border-left-colors: ThreeDHighlight ThreeDLightShadow;
|
||||
background-color: -moz-Dialog;
|
||||
color: -moz-DialogText;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="application/javascript"
|
||||
src="chrome://mochikit/content/MochiKit/packed.js"></script>
|
||||
<script type="application/javascript"
|
||||
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
|
||||
<script type="application/javascript"
|
||||
src="chrome://mochikit/content/a11y/accessible/grid.js"></script>
|
||||
|
||||
<script type="application/javascript"
|
||||
src="chrome://mochikit/content/a11y/accessible/common.js"></script>
|
||||
<script type="application/javascript"
|
||||
src="chrome://mochikit/content/a11y/accessible/role.js"></script>
|
||||
|
||||
<script type="application/javascript">
|
||||
var gGrid = null;
|
||||
function doTest()
|
||||
{
|
||||
gGrid = new grid("grid");
|
||||
|
||||
// Test accessible hierarchy of ARIA grid.
|
||||
var accTree = {
|
||||
role: ROLE_TABLE,
|
||||
children: [
|
||||
{
|
||||
role: ROLE_TEXT_CONTAINER, // thead
|
||||
children: [
|
||||
{
|
||||
role: ROLE_ROW,
|
||||
children: [
|
||||
{
|
||||
role: ROLE_COLUMNHEADER
|
||||
},
|
||||
{
|
||||
role: ROLE_COLUMNHEADER
|
||||
},
|
||||
{
|
||||
role: ROLE_COLUMNHEADER
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
role: ROLE_TEXT_CONTAINER, // tbody
|
||||
children: [
|
||||
{
|
||||
role: ROLE_ROW,
|
||||
children: [
|
||||
{
|
||||
role: ROLE_GRID_CELL
|
||||
},
|
||||
{
|
||||
role: ROLE_GRID_CELL
|
||||
},
|
||||
{
|
||||
role: ROLE_GRID_CELL
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
role: ROLE_ROW,
|
||||
children: [
|
||||
{
|
||||
role: ROLE_GRID_CELL
|
||||
},
|
||||
{
|
||||
role: ROLE_GRID_CELL
|
||||
},
|
||||
{
|
||||
role: ROLE_GRID_CELL
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
if (!LINUX) // Do not test on linux because of different hierarchies.
|
||||
testAccessibleTree("grid", accTree);
|
||||
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
addA11yLoadEvent(doTest);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=491683"
|
||||
title="ARIA grid based on HTML table">Mozilla Bug 491683</a>
|
||||
<p id="display"></p>
|
||||
<div id="content" style="display: none"></div>
|
||||
<pre id="test">
|
||||
</pre>
|
||||
|
||||
<table role="grid" id="grid" border="1" cellpadding="10" cellspacing="0">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th role="columnheader">subject</td>
|
||||
<th role="columnheader">sender</th>
|
||||
<th role="columnheader">date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr role="row">
|
||||
<td role="gridcell" tabindex="0">about everything</td>
|
||||
<td role="gridcell">president</td>
|
||||
<td role="gridcell">today</td>
|
||||
</tr>
|
||||
<tr role="row">
|
||||
<td role="gridcell">new bugs</td>
|
||||
<td role="gridcell">mozilla team</td>
|
||||
<td role="gridcell">today</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче