Skip to content

Commit 74a44f5

Browse files
authored
Merge pull request #282 from airjp73/patch-1
Update documentation for `ByLabelText` queries
2 parents 88b1648 + 05743a9 commit 74a44f5

File tree

1 file changed

+21
-2
lines changed

1 file changed

+21
-2
lines changed

docs/dom-testing-library/api-queries.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,12 @@ The example below will find the input node for the following DOM structures:
152152
// Wrapper labels
153153
<label>Username <input /></label>
154154

155+
// Wrapper labels where the label text is in another child element
156+
<label>
157+
<span>Username</span>
158+
<input />
159+
</label>
160+
155161
// aria-label attributes
156162
// Take care because this is not a label that users can see on the page,
157163
// so the purpose of your input must be obvious to visual users.
@@ -193,8 +199,21 @@ switching to `aria-label` or `aria-labelledby`.
193199
If it is important that you query an actual `<label>` element you can provide a
194200
`selector` in the options:
195201

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>
198217
```
199218

200219
```js

0 commit comments

Comments
 (0)