feat(forms): Orange branded disabled state 🎉

Meaning we now exclude even more things from Pa11y…
Orange-OpenSource · Jan 5, 2021 · b02466d · b02466d
1 parent ce4dfab
commit b02466d
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 9 deletions.
diff --git a/build/.pa11yci.json b/build/.pa11yci.json
@@ -7,7 +7,7 @@
     "runners": [
       "axe"
     ],
-    "hideElements": ".bd-search, .active, [aria-current], [disabled], [readonly], .modal, #TableOfContents, .bd-example nav, .text-primary, .navbar-light .navbar-brand, .chroma, .accordion-button:not(.collapsed), [id*='tarteaucitron']",
+    "hideElements": ".bd-search, .active, [aria-current], [disabled], [disabled] label, [disabled] + label, [readonly], .modal, #TableOfContents, .bd-example nav, .text-primary, .navbar-light .navbar-brand, .chroma, .accordion-button:not(.collapsed), [id*='tarteaucitron']",
     "ignore": [
       "heading-order"
     ]

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -692,6 +692,7 @@ $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
 $form-label-font-weight:                $font-weight-bold !default;
 $form-label-color:                      null !default;
+$form-label-disabled-color:             $gray-500 !default; // Boosted mod
 
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $spacer / 2 !default;
@@ -708,7 +709,7 @@ $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
 $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-300 !default;
-$input-disabled-color:                  $gray-600 !default; // Boosted mod
+$input-disabled-color:                  $gray-700 !default; // Boosted mod
 $input-disabled-border-color:           null !default;
 
 $input-color:                           $body-color !default;
@@ -806,13 +807,14 @@ $form-select-indicator-padding:     1rem !default; // Extra padding to account f
 $form-select-font-weight:           $input-font-weight !default;
 $form-select-line-height:           $input-line-height !default;
 $form-select-color:                 $input-color !default;
-$form-select-disabled-color:        $gray-500 !default;
+$form-select-disabled-color:        $gray-700 !default;
 $form-select-bg:                    $input-bg !default;
 $form-select-disabled-bg:           $gray-300 !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
 $form-select-bg-position:           right $form-select-padding-x top add(50%, 1px) !default;
 $form-select-bg-size:               .875rem 1rem !default; // In pixels because image dimensions
 $form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path d='M7 7L0 0h14L7 7z'/></svg>") !default;
+$form-select-disabled-indicator:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$form-select-disabled-color}' d='M7 7L0 0h14L7 7z'/></svg>") !default; // Boosted mod
 
 // Boosted mod: no icon for validated select
 

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -119,7 +119,7 @@
   &[disabled],
   &:disabled {
     ~ .form-check-label {
-      color: $input-disabled-color; // Boosted mod
+      color: $form-label-disabled-color; // Boosted mod
       opacity: $form-check-label-disabled-opacity;
     }
   }
@@ -286,13 +286,13 @@
   &[disabled],
   &:disabled {
     + .btn {
-      color: $gray-500; // Boosted mod
+      color: $form-label-disabled-color; // Boosted mod
       pointer-events: none;
       background-color: $white; // Boosted mod
       // Remove CSS gradients if they're enabled
       background-image: if($enable-gradients, none, null); // Boosted mod
       filter: none;
-      border-color: $gray-500; // Boosted mod
+      border-color: currentColor; // Boosted mod
       opacity: $form-check-btn-check-disabled-opacity;
     }
   }

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
@@ -41,6 +41,7 @@
   &:disabled {
     color: $form-select-disabled-color;
     background-color: $form-select-disabled-bg;
+    background-image: escape-svg($form-select-disabled-indicator); // Boosted mod
     border-color: $form-select-disabled-border-color;
   }
 

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
@@ -11,8 +11,9 @@
 }
 
 // Boosted mod: states for labels
-.is-disabled {
-  color: $input-disabled-color;
+.is-disabled,
+[disabled] .form-label {
+  color: $form-label-disabled-color;
 }
 
 .is-required::after {

diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.0/forms/range.md
@@ -26,7 +26,7 @@ Only Firefox supports “filling” their track from the left or right of the th
 Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
 
 {{< example >}}
-<label for="disabledRange" class="form-label">Disabled range</label>
+<label for="disabledRange" class="form-label is-disabled">Disabled range</label>
 <input type="range" class="form-range" id="disabledRange" disabled>
 {{< /example >}}