comp_name_from_content.html (24123B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Name Comp: Name From Content</title> 5 <meta charset="utf-8"> 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 <style type="text/css"> 13 14 /* 15 16 Since the AccName spec is in flux about whitespace joiners, and the implementations don't match, 17 normalize the whitespace (with extra leading/trailing) space. 18 19 No point in having the same in-flux spec change cause failures the remaining unrelated tests. 20 21 See more here: 22 https://github.com/w3c/accname/issues/205 23 https://github.com/w3c/accname/projects/1#card-42288231 24 25 */ 26 27 .alt-counter::before { 28 counter-set: cnt 5051; 29 content: "" / counter(cnt); 30 } 31 .multi-alt-counter { 32 counter-reset: multi_alt 10; 33 } 34 .multi-alt-counter span::before { 35 counter-increment: multi_alt 1; 36 content: "" / counter(multi_alt) " "; 37 } 38 .multi-alt-counter span:nth-child(2n)::before { 39 counter-increment: multi_alt 2; 40 } 41 .simple-before::before { 42 content: " before "; /* [sic] leading and trailing space */ 43 margin:0 0.1em; 44 } 45 .simple-after::after { 46 content: " after "; /* [sic] leading and trailing space */ 47 margin:0 0.1em; 48 } 49 .no-space::before, .no-space::after { 50 content: "nospace"; /* [sic] Unlike the others, NO extra leading/trailing space here. */ 51 } 52 .simple-before:dir(rtl)::before { 53 content: " من قبل "; /* [sic] leading and trailing space */ 54 } 55 .simple-after:dir(rtl)::after { 56 content: " بعد "; /* [sic] leading and trailing space */ 57 } 58 .fallback-before::before { 59 content: " before "; /* [sic] leading and trailing space */ 60 content: " before " / " alt-before "; /* Override the previous line for engines that support the Alternative Text syntax. */ 61 } 62 .fallback-after::after { 63 content: " after "; /* [sic] leading and trailing space */ 64 content: " after " / " alt-after "; /* Override the previous line for engines that support the Alternative Text syntax. */ 65 } 66 .fallback-before-empty::before { 67 content: "before" / ""; 68 } 69 .fallback-before-image-empty::before { 70 content: "before " url(/images/blue.png) / ""; 71 } 72 .fallback-before-mixed::before { 73 content: " before "; /* [sic] leading and trailing space */ 74 content: " before " / " start " attr(data-alt-text-before) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */ 75 } 76 .fallback-after-mixed::after { 77 content: " after "; /* [sic] leading and trailing space */ 78 content: " after " / " start " attr(data-alt-text-after) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */ 79 } 80 .block > span { 81 display: block; 82 margin: 0 0.1em; 83 } 84 .iblock > span { 85 display: inline-block; 86 margin: 0 0.1em; 87 } 88 89 </style> 90 </head> 91 <body> 92 93 <p>Tests the <a href="https://w3c.github.io/accname/#comp_name_from_content">#comp_name_from_content</a> portions of the AccName <em>Name Computation</em> algorithm.</p> 94 95 <p>This series of tests exercises the button, heading, and link elements, because each have different characteristics worthy of testing in each of the name computation algorithm scenarios:</p> 96 <ul> 97 <li>button is a leaf node with sub-level elements presentational.</li> 98 <li>heading is block level, and can contain sub-level interactives like links.</li> 99 <li>link (a[href]) is an interactive inline element that can include non-presentational descendants.</li> 100 </ul> 101 102 <h1>ARIA roles, inline</h1> 103 <span tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, inline" class="ex">label</span><br> 104 <span tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, inline" class="ex">label</span><br> 105 <span tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, inline" class="ex">label</span><br> 106 <br> 107 108 <h1>ARIA roles, block</h1> 109 <div tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, block" class="ex">label</div> 110 <div tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, block" class="ex">label</div> 111 <div tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, block" class="ex">label</div> 112 <br> 113 114 <h1>simple</h1> 115 <button data-expectedlabel="label" data-testname="button name from content" class="ex">label</button><br> 116 <h3 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h3> 117 <a href="#" data-expectedlabel="label" data-testname="link name from content" class="ex">label</a><br> 118 <br> 119 120 <h1>alt counter with ::before</h1> 121 <button data-expectedlabel="5051 label" data-testname="button with alt counter on ::before" class="ex alt-counter">label</button><br> 122 <h3 data-expectedlabel="5051 label" data-testname="heading with alt counter on ::before" class="ex alt-counter">label</h3> 123 <a href="#" data-expectedlabel="5051 label" data-testname="link with alt counter on ::before" class="ex alt-counter">label</a><br> 124 <br> 125 126 <h1>multiple alt counters with varying increments</h1> 127 <button data-expectedlabel="11 alpha 13 beta 14 gamma" data-testname="button with multiple alt counters and counter increments" class="ex multi-alt-counter"><span>alpha</span> <span>beta</span> <span>gamma</span></button><br> 128 <h3 data-expectedlabel="11 alpha 13 beta 14 gamma" data-testname="heading with multiple alt counters and counter increments" class="ex multi-alt-counter"><span>alpha</span> <span>beta</span> <span>gamma</span></h3> 129 <a href="#" data-expectedlabel="11 alpha 13 beta 14 gamma" data-testname="link with multiple alt counters and counter increments" class="ex multi-alt-counter"><span>alpha</span> <span>beta</span> <span>gamma</span></a><br> 130 <br> 131 132 <h1>simple with ::before</h1> 133 <button data-expectedlabel="before label" data-testname="button name from content with ::before" class="ex simple-before">label</button><br> 134 <h3 data-expectedlabel="before label" data-testname="heading name from content with ::before" class="ex simple-before">label</h3> 135 <a href="#" data-expectedlabel="before label" data-testname="link name from content with ::before" class="ex simple-before">label</a><br> 136 <br> 137 138 <h1>simple with ::after</h1> 139 <button data-expectedlabel="label after" data-testname="button name from content with ::after" class="ex simple-after">label</button><br> 140 <h3 data-expectedlabel="label after" data-testname="heading name from content with ::after" class="ex simple-after">label</h3> 141 <a href="#" data-expectedlabel="label after" data-testname="link name from content with ::after" class="ex simple-after">label</a><br> 142 <br> 143 144 <h1>simple with ::before and ::after</h1> 145 <button data-expectedlabel="before label after" data-testname="button name from content with ::before and ::after" class="ex simple-before simple-after">label</button><br> 146 <h3 data-expectedlabel="before label after" data-testname="heading name from content with ::before and ::after" class="ex simple-before simple-after">label</h3> 147 <a href="#" data-expectedlabel="before label after" data-testname="link name from content with ::before and ::after" class="ex simple-before simple-after">label</a><br> 148 <br> 149 150 <h1>no space joiners ::before and ::after</h1> 151 <button data-expectedlabel="nospacelabelnospace" data-testname="button name from content no space joiners ::before and ::after" class="ex no-space">label</button><br> 152 <h3 data-expectedlabel="nospacelabelnospace" data-testname="heading name from content no space joiners ::before and ::after" class="ex no-space">label</h3> 153 <a href="#" data-expectedlabel="nospacelabelnospace" data-testname="link name from content no space joiners ::before and ::after" class="ex no-space">label</a><br> 154 <br> 155 156 <h1>Arabic right-to-left (RTL) with ::before and ::after</h1> 157 <div dir="rtl" lang="ar"> 158 <button data-expectedlabel="من قبل اسم بعد" data-testname="button name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</button><br> 159 <h3 data-expectedlabel="من قبل اسم بعد" data-testname="heading name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</h3> 160 <a href="#" data-expectedlabel="من قبل اسم بعد" data-testname="link name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</a><br> 161 </div> 162 <br> 163 164 <h1><a href="https://drafts.csswg.org/css-content/#alt">Alternative Text for CSS content (previously `alt:`)</a> in pseudo-elements</h1> 165 <p>rendered text should be "before label after"</p> 166 <p>accessibility label should be "alt-before label alt-after"</p> 167 <button data-expectedlabel="alt-before label alt-after" data-testname="button name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</button><br> 168 <h3 data-expectedlabel="alt-before label alt-after" data-testname="heading name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</h3> 169 <a href="#" data-expectedlabel="alt-before label alt-after" data-testname="link name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</a><br> 170 <br> 171 172 <h1><a href="https://drafts.csswg.org/css-content/#alt">Mixed Alternative Text (attr() and strings) for CSS content (previously `alt:`)</a> in pseudo-elements</h1> 173 <p>rendered text should be "before label after"</p> 174 <p>accessibility label should be "start alt-before end label start alt-after end"</p> 175 <button data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="button name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</button><br> 176 <h3 data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="heading name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</h3> 177 <a href="#" data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="link name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</a><br> 178 <br> 179 180 <h1>Empty alternative text for CSS content in pseudo-elements when applied to primitive appearance form controls</h1> 181 <p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text" class="ex fallback-before-empty" type=radio style=appearance:none> 182 <p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text for an image" class="ex fallback-before-image-empty" type=radio style=appearance:none> 183 184 <h1>simple w/ for each child</h1> 185 <button data-expectedlabel="one two three" data-testname="button name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></button><br> 186 <h3 data-expectedlabel="one two three" data-testname="heading name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></h3> 187 <a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></a><br> 188 <br> 189 190 <h1>simple for each child with image</h1> 191 <button data-expectedlabel="one two three" data-testname="button name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></button><br> 192 <h3 data-expectedlabel="one two three" data-testname="heading name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></h3> 193 <a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></a><br> 194 <br> 195 196 197 <h1>simple for each child with extra nesting containing image</h1> 198 <button data-expectedlabel="one two three four" data-testname="button name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></button><br> 199 <h3 data-expectedlabel="one two three four" data-testname="heading name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></h3> 200 <a href="#" data-expectedlabel="one two three four" data-testname="link name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></a><br> 201 <br> 202 203 <h1>heading with nested button with nested image</h1> 204 <h3 data-expectedlabel="heading button image button heading" data-testname="heading name from content for each child including nested button with nested image" class="ex"> 205 heading 206 <button> 207 button 208 <img alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 209 button 210 </button> 211 heading 212 </h3> 213 214 <h1>heading with nested link with nested image</h1> 215 <h3 data-expectedlabel="heading link image link heading" data-testname="heading name from content for each child including nested link with nested image" class="ex"> 216 heading 217 <a href="#"> 218 link 219 <img alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 220 link 221 </a> 222 heading 223 </h3> 224 225 <h1>heading with nested link with nested image using aria-label</h1> 226 <h3 data-expectedlabel="heading link aria-label heading" data-testname="heading name from content for each child including nested link using aria-label with nested image" class="ex"> 227 heading 228 <a href="#" aria-label="link aria-label"><!-- should skip the other link text --> 229 ignored link text 230 <img id="nested_image_label_1" alt="ignored image alt" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 231 ignored link text 232 </a> 233 heading 234 </h3> 235 236 <h1>heading with nested link with nested image using aria-labelledby</h1> 237 <h3 data-expectedlabel="heading image heading" data-testname="heading name from content for each child including nested link using aria-labelledby with nested image" class="ex"> 238 heading 239 <a href="#" aria-labelledby="nested_image_label1"><!-- should skip the other link text --> 240 ignored link text 241 <img id="nested_image_label1" alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 242 ignored link text 243 </a> 244 heading 245 </h3> 246 247 <h1>heading with two nested links referencing image using aria-labelledby</h1> 248 <h3 data-expectedlabel="image link2 link3" data-testname="heading name from content for each child including two nested links using aria-labelledby with nested image" class="ex"> 249 <a href="#" aria-labelledby="nested_image_label2"> 250 link1<!-- this text is skipped because of aria-labelledby --> 251 </a> 252 <a href="#" data-expectedlabel="link2 image link3" data-testname="link name from content for each child including nested image (referenced elsewhere via labelledby)" class="ex"> 253 link2 254 <img id="nested_image_label2" alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 255 <!-- image skipped in this link (when computing heading text) because it was already referenced by the first link within this heading label recursion cycle. --> 256 <!-- but image not skipped when computing the text of the link itself since it has not been referenced in that context --> 257 link3 258 </a> 259 </h3> 260 261 262 <!-- Note: The following test is out of line with the spec, but matching two out of three implementations at the time of writing, and spec changes are expeected. --> 263 <!-- See details in https://github.com/w3c/accname/issues/205 --> 264 <!-- Final spec resolution will be addressed in AccName Whitespace Project: https://github.com/w3c/accname/projects/1#card-42288231 --> 265 <h1>simple w/ for each child (w/o spaces and display:inline)</h1> 266 <button data-expectedlabel="onetwothree" data-testname="button name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></button><br> 267 <h3 data-expectedlabel="onetwothree" data-testname="heading name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></h3> 268 <a href="#" data-expectedlabel="onetwothree" data-testname="link name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></a><br> 269 <br> 270 271 <h1>simple w/ for each child (w/o spaces and display:block)</h1> 272 <button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></button><br> 273 <h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></h3> 274 <a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></a><br> 275 <br> 276 277 <h1>simple w/ for each child (w/o spaces and display:inline block)</h1> 278 <button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></button><br> 279 <h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></h3> 280 <a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></a><br> 281 <br> 282 283 <h1 data-expectedlabel="Call us" data-testname="heading name from content with text-transform:none" class="ex" style="text-transform:none;">Call us</h1> 284 <h1 data-expectedlabel="CALL US" data-testname="heading name from content with text-transform:uppercase" class="ex" style="text-transform:uppercase;">Call us</h1> 285 <h1 data-expectedlabel="Call Us" data-testname="heading name from content with text-transform:capitalize" class="ex" style="text-transform:capitalize;">Call us</h1> 286 <h1 data-expectedlabel="call us" data-testname="heading name from content with text-transform:lowercase" class="ex" style="text-transform:lowercase;">Call us</h1> 287 288 <!-- “びょういんのかんじゃサービス” means “Hospital patient services” --> 289 <!-- text-transform:full-size-kana risks changing the heading’s meaning --> 290 <!-- by transforming the following words: --> 291 <!-- 1. びょういん (byōin = hospital) into びよういん (biyōin = beauty parlor) --> 292 <!-- 2. かんじゃ (kanja = patient) into かんじや (kanjiya = [no meaning]) --> 293 <h1>heading which visually transforms <span lang="ja">びょういん</span> (hospital) to 294 <span lang="ja">びよういん</span> (beauty parlor) using CSS 295 <code>text-transform:full-size-kana</code></h1> 296 <h3 297 lang="ja" 298 data-expectedlabel="びょういんのかんじゃサービス" 299 data-testname="heading name from content with text-transform:full-size-kana" 300 class="ex" 301 style="text-transform:full-size-kana;" 302 >びょういんのかんじゃサービス</h3> 303 304 <!-- Tests `Name from Each Child` edge case failures with an embedded `term` as a child element role. --> 305 <!-- https://w3c.github.io/accname/#comp_name_from_content_for_each_child --> 306 307 <h2>Elements with implicit button, heading, link roles containing element with 308 implicit term role</h2> 309 <button 310 data-expectedlabel="this is an example" 311 data-testname="implicit button name from content containing a dfn element" 312 class="ex iblock" 313 ><span>this is an </span><dfn>example</dfn></button> 314 <h3 315 data-expectedlabel="this is an example" 316 data-testname="implicit heading name from content containing a dfn element" 317 class="ex iblock" 318 ><span>this is an </span><dfn>example</dfn></h3> 319 <a 320 href="#" 321 data-expectedlabel="this is an example" 322 data-testname="implicit link name from content containing a dfn element" 323 class="ex iblock" 324 ><span>this is an </span><dfn>example</dfn></a> 325 326 <h2>Elements with implicit button, heading, link roles containing element with 327 explicit term role</h2> 328 <button 329 data-expectedlabel="this is an example" 330 data-testname="implicit button name from content containing an element with explicit term role" 331 class="ex iblock" 332 ><span>this is an </span><span role="term">example</span></button> 333 <h3 334 data-expectedlabel="this is an example" 335 data-testname="implicit heading name from content containing an element with explicit term role" 336 class="ex iblock" 337 ><span>this is an </span><span role="term">example</span></h3> 338 <a 339 href="#" 340 data-expectedlabel="this is an example" 341 data-testname="implicit link name from content containing an element explicit with term role" 342 class="ex iblock" 343 ><span>this is an </span><span role="term">example</span></a> 344 345 <h2>Elements with explicit button, heading, link roles containing element with 346 implicit term role</h2> 347 <div 348 role="button" 349 tabindex="0" 350 data-expectedlabel="this is an example" 351 data-testname="explicit button name from content containing a dfn element" 352 class="ex iblock" 353 ><span>this is an </span><dfn>example</dfn></div> 354 <div 355 role="heading" 356 data-expectedlabel="this is an example" 357 data-testname="explicit heading name from content containing a dfn element" 358 class="ex iblock" 359 ><span>this is an </span><dfn>example</dfn></div> 360 <div 361 role="link" 362 tabindex="0" 363 data-expectedlabel="this is an example" 364 data-testname="explicit link name from content containing a dfn element" 365 class="ex iblock" 366 ><span>this is an </span><dfn>example</dfn></div> 367 368 <h2>Elements with explicit button, heading, link roles containing element with 369 explicit term role</h2> 370 <div 371 role="button" 372 tabindex="0" 373 data-expectedlabel="this is an example" 374 data-testname="explicit button name from content containing an element explicit with term role" 375 class="ex iblock" 376 ><span>this is an </span><span role="term">example</span></div> 377 <div 378 role="heading" 379 data-expectedlabel="this is an example" 380 data-testname="explicit heading name from content containing an element explicit with term role" 381 class="ex iblock" 382 ><span>this is an </span><span role="term">example</span></div> 383 <div 384 role="link" 385 tabindex="0" 386 data-expectedlabel="this is an example" 387 data-testname="explicit link name from content containing an element explicit with term role" 388 class="ex iblock" 389 ><span>this is an </span><span role="term">example</span></div> 390 391 <script> 392 AriaUtils.verifyLabelsBySelector(".ex"); 393 </script> 394 </body> 395 </html>