Form file docs and overrides (#32058)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4c6c4dd21d139ac6885cb35fa4a105158395d46f..781ec79a4243de95cd90231b4f4a64385aa99895 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -792,7 +792,7 @@ $form-range-thumb-transition:              background-color .15s ease-in-out, bo
 
 $form-file-button-color:          $input-color !default;
 $form-file-button-bg:             $input-group-addon-bg !default;
-$form-file-button-hover-bg:       shade-color($input-group-addon-bg, 5%) !default;
+$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
 
 $form-floating-height:            add(3.5rem, $input-height-border) !default;
 $form-floating-padding-x:         $input-padding-x !default;

diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 138d910e8c2fa27f2fdc6c27886273e06abbe017..3b883f29c3dd3d65b503a359f91c3b3986c195b3 100644 (file)
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -34,9 +34,9 @@ Place one add-on or button on either side of an input. You may also place one on
 </div>
 
 <div class="input-group mb-3">
-  <input type="text" class="form-control" placeholder="Username">
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
   <span class="input-group-text">@</span>
-  <input type="text" class="form-control" placeholder="Server">
+  <input type="text" class="form-control" placeholder="Server" aria-label="Server">
 </div>
 
 <div class="input-group">
@@ -289,22 +289,22 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {{< example >}}
 <div class="input-group mb-3">
-  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
-  <input type="file" class="form-control" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
+  <label class="input-group-text" for="inputGroupFile01">Upload</label>
+  <input type="file" class="form-control" id="inputGroupFile01">
 </div>
 
 <div class="input-group mb-3">
-  <input type="file" class="form-control" id="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
-  <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
+  <input type="file" class="form-control" id="inputGroupFile02">
+  <label class="input-group-text" for="inputGroupFile02">Upload</label>
 </div>
 
 <div class="input-group mb-3">
   <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
-  <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
+  <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
 </div>
 
 <div class="input-group">
-  <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
+  <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
   <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}