display-contents-role-and-label.html (21777B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Testing accessibility of display: contents</title> 5 <link rel="help" href="https://drafts.csswg.org/css-display-4/#box-generation"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/wai-aria/scripts/aria-utils.js"></script> 12 </head> 13 <body> 14 15 <!-- Dec 2023 notes for "display: contents" testing: 16 - Per CSS spec, setting "display: contents" must not alter an element's semantics (https://www.w3.org/TR/css-display-3/#valdef-display-contents): 17 "As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and 18 property inheritance, are not affected." 19 20 - As of December 2023, the current state of cross-browser, automated web accessibility testing is limited to retrieving the following 21 accessibility object properties with planned future enhancements (https://github.com/WICG/aom/issues/203): 22 - computedRole 23 - computedLabel 24 --> 25 26 <h1>Testing accessibility of display: contents</h1> 27 28 <p>Verifies accessibility behavior of the <a href="https://www.w3.org/TR/css-display-3/#box-generation">contents</a> keyword for the CSS display property</p> 29 30 <h2>Accname</h2> 31 32 <button aria-labelledby="b2" style="display: contents;" data-expectedlabel="hidden label" data-expectedrole="button" data-testname="button with display: contents is labelled via referenced hidden span" class="ex-role-and-label"> 33 <span aria-hidden="true" id="b2">hidden label</span> 34 <span hidden>hidden from all users</span> 35 <span>visible to all users</span> 36 </button> 37 38 <span id="a1">label</span> 39 <a href="#" aria-labelledby="a1" style="display: contents;" data-expectedlabel="label" data-expectedrole="link" data-testname="link with display: contents is labelled via aria-labelledby" class="ex-role-and-label">x</a> 40 <nav aria-labelledby="a1" style="display: contents;" data-expectedlabel="label" data-expectedrole="navigation" data-testname="nav with display: contents is labelled via aria-labelledby" class="ex-role-and-label">x</nav> 41 42 <button aria-label="label" style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via aria-label" class="ex-role-and-label">x</button> 43 <div role="group" aria-label="label" style="display: contents;" data-expectedlabel="label" data-expectedrole="group" data-testname="div with role group with display: contents is labelled via aria-label" class="ex-role-and-label">x</div> 44 45 <!-- <img> renders "display: contents" the same as "display:none", see: https://www.w3.org/TR/css-display-3/#unbox-html--> 46 <label for="label-for-button">label</label> 47 <button id="label-for-button" style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via label for/id association" class="ex-role-and-label">x</button> 48 <!-- SVG and display: contents behavior: https://github.com/w3c/svgwg/issues/305--> 49 <svg viewbox="0 0 100 50"> 50 <g style="display: contents;" fill="silver" stroke="blue" data-expectedlabel="group label" data-expectedrole="group" data-testname="g element with display: contents, as child of svg, is labelled via title element" class="ex-role-and-label"> 51 <title>group label</title> 52 <circle cx="20" cy="20" r="10" /> 53 <circle cx="20" cy="20" r="10" /> 54 </g> 55 </svg> 56 57 <a href="#" style="display: contents;" data-expectedlabel="label" data-expectedrole="link" data-testname="link with display: contents is labelled via name from contents" class="ex-role-and-label">label</a> 58 <button style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via name from contents" class="ex-role-and-label">label</button> 59 <h3 style="display: contents;" data-expectedlabel="label" data-expectedrole="heading" data-testname="h3 with display: contents is labelled via name from contents" class="ex-role-and-label">label</h3> 60 61 <h2>Accessibility roles</h2> 62 <!-- Buttons --> 63 <button style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="button with display: contents has button role" class="ex-role-and-label">x</button> 64 <button role="button" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="button with explicit button role and display: contents has button role" class="ex-role-and-label">x</button> 65 <div role="button" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="div with button role and display: contents has button role" class="ex-role-and-label">x</div> 66 <div role="button" tabindex="0" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="div with button role, tabindex=0 and display: contents has button role" class="ex-role-and-label">x</div> 67 68 <!-- Display: Flex --> 69 <table style="display: flex; flex-flow: column nowrap;" data-expectedrole="table"> 70 <thead> 71 <tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with display: flex, has row role" class="ex-role"> 72 <th data-expectedrole="columnheader" data-testname="th as child of tr with display: contents, within table with display: flex, has columnheader role" class="ex-role=">x</th> 73 <th>x</th> 74 </tr> 75 </thead> 76 <tbody> 77 <tr style="display: contents;"> 78 <td data-expectedrole="cell" data-testname="td as child of tr with display: contents, within table with display: flex, has cell role" class="ex-role">x</td> 79 <td>x</td> 80 </tr> 81 </tbody> 82 </table> 83 84 <table role="table" style="display: flex; flex-flow: column nowrap;" data-expectedrole="table"> 85 <thead> 86 <tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with role=table with display: flex, has row role" class="ex-role"> 87 <th data-expectedrole="columnheader" data-testname="th as child of tr with display: contents, within table with role=table with display: flex, has columnheader role" class="ex-role">x</th> 88 <th>x</th> 89 </tr> 90 </thead> 91 <tbody> 92 <tr style="display: contents;"> 93 <td data-expectedrole="cell" data-testname="td as child of tr with display: contents, within table with role=table with display: flex, has cell role" class="ex-role">x</td> 94 <td>x</td> 95 </tr> 96 </tbody> 97 </table> 98 99 <table role="grid" style="display: flex; flex-flow: column nowrap;" data-expectedrole="grid"> 100 <thead> 101 <tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with role=grid with display: flex, has row role" class="ex-role"> 102 <th data-expectedrole="columnheader" data-testname="th as child of tr with display: contents, within table with role=grid with display: flex, has columnheader role" class="ex-role">x</th> 103 <th>x</th> 104 </tr> 105 </thead> 106 <tbody> 107 <tr style="display: contents;"> 108 <td data-expectedrole="gridcell" data-testname="td (no explicit role) as child of tr with display: contents, within table with role=grid with display: flex, has gridcell role" class="ex-role">x</td> 109 <td>x</td> 110 </tr> 111 </tbody> 112 </table> 113 114 <!-- Display: Grid --> 115 <div style="display: grid; grid-template-columns: 1fr 100px; grid-gap: 1em;"> 116 <h2>x</h2> 117 <ul style="display: contents" data-expectedrole="list" data-testname="ul with display: contents, as child of div with display: grid, has list role" class="ex-role"> 118 <li>x</li> 119 <li data-expectedrole="listitem" data-testname="listitem within ul with display: contents, as child of div with display: grid, has listitem role" class="ex-role">x</li> 120 </ul> 121 </div> 122 123 <!-- Generics --> 124 <div style="display: contents;" data-testname="div with display: contents has generic role" class="ex-generic">x</div> 125 <span style="display: contents;" data-testname="span with display: contents has generic role" class="ex-generic">x</span> 126 127 <!-- Headings --> 128 <h3 style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="h3 with display: contents has heading role" class="ex-role-and-label">x</h3> 129 <div role="heading" aria-level="3" style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="div with heading role, aria-level=3 and display: contents has heading role" class="ex-role-and-label">x</div> 130 <span role="heading" aria-level="1" style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="span with heading role, aria-level=1 and display: contents has heading role" class="ex-role-and-label">x</span> 131 132 <!-- Landmarks and regions --> 133 <header style="display: contents;" data-expectedrole="banner" data-testname="header with display: contents has banner role" class="ex-role">x</header> 134 <nav style="display: contents;" aria-label="label" data-expectedrole="navigation" data-expectedlabel="label" data-testname="nav with display: contents and aria-label has navigation role" class="ex-role-and-label">x</nav> 135 <aside style="display: contents;" aria-label="label" data-expectedrole="complementary" data-expectedlabel="label" data-testname="aside with display: contents and aria-label has complementary role" class="ex-role-and-label">x</aside> 136 <main style="display: contents;" data-expectedrole="main" data-testname="main with display: contents has main role" class="ex-role">x</main> 137 <footer style="display: contents;" data-expectedrole="contentinfo" data-testname="footer with display: contents has contentinfo role" class="ex-role">x</footer> 138 <form aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="form with display: contents has form role" class="ex-role-and-label">x</form> 139 <search style="display: contents;" data-expectedrole="search" data-testname="search with display: contents has search role" class="ex-role">x</search> 140 <section aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="section with aria-label and display: contents has region role" class="ex-role-and-label"></section> 141 142 <div role="banner" style="display: contents;" data-expectedrole="banner" data-testname="div with role banner and display: contents has banner role" class="ex-role">x</div> 143 <div role="navigation" aria-label="label" style="display: contents;" data-expectedrole="navigation" data-expectedlabel="label" data-testname="div with role navigation, aria-label and display: contents has navigation role" class="ex-role-and-label">x</div> 144 <div role="complementary" aria-label="label" style="display: contents;" data-expectedrole="complementary" data-expectedlabel="label" data-testname="div with role complementary, aria-label and display: contents has complementary role" class="ex-role-and-label">x</div> 145 <div role="main" style="display: contents;" data-expectedrole="main" data-testname="div with role main and display: contents has main role" class="ex-role">x</div> 146 <div role="contentinfo" style="display: contents;" data-expectedrole="contentinfo" data-testname="div with role contentinfo and display: contents has contentinfo role" class="ex-role">x</div> 147 <div role="form" aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="div with role form, aria-label and display: contents has form role" class="ex-role-and-label">x</div> 148 <div role="search" aria-label="label" style="display: contents;" data-expectedrole="search" data-expectedlabel="label" data-testname="div with role search and display: contents has search role" class="ex-role-and-label">x</div> 149 <div role="region" aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="div with role region, aria-label and display: contents has region role" class="ex-role-and-label">x</div> 150 151 <!-- Links --> 152 <a href="#" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="link with display: contents has link role" class="ex-role-and-label">x</a> 153 <a href="#" role="link" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="link with explicit link role and display: contents has link role" class="ex-role-and-label">x</a> 154 <div role="link" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="div with link role and display: contents has link role" class="ex-role-and-label">x</div> 155 <div role="link" tabindex="0" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="div with link role, tabindex=0 and display: contents has link role" class="ex-role-and-label">x</div> 156 157 <!-- Lists --> 158 <ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents (child li has display: contents) has list role" class="ex-role"> 159 <li style="display: contents;" data-expectedrole="listitem" data-testname="li as child of ul with role list, both with display: contents, has listitem role" class="ex-role">x</li> 160 <li>y</li> 161 </ul> 162 163 <ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents has list role" class="ex-role"> 164 <li>x</li> 165 <li data-expectedrole="listitem" data-testname="li, as child of ul with role list and display: contents, has listitem role" class="ex-role">y</li> 166 </ul> 167 168 <ul role="list"> 169 <li>x</li> 170 <li style="display: contents;" data-expectedrole="listitem" data-testname="li with display: contents, as child of ul with role list, has listitem role" class="ex-role">y</li> 171 </ul> 172 173 <ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role (child li has display: contents)" class="ex-role"> 174 <li style="display: contents;" data-expectedrole="listitem" data-testname="li as child of ol with role list, both with display: contents, has listitem role" class="ex-role">x</li> 175 <li>y</li> 176 </ol> 177 178 <ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role" class="ex-role"> 179 <li>x</li> 180 <li data-expectedrole="listitem" data-testname="li, as child of ol with role list and display: contents, has listitem role" class="ex-role">y</li> 181 </ol> 182 183 <ol role="list"> 184 <li>x</li> 185 <li style="display: contents;" data-expectedrole="listitem" data-testname="li with display: contents, as child of ol with role list, has listitem role" class="ex-role">y</li> 186 </ol> 187 188 <div role="list" style="display: contents;" data-expectedrole="list" data-testname="div with list role and display: contents has list role" class="ex-role"> 189 <div role="listitem" data-expectedrole="listitem" data-testname="div with listitem role, as child of div with display: contents, has listitem role" class="ex-role">x</div> 190 <div>y</div> 191 </div> 192 193 <div role="list" style="display: contents;" data-expectedrole="list" data-testname="div with list role and display: contents has list role (child div with listitem role has display: contents)" class="ex-role"> 194 <div>x</div> 195 <div role="listitem" style="display: contents;" data-expectedrole="listitem" data-testname="div with listitem role (as child of div with list role), both with display: contents, has listitem role" class="ex-role">y</div> 196 </div> 197 198 <div role="list"> 199 <div>x</div> 200 <div role="listitem" style="display: contents;" data-expectedrole="listitem" data-testname="div with listitem role with display: contents, as child of div with list role, has listitem role" class="ex-role">y</div> 201 </div> 202 203 <!-- Lists: description/definition lists -> wpt/html-aam/roles.html --> 204 205 <!-- Tables (including grids/treegrids) --> 206 <table role="table" style="display: contents;" data-expectedrole="table" data-testname="table with role table and display: contents has table role" class="ex-role"> 207 <thead> 208 <tr style="display: contents;" data-expectedrole="row" data-testname="tr in table with role table and display: contents has row role" class="ex-role"> 209 <th style="display: contents;" data-expectedrole="columnheader" data-testname="td within tr both with display: contents, in table with role table and display: contents, has columnheader role" class="ex-role">x</th> 210 <th>x</th> 211 </tr> 212 </thead> 213 <tbody> 214 <tr> 215 <td style="display: contents;" data-expectedrole="cell" data-testname="td within tr in table with role table, all with display: contents, has cell role" class="ex-role">x</td> 216 <td>x</td> 217 </tr> 218 </tbody> 219 </table> 220 221 <div role="table" style="display: contents;" data-expectedrole="table" data-testname="div with role table with display: contents has table role" class="ex-role"> 222 <div role="rowgroup" style="display: contents;" data-expectedrole="rowgroup" data-testname="div with role rowgroup in div with role table, both with display: contents, has rowgroup role" class="ex-role"> 223 <div role="row"> 224 <div role="columnheader" style="display: contents;" data-expectedrole="columnheader" data-testname="div with role columnheader with display: contents, in div with role rowgroup within div with table role both with display: contents, has columnheader role" class="ex-role">x</div> 225 <div role="columnheader">x</div> 226 </div> 227 </div> 228 <div role="rowgroup"> 229 <div role="row"> 230 <div role="cell">x</div> 231 <div role="cell">x</div> 232 </div> 233 </div> 234 </div> 235 236 <table role="grid" style="display: contents;" data-expectedrole="grid" data-testname="table with role grid and display: contents has grid role"> 237 <thead> 238 <tr style="display: contents;" data-expectedrole="row" data-testname="tr within table with role grid, both with display: contents, has row role"> 239 <th style="display: contents;" data-expectedrole="columnheader" data-testname="th within table with role grid, both with display: contents, has columnheader role" class="ex-role">x</th> 240 <th>x</th> 241 </tr> 242 </thead> 243 <tbody> 244 <tr> 245 <td style="display: contents;" data-expectedrole="gridcell" data-testname="td within table with role grid, both with display: contents, has gridcell role" class="ex-role">x</td> 246 <td>x</td> 247 </tr> 248 </tbody> 249 </table> 250 251 <div role="grid" style="display: contents;" data-expectedrole="grid" data-testname="div with role grid with display: contents has grid role" class="ex-role"> 252 <div role="rowgroup" style="display: contents;" data-expectedrole="rowgroup" data-testname="div with role rowgroup in div with role grid, both with display: contents, has rowgroup role" class="ex-role"> 253 <div role="row"> 254 <div role="columnheader" style="display: contents;" data-expectedrole="columnheader" data-testname="div with role columnheader with display: contents, in div with role rowgroup within div with grid role both with display: contents, has rowgroup role" class="ex-role">x</div> 255 <div role="columnheader">x</div> 256 </div> 257 </div> 258 <div role="rowgroup"> 259 <div role="row"> 260 <div role="gridcell"></div> 261 <div role="gridcell" style="display: contents;" data-expectedrole="gridcell" data-testname="div with gridcell role and display: contents, within div with role row contained in a div with role grid both with display: contents, has gridcell role" class="ex-role">x</div> 262 </div> 263 </div> 264 </div> 265 266 <table role="grid" tabindex="0" style="display: contents;" data-expectedrole="grid" data-testname="div with role grid, tabindex=0 and display: contents has grid role" > 267 <thead> 268 <tr> 269 <th>x</th> 270 <th>x</th> 271 </tr> 272 </thead> 273 <tbody> 274 <tr> 275 <td>x</td> 276 <td>x</td> 277 </tr> 278 </tbody> 279 </table> 280 281 <table role="treegrid" style="display: contents;" data-expectedrole="treegrid" data-testname="table with role treegrid and display: contents has treegrid role" class="ex-role"></table> 282 <div role="treegrid" style="display: contents;" data-expectedrole="treegrid" data-testname="div with role treegrid and display: contents has treegrid role" class="ex-role"></div> 283 284 <ul role="tree" style="display: contents;" data-expectedrole="tree" data-testname="ul with role tree and display: contents has tree role" class="ex-role"> 285 <li role="treeitem" aria-expanded="true" style="display: contents;" data-expectedrole="treeitem" data-testname="li with role treeitem and display: contents, within ul with role tree and display: contents, has treeitem role" class="ex-role"> 286 <span>x</span> 287 <ul role="group"> 288 <li role="treeitem" aria-expanded="false" style="display: contents;" data-expectedrole="treeitem" data-testname="li with role treeitem and display: contents, within ul with role=group (within ul with role tree and display: contents), has treeitem role" class="ex-role"> 289 <span>x</span> 290 </li> 291 </ul> 292 </li> 293 </ul> 294 295 <script> 296 AriaUtils.verifyRolesBySelector(".ex-role"); 297 AriaUtils.verifyRolesAndLabelsBySelector(".ex-role-and-label"); 298 AriaUtils.verifyGenericRolesBySelector(".ex-generic"); 299 </script> 300 301 </body> 302 </html>