comp_host_language_label.html (21006B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Name Comp: Host Language Label</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 <h1>AccName: Host Language Label Tests</h1> 15 <p>Tests the <a href="https://w3c.github.io/accname/#comp_host_language_label">#comp_host_language_label</a> portions of the AccName <em>Name Computation</em> algorithm.</p> 16 17 <h2>HTML input with value, alt, etc.</h2> 18 <input type="button" value="button label" data-expectedlabel="button label" data-testname="html: input[type=button]" class="ex"> 19 <input type="image" alt="image input label" data-expectedlabel="image input label" data-testname="html: input[type=image]" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 20 <input type="reset" value="reset label" data-expectedlabel="reset label" data-testname="html: input[type=reset]" class="ex"> 21 <input type="submit" value="submit label" data-expectedlabel="submit label" data-testname="html: input[type=submit]" class="ex"> 22 23 24 <h2>HTML input label/for</h2> 25 <!-- above: input[type=button] --> 26 <label for="cb">checkbox label</label><input id="cb" type="checkbox" data-expectedlabel="checkbox label" data-testname="html: label[for] input[type=checkbox]" class="ex"><br> 27 <label for="cbv">checkbox label with non-empty value</label><input id="cbv" type="checkbox" data-expectedlabel="checkbox label with non-empty value" data-testname="html: label[for] input[type=checkbox][value='test']" class="ex" value="test"><br> 28 <label for="cbc">checkbox label checked</label><input id="cbc" type="checkbox" data-expectedlabel="checkbox label checked" data-testname="html: label[for] input[type=checkbox][checked]" class="ex" checked><br> 29 <label for="cbcv">checkbox label checked with non-empty value</label><input id="cbcv" type="checkbox" data-expectedlabel="checkbox label checked with non-empty value" data-testname="html: label[for] input[type=checkbox][checked][value='test']" class="ex" value="test" checked><br> 30 <label for="co">color label</label><input id="co" type="color" data-expectedlabel="color label" data-testname="html: label[for] input[type=color]" class="ex"><br> 31 <label for="cov">color label with non-empty value</label><input id="cov" type="color" data-expectedlabel="color label with non-empty value" data-testname="html: label[for] input[type=color][value='#999999']" class="ex" value="#999999"><br> 32 <label for="da">date label</label><input id="da" type="date" data-expectedlabel="date label" data-testname="html: label[for] input[type=date]" class="ex"><br> 33 <label for="dav">date label with non-empty value</label><input id="dav" type="date" data-expectedlabel="date label with non-empty value" data-testname="html: label[for] input[type=date][value='2025-01-01']" class="ex" value="2025-01-01"><br> 34 <label for="dtl">datetime-local label</label><input id="dtl" type="date" data-expectedlabel="datetime-local label" data-testname="html: label[for] input[type=datetime-local]" class="ex"><br> 35 <label for="dtlv">datetime-local label with non-empty value</label><input id="dtlv" type="date" data-expectedlabel="datetime-local label with non-empty value" data-testname="html: label[for] input[type=datetime-local][value='2025-01-01T00:01']" class="ex" value="2025-01-01T00:01"><br> 36 <label for="em">email label</label><input id="em" type="email" data-expectedlabel="email label" data-testname="html: label[for] input[type=email]" class="ex"><br> 37 <label for="emv">email label with non-empty value</label><input id="emv" type="email" data-expectedlabel="email label with non-empty value" data-testname="html: label[for] input[type=email][value='test@test.com']" class="ex" value="test@test.com"><br> 38 39 <!-- todo: results for input[type=file] currently differ in all engines --> 40 <!-- 41 <label for="fi">file label</label><input id="fi" type="file" data-expectedlabel="file label" data-testname="html: label[for] input[type=file]" class="ex"><br> 42 --> 43 44 <!-- skipped: input[type=hidden] for/id n/a --> 45 <!-- above: input[type=image] --> 46 <label for="mo">month label</label><input id="mo" type="month" data-expectedlabel="month label" data-testname="html: label[for] input[type=month]" class="ex"><br> 47 <label for="mov">month label with non-empty value</label><input id="mov" type="month" data-expectedlabel="month label with non-empty value" data-testname="html: label[for] input[type=month][value='2025-01']" class="ex" value="2025-01"><br> 48 <label for="n">number label</label><input id="n" type="number" data-expectedlabel="number label" data-testname="html: label[for] input[type=number]" class="ex"><br> 49 <label for="nv">number label with non-empty value</label><input id="nv" type="number" data-expectedlabel="number label with non-empty value" data-testname="html: label[for] input[type=number][value=2025]" class="ex" value="2025"><br> 50 <label for="pw">password label</label><input id="pw" type="password" data-expectedlabel="password label" data-testname="html: label[for] input[type=password]" class="ex"><br> 51 <label for="pwv">password label with non-empty value</label><input id="pwv" type="password" data-expectedlabel="password label with non-empty value" data-testname="html: label[for] input[type=password][value='test']" class="ex" value="test"><br> 52 <label for="ra">radio label</label><input id="ra" type="radio" data-expectedlabel="radio label" data-testname="html: label[for] input[type=radio]" class="ex"><br> 53 <label for="rav">radio label with non-empty value</label><input id="rav" type="radio" data-expectedlabel="radio label with non-empty value" data-testname="html: label[for] input[type=radio][value='test']" class="ex" value="test"><br> 54 <label for="rng">range label</label><input id="rng" type="range" data-expectedlabel="range label" data-testname="html: label[for] input[type=range]" class="ex"><br> 55 <label for="rngv">range label with non-empty value</label><input id="rngv" type="range" data-expectedlabel="range label with non-empty value" data-testname="html: label[for] input[type=range][min=0][max=10][value=5]" class="ex" min="0" max="10" value="5"><br> 56 <!-- input[type=reset] above --> 57 <label for="search">search label</label><input id="search" type="search" data-expectedlabel="search label" data-testname="html: label[for] input[type=search]" class="ex"><br> 58 <label for="searchv">search label with non-empty value</label><input id="searchv" type="search" data-expectedlabel="search label with non-empty value" data-testname="html: label[for] input[type=search][value='test']" class="ex" value="test"><br> 59 <!-- input[type=submit] above --> 60 <label for="tel">tel label</label><input id="tel" type="tel" data-expectedlabel="tel label" data-testname="html: label[for] input[type=tel]" class="ex"><br> 61 <label for="telv">tel label with non-empty value</label><input id="telv" type="tel" data-expectedlabel="tel label with non-empty value" data-testname="html: label[for] input[type=tel][value='123-45-678']" class="ex" value="123-45-678"><br> 62 <label for="t">textfield label</label><input id="t" type="text" data-expectedlabel="textfield label" data-testname="html: label[for] input[type=text]" class="ex"><br> 63 <label for="tv">textfield label with non-empty value</label><input id="tv" type="text" data-expectedlabel="textfield label with non-empty value" data-testname="html: label[for] input[type=text][value='test']" class="ex" value="test"><br> 64 <label for="time">time label</label><input id="time" type="time" data-expectedlabel="time label" data-testname="html: label[for] input[type=time]" class="ex"><br> 65 <label for="timev">time label with non-empty value</label><input id="timev" type="time" data-expectedlabel="time label with non-empty value" data-testname="html: label[for] input[type=time][value='00:01']" class="ex" value="00:01"><br> 66 <label for="url">url label</label><input id="url" type="url" data-expectedlabel="url label" data-testname="html: label[for] input[type=url]" class="ex"><br> 67 <label for="urlv">url label with non-empty value</label><input id="urlv" type="url" data-expectedlabel="url label with non-empty value" data-testname="html: label[for] input[type=url][value='https://www.w3.org']" class="ex" value="https://www.w3.org"><br> 68 <label for="week">week label</label><input id="week" type="week" data-expectedlabel="week label" data-testname="html: label[for] input[type=week]" class="ex"><br> 69 <label for="weekv">week label with non-empty value</label><input id="weekv" type="week" data-expectedlabel="week label with non-empty value" data-testname="html: label[for] input[type=week][value='2025-W01']" class="ex" value="2025-W01"><br> 70 71 72 <h2>HTML input label encapsulation</h2> 73 <!-- above: input[type=button] --> 74 <label><input type="checkbox" data-expectedlabel="checkbox label" data-testname="html: label input[type=checkbox] encapsulation" class="ex">checkbox label</label><br> 75 <label><input type="checkbox" data-expectedlabel="checkbox label with non-empty value" data-testname="html: label input[type=checkbox][value='test'] encapsulation" class="ex" value="test">checkbox label with non-empty value</label><br> 76 <label><input type="checkbox" data-expectedlabel="checkbox label checked" data-testname="html: label input[type=checkbox][checked] encapsulation" class="ex" checked>checkbox label checked</label><br> 77 <label><input type="checkbox" data-expectedlabel="checkbox label checked with non-empty value" data-testname="html: label input[type=checkbox][value='test'][checked] encapsulation" class="ex" value="test" checked>checkbox label checked with non-empty value</label><br> 78 <label><input type="color" data-expectedlabel="color label" data-testname="html: label input[type=color] encapsulation" class="ex">color label</label><br> 79 <label><input type="color" data-expectedlabel="color label with non-empty value" data-testname="html: label input[type=color][value='#999999'] encapsulation" class="ex" value="#999999">color label with non-empty value</label><br> 80 <label><input type="date" data-expectedlabel="date label" data-testname="html: label input[type=date] encapsulation" class="ex">date label</label><br> 81 <label><input type="date" data-expectedlabel="date label with non-empty value" data-testname="html: label input[type=date][value='2025-01-01'] encapsulation" class="ex" value="2025-01-01">date label with non-empty value</label><br> 82 <label><input type="datetime-local" data-expectedlabel="datetime-local label" data-testname="html: label input[type=datetime-local] encapsulation" class="ex">datetime-local label</label><br> 83 <label><input type="datetime-local" data-expectedlabel="datetime-local label with non-empty value" data-testname="html: label input[type=datetime-local][value='2025-01-01T00:01'] encapsulation" class="ex" value="2025-01-01T00:01">datetime-local label with non-empty value</label><br> 84 <label><input type="email" data-expectedlabel="email label" data-testname="html: label input[type=email] encapsulation" class="ex">email label</label><br> 85 <label><input type="email" data-expectedlabel="email label with non-empty value" data-testname="html: label input[type=email][value='test@test.com'] encapsulation" class="ex" value="test@test.com">email label with non-empty value</label><br> 86 87 <!-- todo: results for input[type=file] currently differ in all engines --> 88 <!-- 89 <label><input type="file" data-expectedlabel="file label" data-testname="html: label input[type=file] encapsulation" class="ex">file label</label><br> 90 --> 91 92 <!-- skipped: input[type=hidden] n/a --> 93 <!-- above: input[type=image] --> 94 <label><input type="month" data-expectedlabel="month label" data-testname="html: label input[type=month] encapsulation" class="ex">month label</label><br> 95 <label><input type="month" data-expectedlabel="month label with non-empty value" data-testname="html: label input[type=month][value='2025-01'] encapsulation" class="ex" value="2025-01">month label with non-empty value</label><br> 96 <label><input type="number" data-expectedlabel="number label" data-testname="html: label input[type=number] encapsulation" class="ex">number label</label><br> 97 <label><input type="number" data-expectedlabel="number label with non-empty value" data-testname="html: label input[type=number][value=1] encapsulation" class="ex" value="1">number label with non-empty value</label><br> 98 <label><input type="password" data-expectedlabel="password label" data-testname="html: label input[type=password] encapsulation" class="ex">password label</label><br> 99 <label><input type="password" data-expectedlabel="password label with non-empty value" data-testname="html: label input[type=password][value='test'] encapsulation" class="ex" value="test">password label with non-empty value</label><br> 100 <label><input type="radio" data-expectedlabel="radio label" data-testname="html: label input[type=radio] encapsulation" class="ex">radio label</label><br> 101 <label><input type="radio" data-expectedlabel="radio label with non-empty value" data-testname="html: label input[type=radio][value='test'] encapsulation" class="ex" value="test">radio label with non-empty value</label><br> 102 <label><input type="range" data-expectedlabel="range label" data-testname="html: label input[type=range] encapsulation" class="ex">range label</label><br> 103 <label><input type="range" data-expectedlabel="range label with non-empty value" data-testname="html: label input[type=range][value='5'][min='0'][max='10'] encapsulation" class="ex" min="0" max="10" value="5">range label with non-empty value</label><br> 104 <!-- above: input[type=reset] --> 105 <label><input type="search" data-expectedlabel="search label" data-testname="html: label input[type=search] encapsulation" class="ex">search label</label><br> 106 <label><input type="search" data-expectedlabel="search label with non-empty value" data-testname="html: label input[type=search][value='test'] encapsulation" class="ex" value="test">search label with non-empty value</label><br> 107 <!-- above: input[type=submit] --> 108 <label><input type="tel" data-expectedlabel="tel label" data-testname="html: label input[type=tel] encapsulation" class="ex">tel label</label><br> 109 <label><input type="tel" data-expectedlabel="tel label with non-empty value" data-testname="html: label input[type=tel][value='123-45-678'] encapsulation" class="ex" value="123-45-678">tel label with non-empty value</label><br> 110 <label><input type="text" data-expectedlabel="textfield label" data-testname="html: label[for] input[type=text] encapsulation" class="ex">textfield label</label><br> 111 <label><input type="text" data-expectedlabel="textfield label with non-empty value" data-testname="html: label[for] input[type=text][value='test'] encapsulation" class="ex" value="test">textfield label with non-empty value</label><br> 112 <label><input type="time" data-expectedlabel="time label" data-testname="html: label input[type=time] encapsulation" class="ex">time label</label><br> 113 <label><input type="time" data-expectedlabel="time label with non-empty value" data-testname="html: label input[type=time][value='00:01'] encapsulation" class="ex" value="00:01">time label with non-empty value</label><br> 114 <label><input type="url" data-expectedlabel="url label" data-testname="html: label input[type=url] encapsulation" class="ex">url label</label><br> 115 <label><input type="url" data-expectedlabel="url label with non-empty value" data-testname="html: label input[type=url][value='https://www.w3.org'] encapsulation" class="ex" value="https://www.w3.org">url label with non-empty value</label><br> 116 <label><input type="week" data-expectedlabel="week label" data-testname="html: label input[type=week] encapsulation" class="ex">week label</label><br> 117 <label><input type="week" data-expectedlabel="week label with non-empty value" data-testname="html: label input[type=week][value='2025-W01'] encapsulation" class="ex" value="2025-W01">week label with non-empty value</label><br> 118 119 120 <!-- skipped: skip textarea for v1 since all engines fail in different ways. need to verify label/textarea is expected. --> 121 <!-- 122 <h2>HTML textarea</h2> 123 <label for="ta">textarea label</label><textarea data-expectedlabel="textarea label" data-testname="html: label[for] textarea" class="ex"></textarea><br> 124 <label for="ta">textarea label<textarea data-expectedlabel="textarea label" data-testname="html: textarea encapsulation" class="ex"></textarea></label><br> 125 --> 126 127 128 <h2>HTML select</h2> 129 <!-- todo: select for/id --> 130 <label for="select">select label</label> 131 <select id="select" data-expectedlabel="select label" data-testname="html: select for/id" class="ex"> 132 <option>foo</option> 133 </select> 134 <br> 135 <!-- select encapsulation --> 136 <label> 137 select label 138 <select data-expectedlabel="select label" data-testname="html: select encapsulation" class="ex"> 139 <option>foo</option> 140 </select> 141 </label><br> 142 <!-- todo: select labeled by selected option. All engines currently fail in different ways. Not sure which is correct. --> 143 <!-- 144 <select data-expectedlabel="select label" data-testname="html: select w/selected option" class="ex"> 145 <option>foo</option> 146 <option selected>select label</option> 147 <option>bar</option> 148 </select> 149 <br> 150 --> 151 152 153 <h2>HTML img/picture</h2> 154 <!-- skipped: img:not([alt]) --> 155 <!-- skipped: img[alt=""] --> 156 <img alt="image label" data-expectedlabel="image label" data-testname="html: img[alt] (non-empty)" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 157 <picture> 158 <source srcset="#"> 159 <img alt="picture label" data-expectedlabel="picture label" data-testname="html: picture > img[alt] (non-empty)" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 160 </picture> 161 <!-- elsewhere: image map area alt -> ./fragile/area-alt.html --> 162 163 <img alt=" " data-expectedlabel="" data-testname="img[alt] with single space character as name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 164 <img alt=" " data-expectedlabel="" data-testname="img[alt] with single tab as name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 165 <img alt=" 166 " data-expectedlabel="" data-testname="img[alt] with new line as name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 167 <img alt=" " data-expectedlabel="" data-testname="img[alt] with single space character and tab as name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 168 <img alt=" " data-expectedlabel="" data-testname="img[alt] with form feed as name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 169 <img alt="foo bar" data-expectedlabel="foo bar" data-testname="img[alt] with interior single tab in the name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 170 <img alt="foo 171 bar" data-expectedlabel="foo bar" data-testname="img[alt] with interior new line in the name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 172 <img alt="foo bar" data-expectedlabel="foo bar" data-testname="img[alt] with interior single space and tab in the name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 173 <img alt="foo bar" data-expectedlabel="foo bar" data-testname="img[alt] with interior form feed in the name" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> 174 175 <h2>HTML fieldset/legend</h2> 176 <fieldset data-expectedlabel="fieldset legend label" data-testname="html: fieldset > legend" class="ex"> 177 <legend>fieldset legend label</legend> 178 <input type="text"><br> 179 </fieldset> 180 181 182 <h2>HTML table/caption</h2> 183 <table data-expectedlabel="table caption label" data-testname="html: table > caption" class="ex"> 184 <caption>table caption label</caption> 185 <tr><th>a</th><th>b</th><th>c</th></tr> 186 <tr><th>1</th><td>2</td><td>3</td></tr> 187 </table> 188 189 190 <!-- HTML-AAM: https://www.w3.org/TR/html-aam-1.0/#input-type-text-input-type-password-input-type-number-input-type-search-input-type-tel-input-type-email-input-type-url-and-textarea-element-accessible-name-computation --> 191 <h2>HTML input with multiple label/for</h2> 192 <label for="multi-label">textfield label 1</label> 193 <label for="multi-label">textfield label 2</label> 194 <input id="multi-label" type="text" data-expectedlabel="textfield label 1 textfield label 2" data-testname="html: multiple label elements[for]" class="ex"> 195 196 197 198 <!-- SVG: -> /svg-aam/name/ --> 199 200 201 <!-- todo: Ruby? --> 202 <!-- todo: MathML? --> 203 <!-- todo: does HTML input[placeholder="foo"] count as a host language labeling mechanism? --> 204 205 <script> 206 AriaUtils.verifyLabelsBySelector(".ex"); 207 </script> 208 </body> 209 </html>