File tree Expand file tree Collapse file tree 1 file changed +21
-2
lines changed Expand file tree Collapse file tree 1 file changed +21
-2
lines changed Original file line number Diff line number Diff line change @@ -152,6 +152,12 @@ The example below will find the input node for the following DOM structures:
152
152
// Wrapper labels
153
153
< label> Username < input / >< / label>
154
154
155
+ // Wrapper labels where the label text is in another child element
156
+ < label>
157
+ < span> Username< / span>
158
+ < input / >
159
+ < / label>
160
+
155
161
// aria-label attributes
156
162
// Take care because this is not a label that users can see on the page,
157
163
// so the purpose of your input must be obvious to visual users.
@@ -193,8 +199,21 @@ switching to `aria-label` or `aria-labelledby`.
193
199
If it is important that you query an actual ` <label> ` element you can provide a
194
200
` selector ` in the options:
195
201
196
- ``` html
197
- <label > <span >Username</span > <input /> </label >
202
+ ``` js
203
+ // Multiple elements labelled via aria-labelledby
204
+ < label id= " username" > Username< / label>
205
+ < input aria- labelledby= " username" / >
206
+ < span aria- labelledby= " username" > Please enter your username< / span>
207
+
208
+ // Multiple labels with the same text
209
+ < label>
210
+ Username
211
+ < input / >
212
+ < / label>
213
+ < label>
214
+ Username
215
+ < textarea>< / textarea>
216
+ < / label>
198
217
```
199
218
200
219
``` js
You can’t perform that action at this time.
0 commit comments