fix(a11y): improved accessibility in high contrast mode (#1941)

* fix: improved accessibility in high contrast mode

a11y improvements to the following components in high contrast mode:

* `button` - Adds an outline since only the text was visible. Also inverts the tint since it was hiding the text.
* `card`, `dialog`, `menu`, `snack-bar`, `tooltip` - Adds an outline.
* `select` - Adds an outline and prevents the ripple from hiding the option text.
* `sidenav` - Fixes the backdrop not being opaque.
* `slide-toggle` - Fixes component blending in completely with the background.

Fixes #421.
Fixes #1769.

* Replace the "border" instances with "outline".

* Move the overlay coloring to the button theme.

* Move the overlay color back to the button base styles.

Author: crisbeto

src/lib/button/button.scss

@@ -2,6 +2,7 @@
 // TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
 
 @import 'button-base';
+@import '../a11y/_a11y';
 
 // TODO(kara): Replace attribute selectors with class selectors when possible
 [md-button], [md-icon-button] {
@@ -79,6 +80,13 @@
   border-radius: inherit;
   pointer-events: none;
   opacity: 0;
+
+  @include md-high-contrast {
+    // Note that IE will render this in the same way, no
+    // matter whether the theme is light or dark. This helps
+    // with the readability of focused buttons.
+    background-color: rgba(white, 0.5);
+  }
 }
 
 // For round buttons, the ripple container should clip child ripples to a circle.
@@ -89,9 +97,9 @@
   z-index: 1;
 }
 
-// Applies a clearer border for high-contrast mode (a11y)
-@media screen and (-ms-high-contrast: active) {
-  .md-raised-button, .md-fab, .md-mini-fab {
-    border: 1px solid #fff;
+// Add an outline to make it more visible in high contrast mode.
+@include md-high-contrast {
+  [md-button], [md-raised-button], [md-icon-button], [md-fab], [md-mini-fab] {
+    outline: solid 1px;
   }
 }

src/lib/card/card.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/elevation';
+@import '../a11y/_a11y';
 
 
 $md-card-default-padding: 24px !default;
@@ -15,6 +16,10 @@ md-card {
   padding: $md-card-default-padding;
   border-radius: $md-card-border-radius;
   font-family: $md-font-family;
+
+  @include md-high-contrast {
+    outline: solid 1px;
+  }
 }
 
 .md-card-flat {

src/lib/core/a11y/_a11y.scss

@@ -11,3 +11,14 @@
     width: 1px;
   }
 }
+
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+@mixin md-high-contrast {
+  @media screen and (-ms-high-contrast: active) {
+    @content;
+  }
+}

src/lib/dialog/dialog-container.scss

@@ -1,4 +1,5 @@
 @import '../core/style/elevation';
+@import '../a11y/_a11y';
 
 
 $md-dialog-padding: 24px !default;
@@ -16,4 +17,8 @@ md-dialog-container {
   // The dialog container should completely fill its parent overlay element.
   width: 100%;
   height: 100%;
+
+  @include md-high-contrast {
+    outline: solid 1px;
+  }
 }

src/lib/menu/menu.scss

@@ -4,6 +4,7 @@
 @import '../core/style/button-common';
 @import '../core/style/layout-common';
 @import '../core/style/menu-common';
+@import '../a11y/_a11y';
 
 $md-menu-vertical-padding: 8px !default;
 
@@ -13,6 +14,10 @@ $md-menu-vertical-padding: 8px !default;
 
   // max height must be 100% of the viewport height + one row height
   max-height: calc(100vh + 48px);
+
+  @include md-high-contrast {
+    outline: solid 1px;
+  }
 }
 
 .md-menu-content {

src/lib/select/select.scss

@@ -1,5 +1,6 @@
 @import '../core/style/menu-common';
 @import '../core/style/form-common';
+@import '../a11y/_a11y';
 
 $md-select-trigger-height: 30px !default;
 $md-select-trigger-min-width: 112px !default;
@@ -96,6 +97,10 @@ md-select {
   padding-top: 0;
   padding-bottom: 0;
   max-height: $md-select-panel-max-height;
+
+  @include md-high-contrast {
+    outline: solid 1px;
+  }
 }
 
 md-option {
@@ -116,4 +121,9 @@ md-option {
   left: 0;
   bottom: 0;
   right: 0;
-}
+
+  // In high contrast mode this completely covers the text.
+  @include md-high-contrast {
+    opacity: 0.5;
+  }
+}

src/lib/sidenav/sidenav.scss

@@ -1,6 +1,7 @@
 @import '../core/style/variables';
 @import '../core/style/elevation';
 @import '../core/style/layout-common';
+@import '../a11y/_a11y';
 
 
 // Mixin to help with defining LTR/RTL 'transform: translate3d()' values.
@@ -83,6 +84,10 @@ md-sidenav-layout {
   &.md-sidenav-shown {
     visibility: visible;
   }
+
+  @include md-high-contrast {
+    opacity: 0.5;
+  }
 }
 
 .md-sidenav-content {

src/lib/slide-toggle/slide-toggle.scss

@@ -1,6 +1,7 @@
 @import '../core/style/variables';
 @import '../core/ripple/ripple';
 @import '../core/style/elevation';
+@import '../a11y/_a11y';
 
 
 $md-slide-toggle-width: 36px !default;
@@ -116,6 +117,11 @@ md-slide-toggle {
   border-radius: 50%;
 
   @include md-elevation(1);
+
+  @include md-high-contrast {
+    background: #fff;
+    border: solid 1px #000;
+  }
 }
 
 // Horizontal bar for the slide-toggle.
@@ -129,6 +135,10 @@ md-slide-toggle {
   height: $md-slide-toggle-bar-height;
 
   border-radius: 8px;
+
+  @include md-high-contrast {
+    background: #fff;
+  }
 }
 
 // The slide toggle shows a visually hidden input inside of the component, which is used

src/lib/snack-bar/snack-bar-container.scss

@@ -1,4 +1,5 @@
 @import '../core/style/elevation';
+@import '../a11y/_a11y';
 
 $md-snack-bar-padding: 14px 24px !default;
 $md-snack-bar-height: 20px !default;
@@ -19,4 +20,8 @@ $md-snack-bar-max-width: 568px !default;
   padding: $md-snack-bar-padding;
   // Initial transformation is applied to start snack bar out of view.
   transform: translateY(100%);
+
+  @include md-high-contrast {
+    border: solid 1px;
+  }
 }

src/lib/tooltip/tooltip.scss

@@ -1,4 +1,5 @@
 @import '../core/style/variables';
+@import '../a11y/_a11y';
 
 
 $md-tooltip-height: 22px;
@@ -18,4 +19,8 @@ $md-tooltip-padding: 8px;
   margin: $md-tooltip-margin;
   height: $md-tooltip-height;
   line-height: $md-tooltip-height;
+
+  @include md-high-contrast {
+    outline: solid 1px;
+  }
 }