browser_test_aria_select.js (5608B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 /* import-globals-from ../../mochitest/selectable.js */ 8 9 // //////////////////////////////////////////////////////////////////////// 10 // role="tablist" role="listbox" role="grid" role="tree" role="treegrid" 11 addAccessibleTask( 12 `<div role="tablist" id="tablist"> 13 <div role="tab">tab1</div> 14 <div role="tab">tab2</div> 15 </div> 16 <div role="listbox" id="listbox"> 17 <div role="option">item1</div> 18 <div role="option">item2</div> 19 </div> 20 <div role="grid" id="grid"> 21 <div role="row"> 22 <span role="gridcell">cell</span> 23 <span role="gridcell">cell</span> 24 </div> 25 <div role="row"> 26 <span role="gridcell">cell</span> 27 <span role="gridcell">cell</span> 28 </div> 29 </div> 30 <div role="tree" id="tree"> 31 <div role="treeitem"> 32 item1 33 <div role="group"> 34 <div role="treeitem">item1.1</div> 35 </div> 36 </div> 37 <div>item2</div> 38 </div> 39 <div role="treegrid" id="treegrid"> 40 <div role="row" aria-level="1"> 41 <span role="gridcell">cell</span> 42 <span role="gridcell">cell</span> 43 </div> 44 <div role="row" aria-level="2"> 45 <span role="gridcell">cell</span> 46 <span role="gridcell">cell</span> 47 </div> 48 <div role="row" aria-level="1"> 49 <span role="gridcell">cell</span> 50 <span role="gridcell">cell</span> 51 </div> 52 </div>`, 53 async function (browser, docAcc) { 54 info( 55 'role="tablist" role="listbox" role="grid" role="tree" role="treegrid"' 56 ); 57 testSelectableSelection(findAccessibleChildByID(docAcc, "tablist"), []); 58 testSelectableSelection(findAccessibleChildByID(docAcc, "listbox"), []); 59 testSelectableSelection(findAccessibleChildByID(docAcc, "grid"), []); 60 testSelectableSelection(findAccessibleChildByID(docAcc, "tree"), []); 61 testSelectableSelection(findAccessibleChildByID(docAcc, "treegrid"), []); 62 }, 63 { 64 chrome: true, 65 topLevel: true, 66 iframe: true, 67 remoteIframe: true, 68 } 69 ); 70 71 // //////////////////////////////////////////////////////////////////////// 72 // role="tablist" aria-multiselectable 73 addAccessibleTask( 74 `<div role="tablist" id="tablist" aria-multiselectable="true"> 75 <div role="tab" id="tab_multi1" aria-selected="true">tab1</div> 76 <div role="tab" id="tab_multi2">tab2</div> 77 <div role="tab" id="tab_multi3" aria-selected="true">tab3</div> 78 </div>`, 79 async function (browser, docAcc) { 80 info('role="tablist" aria-multiselectable'); 81 let tablist = findAccessibleChildByID(docAcc, "tablist", [ 82 nsIAccessibleSelectable, 83 ]); 84 testSelectableSelection(tablist, ["tab_multi1", "tab_multi3"]); 85 }, 86 { 87 chrome: true, 88 topLevel: true, 89 iframe: true, 90 remoteIframe: true, 91 } 92 ); 93 94 // //////////////////////////////////////////////////////////////////////// 95 // role="listbox" aria-multiselectable 96 addAccessibleTask( 97 `<div role="listbox" id="listbox" aria-multiselectable="true"> 98 <div role="option" id="listbox2_item1" aria-selected="true">item1</div> 99 <div role="option" id="listbox2_item2">item2</div> 100 <div role="option" id="listbox2_item3" aria-selected="true">item2</div> 101 </div>`, 102 async function (browser, docAcc) { 103 info('role="listbox" aria-multiselectable'); 104 let listbox = findAccessibleChildByID(docAcc, "listbox", [ 105 nsIAccessibleSelectable, 106 ]); 107 testSelectableSelection(listbox, ["listbox2_item1", "listbox2_item3"]); 108 }, 109 { 110 chrome: true, 111 topLevel: true, 112 iframe: true, 113 remoteIframe: true, 114 } 115 ); 116 117 // //////////////////////////////////////////////////////////////////////// 118 // role="grid" aria-multiselectable, selectable children in subtree 119 addAccessibleTask( 120 ` 121 <table tabindex="0" border="2" cellspacing="0" id="grid" role="grid" 122 aria-multiselectable="true"> 123 <thead> 124 <tr> 125 <th tabindex="-1" role="columnheader" id="grid_colhead1" 126 style="width:6em" aria-selected="true">Entry #</th> 127 <th tabindex="-1" role="columnheader" id="grid_colhead2" 128 style="width:10em">Date</th> 129 <th tabindex="-1" role="columnheader" id="grid_colhead3" 130 style="width:20em">Expense</th> 131 </tr> 132 </thead> 133 <tbody> 134 <tr> 135 <td tabindex="-1" role="rowheader" id="grid_rowhead" 136 aria-readonly="true">1</td> 137 <td tabindex="-1" id="grid_cell1" 138 aria-selected="true">03/14/05</td> 139 <td tabindex="-1" id="grid_cell2" 140 aria-selected="false">Conference Fee</td> 141 </tr> 142 </tbody> 143 </table> 144 <table id="table"> 145 <tr><th>a</th><td id="tableB" aria-selected="true">b</td></tr> 146 </table> 147 `, 148 async function (browser, docAcc) { 149 info('role="grid" aria-multiselectable, selectable children in subtree'); 150 const grid = findAccessibleChildByID(docAcc, "grid", [ 151 nsIAccessibleSelectable, 152 ]); 153 // grid_cell1 is a <td> with an implicit role of gridcell. 154 testSelectableSelection(grid, ["grid_colhead1", "grid_cell1"]); 155 info("Verify aria-selected doesn't apply to <td> that isn't gridcell"); 156 // We can't use testSelectableSelection here because table (rightly) isn't a 157 // selectable container. 158 const tableB = findAccessibleChildByID(docAcc, "tableB"); 159 testStates(tableB, 0, 0, STATE_SELECTED, 0); 160 }, 161 { 162 chrome: true, 163 topLevel: true, 164 iframe: true, 165 remoteIframe: true, 166 } 167 );