test_headers_ariagrid.html (5233B)
1 <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> 2 <html> 3 <head> 4 <title>Table header information cells for ARIA grid</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <link rel="stylesheet" type="text/css" 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 8 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 11 <script type="application/javascript" 12 src="../common.js"></script> 13 <script type="application/javascript" 14 src="../table.js"></script> 15 16 <script type="application/javascript"> 17 18 function doTest() { 19 // //////////////////////////////////////////////////////////////////////// 20 // column and row headers from markup 21 22 let headerInfoMap = [ 23 { 24 cell: "table_dc_1", 25 rowHeaderCells: [ "table_rh_1" ], 26 columnHeaderCells: [ "table_ch_2" ], 27 }, 28 { 29 cell: "table_dc_2", 30 rowHeaderCells: [ "table_rh_1" ], 31 columnHeaderCells: [ "table_ch_3" ], 32 }, 33 { 34 cell: "table_dc_3", 35 rowHeaderCells: [ "table_rh_2" ], 36 columnHeaderCells: [ "table_ch_2" ], 37 }, 38 { 39 cell: "table_dc_4", 40 rowHeaderCells: [ "table_rh_2" ], 41 columnHeaderCells: [ "table_ch_3" ], 42 }, 43 { 44 cell: "table_rh_1", 45 rowHeaderCells: [], 46 columnHeaderCells: [ "table_ch_1" ], 47 }, 48 { 49 cell: "table_rh_2", 50 rowHeaderCells: [], 51 columnHeaderCells: [ "table_ch_1" ], 52 }, 53 ]; 54 55 testHeaderCells(headerInfoMap); 56 57 58 // //////////////////////////////////////////////////////////////////////// 59 // column and row headers from markup for grid. 60 61 headerInfoMap = [ 62 { 63 // not focusable cell (ARIAGridCellAccessible is used) 64 cell: "table2_dc_1", 65 rowHeaderCells: [], 66 columnHeaderCells: [ "table2_ch_1" ], 67 }, 68 { 69 // focusable cell (ARIAGridCellAccessible is used) 70 cell: "table2_dc_2", 71 rowHeaderCells: [], 72 columnHeaderCells: [ "table2_ch_2" ], 73 }, 74 ]; 75 76 testHeaderCells(headerInfoMap); 77 78 79 // //////////////////////////////////////////////////////////////////////// 80 // column and row headers from markup for one more grid. 81 82 headerInfoMap = [ 83 { 84 // ARIAGridCellAccessible is used 85 cell: "t3_dc_1", 86 rowHeaderCells: [ "t3_rh_1" ], 87 columnHeaderCells: [ ], 88 }, 89 { 90 // ARIAGridCellAccessible is used (inside rowgroup) 91 cell: "t3_dc_2", 92 rowHeaderCells: [ "t3_rh_2" ], 93 columnHeaderCells: [ ], 94 }, 95 ]; 96 97 testHeaderCells(headerInfoMap); 98 99 SimpleTest.finish(); 100 } 101 102 SimpleTest.waitForExplicitFinish(); 103 addA11yLoadEvent(doTest); 104 </script> 105 </head> 106 107 <body> 108 <a target="_blank" 109 title="implement IAccessibleTable2" 110 href="https://bugzilla.mozilla.org/show_bug.cgi?id=512424">Mozilla Bug 512424</a> 111 <a target="_blank" 112 title="nsHTMLTableCellAccessible is used in dojo's ARIA grid" 113 href="https://bugzilla.mozilla.org/show_bug.cgi?id=513848">Mozilla Bug 513848</a> 114 115 <p id="display"></p> 116 <div id="content" style="display: none"></div> 117 <pre id="test"> 118 </pre> 119 120 <div role="grid"> 121 <div role="row"> 122 <span id="table_ch_1" role="columnheader">col_1</span> 123 <span id="table_ch_2" role="columnheader">col_2</span> 124 <span id="table_ch_3" role="columnheader">col_3</span> 125 </div> 126 <div role="row"> 127 <span id="table_rh_1" role="rowheader">row_1</span> 128 <span id="table_dc_1" role="gridcell">cell1</span> 129 <span id="table_dc_2" role="gridcell">cell2</span> 130 </div> 131 <div role="row"> 132 <span id="table_rh_2" role="rowheader">row_2</span> 133 <span id="table_dc_3" role="gridcell">cell3</span> 134 <span id="table_dc_4" role="gridcell">cell4</span> 135 </div> 136 </div> 137 138 <div role="grid"> 139 <div role="row"> 140 <table role="presentation"> 141 <tr> 142 <td id="table2_ch_1" role="columnheader">header1</td> 143 <td id="table2_ch_2" role="columnheader">header2</td> 144 </tr> 145 </table> 146 </div> 147 <div role="row"> 148 <table role="presentation"> 149 <tr> 150 <td id="table2_dc_1" role="gridcell">cell1</td> 151 <td id="table2_dc_2" role="gridcell" tabindex="-1">cell2</td> 152 </tr> 153 </table> 154 </div> 155 </div> 156 157 <div role="grid"> 158 <table role="presentation"> 159 <tbody role="presentation"> 160 <tr role="row"> 161 <th id="t3_rh_1" role="rowheader">Row 1</th> 162 <td id="t3_dc_1" role="gridcell" tabindex="-1"> 163 Apple Inc. 164 </td> 165 </tr> 166 </tbody> 167 </table> 168 <div role="rowgroup" tabindex="0"> 169 <table role="presentation"> 170 <tbody role="presentation"> 171 <tr role="row"> 172 <th id="t3_rh_2" role="rowheader">Row 2</th> 173 <td id="t3_dc_2" role="gridcell" tabindex="-1"> 174 Apple-Shmapple Inc. 175 </td> 176 </tr> 177 </tbody> 178 </table> 179 </div> 180 </div> 181 182 </body> 183 </html>