comp_embedded_control.html (7606B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Name Comp: Embedded Control</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <body> 13 14 <p>Tests the <a href="https://w3c.github.io/accname/#comp_embedded_control">#comp_embedded_control</a> portions of the AccName <em>Name Computation</em> algorithm.</p> 15 16 <!-- Textfield (textbox) --> 17 <label> 18 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded textfield" class="ex"> 19 Flash the screen 20 <input value="3" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded textfield inside checkbox label" class="ex"> times 21 </label> 22 <br><br> 23 24 <!-- HTML select:not([size]) element renders as menu button (on Mac) or single-row listbox (on Windows/Linux) --> 25 <label> 26 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded select:not([size])" class="ex"> 27 Flash the screen 28 <select aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded select:not([size]) inside checkbox label" class="ex"> 29 <option value="1">1</option> 30 <option value="2">2</option> 31 <option value="3" selected>3</option> 32 <option value="4">4</option> 33 <option value="5">5</option> 34 </select> 35 times 36 </label> 37 <br><br> 38 39 <!-- HTML select[size] element renders as multi-row listbox --> 40 <label> 41 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded select[size]" class="ex"> 42 Flash the screen 43 <select size=5 aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded select[size] inside checkbox label" class="ex"> 44 <option value="1">1</option> 45 <option value="2">2</option> 46 <option value="3" selected>3</option> 47 <option value="4">4</option> 48 <option value="5">5</option> 49 </select> 50 times 51 </label> 52 <br><br> 53 54 <!-- ARIA combobox examples (not interactive) --> 55 <label> 56 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded combobox (input[type=text])" class="ex"> 57 Flash the screen 58 <input role="combobox" value="3" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded combobox (input[type=text]) inside checkbox label" class="ex"> times 59 </label> 60 <br><br> 61 <label> 62 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded combobox (span)" class="ex"> 63 Flash the screen 64 <span role="combobox" tabindex="0" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded combobox (span) inside checkbox label" class="ex">3</span> times 65 </label> 66 <br><br> 67 <label> 68 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded combobox (div)" class="ex"> 69 Flash the screen 70 <div style="display: inline-block;" role="combobox" tabindex="0" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded combobox (div) inside checkbox label" class="ex">3</div> times 71 </label> 72 <br><br> 73 <!-- Todo: we may want another combobox example using aria-activedescendant? --> 74 75 76 <!-- ARIA listbox examples (not interactive) --> 77 <label> 78 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded listbox>option[aria-selected=true]" class="ex"> 79 Flash the screen 80 <ul role="listbox" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded listbox>option[aria-selected=true] inside checkbox label" class="ex" style="padding:0; list-style:none; border: solid 1px gray; width: 15em; display: inline-block;"> 81 <li role="option" tabindex="-1" style="padding:0.2em 0.8em; list-style:none;">1</li> 82 <li role="option" tabindex="-1" style="padding:0.2em 0.8em; list-style:none;">2</li> 83 <li role="option" tabindex="0" aria-selected="true" style="padding:0.2em 0.8em; list-style:none; color: white; background-color: #555;">3</li> 84 <li role="option" tabindex="-1" style="padding:0.2em 0.8em; list-style:none;">4</li> 85 <li role="option" tabindex="-1" style="padding:0.2em 0.8em; list-style:none;">5</li> 86 </ul> times 87 </label> 88 <br><br> 89 90 91 <!-- Ranges: HTML native and ARIA sliders and steppers (valuetext, valuenow, host language specific) --> 92 <label> 93 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded input[type=range]" class="ex"> 94 Flash the screen 95 <input type ="range" min="1" max="5" value="3" step="1" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded input[type=range] inside checkbox label" class="ex"> times 96 </label> 97 <br><br> 98 <label> 99 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded input[type=number]" class="ex"> 100 Flash the screen 101 <input type ="number" min="1" max="5" value="3" step="1" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded input[type=number] inside checkbox label" class="ex"> times 102 </label> 103 <br><br> 104 <label> 105 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded ARIA slider (aria-valuenow)" class="ex"> 106 Flash the screen 107 <span tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded ARIA slider (aria-valuenow) inside checkbox label" class="ex">3.0</span> times 108 </label> 109 <br><br> 110 <label> 111 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded ARIA slider (aria-valuetext)" class="ex"> 112 Flash the screen 113 <span tabindex="0" role="slider" aria-valuemin="1.0" aria-valuemax="5.0" aria-valuenow="3.0" aria-valuetext="3" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded ARIA slider (aria-valuetext) inside checkbox label" class="ex">3.0</span> times 114 </label> 115 <br><br> 116 <label> 117 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded ARIA spinbutton (aria-valuenow)" class="ex"> 118 Flash the screen 119 <span tabindex="0" role="spinbutton" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded ARIA spinbutton (aria-valuenow) inside checkbox label" class="ex">3.0</span> times 120 </label> 121 <br><br> 122 <label> 123 <input type="checkbox" data-expectedlabel="Flash the screen 3 times" data-testname="checkbox label with embedded ARIA spinbutton (aria-valuetext)" class="ex"> 124 Flash the screen 125 <span tabindex="0" role="spinbutton" aria-valuemin="1.0" aria-valuemax="5.0" aria-valuenow="3.0" aria-valuetext="3" aria-label="number of times" data-expectedlabel="number of times" data-testname="label of embedded ARIA spinbutton (aria-valuetext) inside checkbox label" class="ex">3.0</span> times 126 </label> 127 <br><br> 128 129 130 <script> 131 AriaUtils.verifyLabelsBySelector(".ex"); 132 </script> 133 </body> 134 </html>