<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"; ok(isAccessible(id, [nsIAccessibleSelectable]), "No selectable accessible for " + id); 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"> <div role="tab">tab1</div> <div role="tab">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>