Add explicit aria-label to unlabeled controls

- in particular, controls that just relied on `placeholder`, as this is still not officially/consistently supported as a valid way to provide an accessible name (though some browsers do use it as a fallback)

site/content/docs/4.3/examples/navbars/index.html

@@ -56,7 +56,7 @@ extra_css:
         </li>
       </ul>
       <form>
-        <input class="form-control" type="text" placeholder="Search">
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
   </div>
@@ -90,7 +90,7 @@ extra_css:
         </li>
       </ul>
       <form>
-        <input class="form-control" type="text" placeholder="Search">
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
   </div>
@@ -124,7 +124,7 @@ extra_css:
         </li>
       </ul>
       <form>
-        <input class="form-control" type="text" placeholder="Search">
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
   </div>
@@ -158,7 +158,7 @@ extra_css:
         </li>
       </ul>
       <form>
-        <input class="form-control" type="text" placeholder="Search">
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
   </div>
@@ -192,7 +192,7 @@ extra_css:
         </li>
       </ul>
       <form>
-        <input class="form-control" type="text" placeholder="Search">
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
   </div>

site/content/docs/4.3/forms/form-control.md

@@ -24,9 +24,9 @@ toc: true
 Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 
 {{< example >}}
-<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
-<input class="form-control" type="text" placeholder="Default input">
-<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
+<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
+<input class="form-control" type="text" placeholder="Default input" aria-label="deafult input example">
+<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
 {{< /example >}}
 
 ## Readonly
@@ -34,7 +34,7 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
 
 {{< example >}}
-<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
+<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>
 {{< /example >}}
 
 ## Readonly plain text

site/content/docs/4.3/forms/layout.md

@@ -40,10 +40,10 @@ More complex forms can be built using our grid classes. Use these for form layou
 {{< example >}}
 <div class="row">
   <div class="col">
-    <input type="text" class="form-control" placeholder="First name">
+    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
   </div>
   <div class="col">
-    <input type="text" class="form-control" placeholder="Last name">
+    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
   </div>
 </div>
 {{< /example >}}
@@ -55,10 +55,10 @@ By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you
 {{< example >}}
 <div class="row g-3">
   <div class="col">
-    <input type="text" class="form-control" placeholder="First name">
+    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
   </div>
   <div class="col">
-    <input type="text" class="form-control" placeholder="Last name">
+    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
   </div>
 </div>
 {{< /example >}}
@@ -204,13 +204,13 @@ As shown in the previous examples, our grid system allows you to place any numbe
 {{< example >}}
 <div class="row g-3">
   <div class="col-sm-7">
-    <input type="text" class="form-control" placeholder="City">
+    <input type="text" class="form-control" placeholder="City" aria-label="City">
   </div>
   <div class="col-sm">
-    <input type="text" class="form-control" placeholder="State">
+    <input type="text" class="form-control" placeholder="State" aria-label="State">
   </div>
   <div class="col-sm">
-    <input type="text" class="form-control" placeholder="Zip">
+    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
   </div>
 </div>
 {{< /example >}}

site/content/docs/4.3/forms/select.md

@@ -11,7 +11,7 @@ toc: true
 Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.
 
 {{< example >}}
-<select class="form-select">
+<select class="form-select" aria-label="Default select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
@@ -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">
+<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg 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">
+<select class="form-select form-select-sm" aria-label=".form-select-sm 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>
+<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">
+<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>

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

@@ -280,7 +280,7 @@ Validation styles are available for the following form controls and components:
   </div>
 
   <div class="mb-3">
-    <select class="form-select" required>
+    <select class="form-select" required aria-label="select example">
       <option value="">Open this select menu</option>
       <option value="1">One</option>
       <option value="2">Two</option>