fix(a11y): Increase Windows / Firefox HCM support (#6892)

tw15egan · kodiakhq[bot] · web-flow · commit 17d08e9a750f · 2020-09-24T17:14:55.000Z
* fix(pagination): high contrast mode fixes

* fix(components): address issues in Windows HCM

* fix(data-table): add firefox HCM support

Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/config/stylelint-config-carbon/rules/possible-errors.js b/config/stylelint-config-carbon/rules/possible-errors.js
@@ -47,7 +47,12 @@ module.exports = {
     'selector-type-no-unknown': true,
 
     // Media feature
-    'media-feature-name-no-unknown': true,
+    'media-feature-name-no-unknown': [
+      true,
+      {
+        ignoreMediaFeatureNames: ['prefers-contrast'],
+      },
+    ],
 
     // At-rule
     'at-rule-no-unknown': OFF,
diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
@@ -84,6 +84,13 @@
     transform: rotate(90deg);
     transition: all $duration--fast-02 motion(standard, productive);
     fill: $ui-05;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      fill: ButtonText;
+    }
   }
 
   .#{$prefix}--accordion__title {
@@ -160,6 +167,13 @@
       /* rtl:ignore */
       transform: rotate(-90deg);
       fill: $ui-05;
+
+      // Windows, Firefox HCM Fix
+      @media screen and (-ms-high-contrast: active),
+        screen and (prefers-contrast) {
+        // `ButtonText` is a CSS2 system color to help improve colors in HCM
+        fill: ButtonText;
+      }
     }
   }
 
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -250,6 +250,15 @@
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:hover
     .#{$prefix}--btn__icon {
     fill: $icon-01;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      path {
+        fill: ButtonText;
+      }
+    }
   }
 
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
@@ -267,6 +276,15 @@
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost[disabled]:hover
     .#{$prefix}--btn__icon {
     fill: $disabled-02;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `GrayText` is a CSS2 system color to help improve colors in HCM
+      path {
+        fill: GrayText;
+      }
+    }
   }
 
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] {
diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -155,6 +155,14 @@
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before {
     // Must use box-shadow for appearance of multiple borders with rounded corners.
     box-shadow: 0 0 0 2px $inverse-01, 0 0 0 4px $focus;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `highlightText` is a CSS2 system color to help improve colors in HCM
+      outline: 1px solid highlightText;
+      outline-offset: 2px;
+    }
   }
 
   //----------------------------------------------
diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -206,8 +206,9 @@
     transition: transform $duration--moderate-01 motion(standard, productive);
     fill: $ui-05;
 
-    // Windows HCM fix
-    @media screen and (-ms-high-contrast: active) {
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
       // `ButtonText` is a CSS2 system color to help improve colors in HCM
       fill: ButtonText;
     }
diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss
@@ -150,10 +150,11 @@
     fill: $ui-05;
   }
 
-  // Windows HCM fix
+  // Windows, Firefox HCM Fix
   .#{$prefix}--table-sort__icon,
   .#{$prefix}--table-sort__icon-unsorted {
-    @media screen and (-ms-high-contrast: active) {
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
       // `ButtonText` is a CSS2 system color to help improve colors in HCM
       fill: ButtonText;
     }
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
@@ -70,6 +70,12 @@
 
     padding: 0 rem(48px) 0 rem(16px);
     text-align: left;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      border: 1px solid transparent;
+    }
   }
 
   .#{$prefix}--dropdown--xl {
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -172,6 +172,13 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg {
     fill: $disabled-02;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `GrayText` is a CSS2 system color to help improve colors in HCM
+      fill: GrayText;
+    }
   }
 
   .#{$prefix}--list-box--disabled,
@@ -356,6 +363,13 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__menu-icon > svg {
     height: 100%;
     fill: $icon-01;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      fill: ButtonText;
+    }
   }
 
   .#{$prefix}--list-box__menu-icon--open {
@@ -385,6 +399,13 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__selection > svg {
     fill: $icon-02;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      fill: ButtonText;
+    }
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:focus {
@@ -424,6 +445,13 @@ $list-box-menu-width: rem(300px);
       background-color: $hover-secondary;
       border-radius: 50%;
     }
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      fill: ButtonText;
+    }
   }
 
   .#{$prefix}--list-box--disabled
@@ -434,6 +462,13 @@ $list-box-menu-width: rem(300px);
     &:hover {
       background-color: initial;
     }
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `GrayText` is a CSS2 system color to help improve colors in HCM
+      fill: GrayText;
+    }
   }
 
   .#{$prefix}--list-box__selection--multi:focus,
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -353,6 +353,13 @@
     width: rem(20px);
     height: rem(20px);
     fill: $icon-01;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      fill: ButtonText;
+    }
   }
 
   .#{$prefix}--body--with-modal-open {
diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss
@@ -75,8 +75,9 @@
     height: rem(16px);
     fill: $icon-01;
 
-    // Windows HCM fix
-    @media screen and (-ms-high-contrast: active) {
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
       // `ButtonText` is a CSS2 system color to help improve colors in HCM
       fill: ButtonText;
     }
diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
@@ -156,6 +156,13 @@ $css--helpers: true;
     transition: outline $duration--fast-02 motion(standard, productive),
       background-color $duration--fast-02 motion(standard, productive);
     fill: $ui-05;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      border: 1px solid transparent;
+    }
   }
 
   .#{$prefix}--pagination__button:focus,
diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
@@ -98,7 +98,13 @@
       // Allow the selected button to be seen in Windows HCM for IE/Edge
       @media screen and (-ms-high-contrast: active) {
         // Utilize a system color variable to accomodate any user HCM theme
-        background-color: windowText;
+        background-color: WindowText;
+      }
+
+      // Firefox only HCM solution
+      @media screen and (prefers-contrast) {
+        // Utilize a system color variable to accomodate any user HCM theme
+        border: 2px solid WindowText;
       }
     }
   }
diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
@@ -120,8 +120,9 @@
     pointer-events: none;
     fill: $icon-02;
 
-    // Windows HCM fix
-    @media screen and (-ms-high-contrast: active) {
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
       // `ButtonText` is a CSS2 system color to help improve colors in HCM
       fill: ButtonText;
     }
@@ -170,6 +171,12 @@
 
   .#{$prefix}--search-close svg {
     fill: inherit;
+
+    // Firefox HCM Fix
+    @media screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      fill: ButtonText;
+    }
   }
 
   .#{$prefix}--search-close,
diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
@@ -137,6 +137,15 @@
     height: 100%;
     pointer-events: none;
     fill: $ui-05;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      path {
+        fill: ButtonText;
+      }
+    }
   }
 
   .#{$prefix}--select-input__wrapper[data-invalid]
diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
@@ -52,6 +52,13 @@
     background: $ui-03;
     transform: translate(0%, -50%);
     cursor: pointer;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      border: 1px solid transparent;
+    }
   }
 
   .#{$prefix}--slider__track:before {
@@ -75,6 +82,13 @@
     transform-origin: left;
     transition: background $duration--fast-02 motion(standard, productive);
     pointer-events: none;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      border: 1px solid transparent;
+    }
   }
 
   .#{$prefix}--slider__thumb {
@@ -109,6 +123,13 @@
       box-shadow: inset 0 0 0 2px $interactive-04;
       transform: translate(-50%, -50%) scale(1.4286);
     }
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      outline: 1px solid ButtonText;
+    }
   }
 
   .#{$prefix}--slider__input {
diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -50,14 +50,20 @@
 
   // IE media query
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    width: rem(208px);
+    width: auto;
   }
   // Edge 12-15 and Edge 16 feature queries
   @supports (-ms-accelerator: true) {
-    width: rem(208px);
+    width: auto;
   }
   @supports (-ms-ime-align: auto) {
-    width: rem(208px);
+    width: auto;
+  }
+
+  // Windows HCM Fix
+  @media screen and (-ms-high-contrast: active) {
+    // `GrayText` is a CSS2 system color to help improve colors in HCM
+    border: 1px solid transparent;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -150,10 +150,11 @@`
`150`	`150`	`fill: $ui-05;`
`151`	`151`	`}`
`152`	`152`
`153`		`- // Windows HCM fix`
	`153`	`+ // Windows, Firefox HCM Fix`
`154`	`154`	`.#{$prefix}--table-sort__icon,`
`155`	`155`	`.#{$prefix}--table-sort__icon-unsorted {`
`156`		`- @media screen and (-ms-high-contrast: active) {`
	`156`	`+ @media screen and (-ms-high-contrast: active),`
	`157`	`+ screen and (prefers-contrast) {`
`157`	`158`	// `ButtonText` is a CSS2 system color to help improve colors in HCM
`158`	`159`	`fill: ButtonText;`
`159`	`160`	`}`