docs(forms): switch to aria-describedby (#38592)

* docs(forms): switch to aria-describedby

* docs(forms): revert #37587 callout change

* docs(forms): improved sizing select examples labels

diff --git a/site/content/docs/5.3/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md
index 0c6b5997e51653a5458435d01007fbac71611f7d..1f3474dacf4286f3fab8ac84c4fa0d30fdbb7a99 100644 (file)
--- a/site/content/docs/5.3/forms/form-control.md
+++ b/site/content/docs/5.3/forms/form-control.md
@@ -36,14 +36,14 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 Block-level or inline-level form text can be created using `.form-text`.
 
 {{< callout warning >}}
-Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
+Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
 {{< /callout >}}
 
 Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
 
 {{< example >}}
 <label for="inputPassword5" class="form-label">Password</label>
-<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
+<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
 <div id="passwordHelpBlock" class="form-text">
   Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 </div>
@@ -57,7 +57,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
     <label for="inputPassword6" class="col-form-label">Password</label>
   </div>
   <div class="col-auto">
-    <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
+    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
   </div>
   <div class="col-auto">
     <span id="passwordHelpInline" class="form-text">

diff --git a/site/content/docs/5.3/forms/select.md b/site/content/docs/5.3/forms/select.md
index 07ee8c8b15e9047b79f87b532a4b40271038aa93..c58fdf75e42c44313a59d3c32fdb7a40e3e75ebc 100644 (file)
--- a/site/content/docs/5.3/forms/select.md
+++ b/site/content/docs/5.3/forms/select.md
@@ -24,14 +24,14 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
 You may also choose from small and large custom selects to match our similarly sized text inputs.
 
 {{< example >}}
-<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
+<select class="form-select form-select-lg mb-3" aria-label="Large select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
 
-<select class="form-select form-select-sm" aria-label=".form-select-sm example">
+<select class="form-select form-select-sm" aria-label="Small select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
@@ -42,7 +42,7 @@ You may also choose from small and large custom selects to match our similarly s
 The `multiple` attribute is also supported:
 
 {{< example >}}
-<select class="form-select" multiple aria-label="multiple select example">
+<select class="form-select" multiple aria-label="Multiple select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
@@ -53,7 +53,7 @@ The `multiple` attribute is also supported:
 As is the `size` attribute:
 
 {{< example >}}
-<select class="form-select" size="3" aria-label="size 3 select example">
+<select class="form-select" size="3" aria-label="Size 3 select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>