Skip to content

Commit f9041cc

Browse files
committed
add "aria-describedby" attribute on "supported elements" section
1 parent 3d76926 commit f9041cc

1 file changed

Lines changed: 11 additions & 11 deletions

File tree

site/content/docs/5.2/forms/validation.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -222,41 +222,41 @@ Validation styles are available for the following form controls and components:
222222
<form class="was-validated">
223223
<div class="mb-3">
224224
<label for="validationTextarea" class="form-label">Textarea</label>
225-
<textarea class="form-control" id="validationTextarea" placeholder="Required example textarea" required></textarea>
226-
<div class="invalid-feedback">
225+
<textarea class="form-control" id="validationTextarea" placeholder="Required example textarea" aria-describedby="validationSupportedElementsTextArea" required></textarea>
226+
<div id="validationSupportedElementsTextArea" class="invalid-feedback">
227227
Please enter a message in the textarea.
228228
</div>
229229
</div>
230230

231231
<div class="form-check mb-3">
232-
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
232+
<input type="checkbox" class="form-check-input" id="validationFormCheck1" aria-describedby="validationSupportedElementsCheckBox" required>
233233
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
234-
<div class="invalid-feedback">Example invalid feedback text</div>
234+
<div id="validationSupportedElementsCheckBox" class="invalid-feedback">Example invalid feedback text</div>
235235
</div>
236236

237237
<div class="form-check">
238-
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
238+
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" aria-describedby="validationSupportedElementsRadio" required>
239239
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
240240
</div>
241241
<div class="form-check mb-3">
242-
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
242+
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" aria-describedby="validationSupportedElementsRadio" required>
243243
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
244-
<div class="invalid-feedback">More example invalid feedback text</div>
244+
<div id="validationSupportedElementsRadio" class="invalid-feedback">More example invalid feedback text</div>
245245
</div>
246246

247247
<div class="mb-3">
248-
<select class="form-select" required aria-label="select example">
248+
<select class="form-select" required aria-label="select example" aria-describedby="validationSupportedElementsSelect">
249249
<option value="">Open this select menu</option>
250250
<option value="1">One</option>
251251
<option value="2">Two</option>
252252
<option value="3">Three</option>
253253
</select>
254-
<div class="invalid-feedback">Example invalid select feedback</div>
254+
<div id="validationSupportedElementsSelect" class="invalid-feedback">Example invalid select feedback</div>
255255
</div>
256256

257257
<div class="mb-3">
258-
<input type="file" class="form-control" aria-label="file example" required>
259-
<div class="invalid-feedback">Example invalid form file feedback</div>
258+
<input type="file" class="form-control" aria-label="file example" required aria-describedby="validationSupportedElementsFile">
259+
<div id="validationSupportedElementsFile" class="invalid-feedback">Example invalid form file feedback</div>
260260
</div>
261261

262262
<div class="mb-3">

0 commit comments

Comments
 (0)