gecko-dev/accessible/tests/mochitest/selectable/test_aria.html

248 строки
7.4 KiB
HTML

<html>
<head>
<title>nsIAccessibleSelectable ARIA widgets testing</title>
<link rel="stylesheet" type="text/css"
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
</style>
<script type="application/javascript"
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../states.js"></script>
<script type="application/javascript"
src="../selectable.js"></script>
<script type="application/javascript">
function testSelectable(aID, aSelectableChildren) {
var acc = getAccessible(aID, [nsIAccessibleSelectable]);
testSelectableSelection(acc, []);
acc.selectAll();
testSelectableSelection(acc, aSelectableChildren);
acc.unselectAll();
testSelectableSelection(acc, []);
}
function doTest() {
// ////////////////////////////////////////////////////////////////////////
// role="tablist"
id = "tablist_single";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectableSelection(id, [ ]);
// ////////////////////////////////////////////////////////////////////////
// role="tablist" aria-multiselectable
id = "tablist_multi";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectableSelection(id, [ ]);
select = getAccessible(id, [nsIAccessibleSelectable]);
select.addItemToSelection(0);
testSelectableSelection(id, [ "tab_multi1" ]);
select.removeItemFromSelection(0);
testSelectableSelection(id, [ ]);
select.selectAll();
testSelectableSelection(id, [ "tab_multi1", "tab_multi2" ]);
select.unselectAll();
testSelectableSelection(id, [ ]);
// ////////////////////////////////////////////////////////////////////////
// role="listbox"
id = "listbox1";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectableSelection(id, [ ]);
// ////////////////////////////////////////////////////////////////////////
// role="listbox" aria-multiselectable
id = "listbox2";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectableSelection(id, [ ]);
select = getAccessible(id, [nsIAccessibleSelectable]);
select.addItemToSelection(0);
testSelectableSelection(id, [ "listbox2_item1" ]);
select.removeItemFromSelection(0);
testSelectableSelection(id, [ ]);
select.selectAll();
testSelectableSelection(id, [ "listbox2_item1", "listbox2_item2" ]);
select.unselectAll();
testSelectableSelection(id, [ ]);
// ////////////////////////////////////////////////////////////////////////
// role="grid"
id = "grid1";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectableSelection(id, [ ]);
// ////////////////////////////////////////////////////////////////////////
// role="tree"
id = "tree1";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectableSelection(id, [ ]);
// ////////////////////////////////////////////////////////////////////////
// role="treegrid"
id = "treegrid1";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectableSelection(id, [ ]);
// ////////////////////////////////////////////////////////////////////////
// role="grid" aria-multiselectable, selectable children in subtree
id = "grid2";
ok(isAccessible(id, [nsIAccessibleSelectable]),
"No selectable accessible for " + id);
testSelectable(id,
["grid2_colhead1", "grid2_colhead2", "grid2_colhead3",
"grid2_rowhead", "grid2_cell1", "grid2_cell2"]);
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=530014"
title="ARIA single selectable widget should implement nsIAccessibleSelectable">
Mozilla Bug 530014
</a>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=566551"
title="ARIA grid and accessible selectable methods shouldn't use GetNextSibling">
Mozilla Bug 566551
</a>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=590176"
title="add pseudo SelectAccessible interface">
Mozilla Bug 590176
</a>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=804040"
title="Selection event not fired when selection of ARIA tab changes">
Mozilla Bug 804040
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<div role="tablist" id="tablist_single">
<div role="tab">tab1</div>
<div role="tab">tab2</div>
</div>
<div role="tablist" id="tablist_multi" aria-multiselectable="true">
<div role="tab" id="tab_multi1">tab1</div>
<div role="tab" id="tab_multi2">tab2</div>
</div>
<div role="listbox" id="listbox1">
<div role="option">item1</div>
<div role="option">item2</div>
</div>
<div role="listbox" id="listbox2" aria-multiselectable="true">
<div role="option" id="listbox2_item1">item1</div>
<div role="option" id="listbox2_item2">item2</div>
</div>
<div role="grid" id="grid1">
<div role="row">
<span role="gridcell">cell</span>
<span role="gridcell">cell</span>
</div>
<div role="row">
<span role="gridcell">cell</span>
<span role="gridcell">cell</span>
</div>
</div>
<div role="tree" id="tree1">
<div role="treeitem">
item1
<div role="group">
<div role="treeitem">item1.1</div>
</div>
</div>
<div>item2</div>
</div>
<div role="treegrid" id="treegrid1">
<div role="row" aria-level="1">
<span role="gridcell">cell</span>
<span role="gridcell">cell</span>
</div>
<div role="row" aria-level="2">
<span role="gridcell">cell</span>
<span role="gridcell">cell</span>
</div>
<div role="row" aria-level="1">
<span role="gridcell">cell</span>
<span role="gridcell">cell</span>
</div>
</div>
<table tabindex="0" border="2" cellspacing="0" id="grid2" role="grid"
aria-multiselectable="true">
<thead>
<tr>
<th tabindex="-1" role="columnheader" id="grid2_colhead1"
style="width:6em">Entry #</th>
<th tabindex="-1" role="columnheader" id="grid2_colhead2"
style="width:10em">Date</th>
<th tabindex="-1" role="columnheader" id="grid2_colhead3"
style="width:20em">Expense</th>
</tr>
</thead>
<tbody>
<tr>
<td tabindex="-1" role="rowheader" id="grid2_rowhead"
aria-readonly="true">1</td>
<td tabindex="-1" role="gridcell" id="grid2_cell1"
aria-selected="false">03/14/05</td>
<td tabindex="-1" role="gridcell" id="grid2_cell2"
aria-selected="false">Conference Fee</td>
</tr>
</tobdy>
</table>
</body>
</html>