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)

diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html
index 47c23aa793c854fb65a7e810afe6f24a3173c2be..1016b5b9a5723d93cff6b3447f3287241668ae04 100644 (file)
--- a/site/content/docs/4.3/examples/navbars/index.html
+++ b/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>

diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md
index 0a79231a7b83b99e2289377c5c6574d9db443aed..e74338d09618d17f7bf9f73922fe4966fae071bc 100644 (file)
--- a/site/content/docs/4.3/forms/form-control.md
+++ b/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

diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index 3e092c1842097a94a09c027f653c55203b820016..3e5b45f8accd985e916f3e29399207e251d5bd3f 100644 (file)
--- a/site/content/docs/4.3/forms/layout.md
+++ b/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 >}}

diff --git a/site/content/docs/4.3/forms/select.md b/site/content/docs/4.3/forms/select.md
index a3a8198ba202f43cb0e372c4b349f2d941badb1b..e8c62e8f3dce9bb7c808e567f4fd85a1f0f16766 100644 (file)
--- a/site/content/docs/4.3/forms/select.md
+++ b/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>

diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md
index d00abe4db4fe778e7f941648fe5fda0f1b7fb523..2bac5786060f5da25499f0b32edb57ba07d9cad2 100644 (file)
--- a/site/content/docs/4.3/forms/validation.md
+++ b/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>