aria-owns.html (6690B)
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Accname tests for assorted combinations of aria-owns, aria-hidden, and host language hiding techniques</title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/wai-aria/scripts/aria-utils.js"></script> 13 <style> 14 [aria-hidden="true"] { 15 outline: 3px dashed darkred; 16 } 17 18 [id] { 19 outline: 1px dashed green; 20 } 21 </style> 22 </head> 23 24 <body> 25 26 <h1>Accname tests for assorted combinations of <code>aria-owns</code>, <code>aria-hidden</code>, and host language hiding techniques</h1> 27 28 <!-- 29 These subtests verify the following normative statements added to the ARIA 30 spec in https://github.com/w3c/aria/pull/1839: 31 32 1. User agents MUST NOT resolve aria-owns when it is set on an element 33 that has been excluded from the accessibility tree. 34 35 2. User agents MUST NOT resolve aria-owns when it references an element 36 that is, or has a DOM ancestor that is, hidden from all users. 37 --> 38 39 <p><span aria-hidden="true">Text enclosed in a dashed red outline</span> is <code>aria-hidden="true"</code>.</p> 40 <p><span id="foo">Bold text with a yellow background</span> is the target of another element’s <code>aria-owns</code>.</p> 41 42 <h2>A button using aria-owns to specify its label</h2> 43 <button 44 class="ex-label" 45 data-testname="A button using aria-owns to specify its label" 46 data-expectedlabel="Play" 47 aria-owns="play" 48 > 49 <div aria-hidden="true"> 50 <span id="play">Play</span> 51 <span id="pause">Pause</span> 52 </div> 53 </button> 54 55 <h2>A link using aria-owns to concatenate extra text</h2> 56 <a 57 class="ex-label" 58 data-testname="A link using aria-owns to concatenate extra text" 59 data-expectedlabel="World Wide Web Consortium (opens in a new window)" 60 href="https://www.w3.org/" 61 target="_blank" 62 aria-owns="new-window-warning-1" 63 > 64 World Wide Web Consortium 65 </a> 66 <div aria-hidden="true"> 67 <span id="new-window-warning-1"> (opens in a new window)</span> 68 <!-- Label concatenation works here because, due to the aria-owns reassignment, the "new window" span no longer inherits the aria-hidden status. --> 69 </div> 70 71 <h2>Ignore aria-owns when on an element that is hidden from all users</h2> 72 <h3 73 class="ex-label" 74 data-testname="Ignore aria-owns when on an element that is hidden from all users" 75 data-expectedlabel="treasure" 76 > 77 <span hidden aria-owns="treasure"> 78 This ninja can’t steal the... 79 </span> 80 <mark id="treasure">treasure</mark> 81 </h3> 82 83 <h2>Computed name of parent heading persists when aria-owns fails to relocate its contents</h2> 84 <h3> 85 <!-- This span is hidden, so aria-owns is ignored, and the would-be relocated contents will act as the computed label in its original DOM location, as part of the following test. --> 86 <span hidden aria-owns="pearl"> 87 This oyster contains... 88 </span> 89 <mark>sand</mark> 90 </h3> 91 <h4 92 class="ex-label" 93 data-testname="Computed name of parent heading persists when aria-owns fails to relocate its contents" 94 data-expectedlabel="a pearl" 95 > 96 <!-- 97 TODO: This subtest only succeeds in confirming that the h4’s computed 98 name remains "a pearl". 99 100 It does *not* confirm that #pearl remains unmoved in the accessibility 101 tree after aria-owns is processed on the h3. 102 103 This subtle distinction is importance since we’ve discovered at least 104 one case where the h4 is simultaneously correctly named but emptied 105 of its contents: 106 107 https://github.com/web-platform-tests/wpt/pull/44822#issuecomment-3251614062 108 109 A better test would assert that the #pearl text node remains unmoved. 110 --> 111 <mark id="pearl">a pearl</mark> 112 </h4> 113 114 <h2>Computed name of parent heading excludes content relocated by aria-owns</h2> 115 <h3> 116 <span aria-owns="car"> 117 The dog that caught the 118 </span> 119 </h3> 120 <h4 121 class="ex-label" 122 data-testname="Computed name of parent heading excludes content relocated by aria-owns" 123 data-expectedlabel="Speeding" 124 > 125 Speeding 126 <mark id="car">car</mark> 127 </h4> 128 129 <h2>Ignore aria-owns when on an element with aria-hidden</h2> 130 <h3 131 class="ex-label" 132 data-testname="Ignore aria-owns when on an element with aria-hidden" 133 data-expectedlabel="reflection" 134 > 135 <span aria-hidden="true" aria-owns="reflection"> 136 This vampire can’t see its... 137 </span> 138 <mark id="reflection">reflection</mark> 139 </h3> 140 141 <h2>Ignore aria-owns when it targets an element that is hidden from all users</h2> 142 <a 143 class="ex-label" 144 data-testname="Ignore aria-owns when it targets an element that is hidden from all users" 145 data-expectedlabel="World Wide Web Consortium" 146 href="https://www.w3.org/" 147 aria-owns="new-window-warning-2" 148 > 149 World Wide Web Consortium 150 </a> 151 <div> 152 <span id="new-window-warning-2" hidden> (opens in a new window)</span> 153 <!-- Label concatenation is ignored because aria-owns does not override the display:none rendering due to the hidden attr. --> 154 </div> 155 156 <h2>Ignore aria-owns when it targets an element with an ancestor that is hidden from all users</h2> 157 <a 158 class="ex-label" 159 data-testname="Ignore aria-owns when it targets an element with an ancestor that is hidden from all users" 160 data-expectedlabel="World Wide Web Consortium" 161 href="https://www.w3.org/" 162 aria-owns="new-window-warning-3" 163 > 164 World Wide Web Consortium 165 </a> 166 <div hidden> 167 <span id="new-window-warning-3"> (opens in a new window)</span> 168 <!-- Label concatenation is ignored because ancestor is display:none via the hidden attr. --> 169 </div> 170 171 <h2>aria-hidden remains in effect on an element after it is relocated using aria-owns</h2> 172 <a 173 class="ex-label" 174 data-testname="aria-hidden remains in effect on an element after it is relocated using aria-owns" 175 data-expectedlabel="World Wide Web Consortium" 176 href="https://www.w3.org/" 177 aria-owns="new-window-warning-4" 178 > 179 World Wide Web Consortium 180 </a> 181 <div> 182 <span id="new-window-warning-4" aria-hidden="true"> (opens in a new window)</span> 183 <!-- Label concatenation is ignored because aria-owns does not override the aria-hidden status, like it could be if hidden but referenced directly in a aria-labelledby computation. --> 184 </div> 185 186 <script> 187 AriaUtils.verifyLabelsBySelector(".ex-label"); 188 </script> 189 </body> 190 191 </html>