From fd6d18a0ea3567c2cebe0c34b4dddf67e9b9f0b6 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 20 Nov 2016 16:13:52 +0100
Subject: [PATCH 1/4] 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.
---
 src/lib/button/button.scss                 | 13 +++++++++----
 src/lib/card/card.scss                     |  5 +++++
 src/lib/core/a11y/_a11y.scss               | 11 +++++++++++
 src/lib/dialog/dialog-container.scss       |  5 +++++
 src/lib/menu/menu.scss                     |  5 +++++
 src/lib/select/select.scss                 | 12 +++++++++++-
 src/lib/sidenav/sidenav.scss               |  5 +++++
 src/lib/slide-toggle/slide-toggle.scss     | 10 ++++++++++
 src/lib/snack-bar/snack-bar-container.scss |  5 +++++
 src/lib/tooltip/tooltip.scss               |  5 +++++
 10 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 9615407e9ee8..bc83e9b14fbb 100644
--- a/src/lib/button/button.scss
+++ b/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,10 @@
   border-radius: inherit;
   pointer-events: none;
   opacity: 0;
+
+  @include md-high-contrast {
+    background-color: rgba(white, 0.5);
+  }
 }
 
 // For round buttons, the ripple container should clip child ripples to a circle.
@@ -89,9 +94,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] {
+    border: solid 1px;
   }
 }
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index 84ce66567c13..34a9c953feb7 100644
--- a/src/lib/card/card.scss
+++ b/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 {
+    border: solid 1px;
+  }
 }
 
 .md-card-flat {
diff --git a/src/lib/core/a11y/_a11y.scss b/src/lib/core/a11y/_a11y.scss
index f40820ec9aa9..1b6e98652b78 100644
--- a/src/lib/core/a11y/_a11y.scss
+++ b/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;
+  }
+}
diff --git a/src/lib/dialog/dialog-container.scss b/src/lib/dialog/dialog-container.scss
index 2e47025c5344..42bd8f139bcb 100644
--- a/src/lib/dialog/dialog-container.scss
+++ b/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 {
+    border: solid 1px;
+  }
 }
diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss
index 8dfc6096a723..7ba325c75692 100644
--- a/src/lib/menu/menu.scss
+++ b/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 {
+    border: solid 1px;
+  }
 }
 
 .md-menu-content {
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 849294dfb2d0..c2f406339e44 100644
--- a/src/lib/select/select.scss
+++ b/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;
@@ -81,6 +82,10 @@ md-select {
   padding-top: 0;
   padding-bottom: 0;
   max-height: $md-select-panel-max-height;
+
+  @include md-high-contrast {
+    border: solid 1px;
+  }
 }
 
 md-option {
@@ -101,4 +106,9 @@ md-option {
   left: 0;
   bottom: 0;
   right: 0;
-}
\ No newline at end of file
+
+  // In high contrast mode this completely covers the text.
+  @include md-high-contrast {
+    opacity: 0.5;
+  }
+}
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index 4f6f9e1d26a3..06923ff59a08 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/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 {
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 90001626e110..4cc8fefe7eb9 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/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
diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss
index 3b6e39e10e7c..06d6f6b9b327 100644
--- a/src/lib/snack-bar/snack-bar-container.scss
+++ b/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;
+  }
 }
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
index f8578a8f7a19..daa21fa7d2c2 100644
--- a/src/lib/tooltip/tooltip.scss
+++ b/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 {
+    border: solid 1px;
+  }
 }

From aa53e87d1a7e7991ea8e8255a13f33ed95477790 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 1 Dec 2016 20:00:49 +0100
Subject: [PATCH 2/4] Replace the "border" instances with "outline".

---
 src/lib/button/button.scss           | 2 +-
 src/lib/card/card.scss               | 2 +-
 src/lib/dialog/dialog-container.scss | 2 +-
 src/lib/menu/menu.scss               | 2 +-
 src/lib/select/select.scss           | 2 +-
 src/lib/tooltip/tooltip.scss         | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index bc83e9b14fbb..2583f3b6bd2d 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -97,6 +97,6 @@
 // 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] {
-    border: solid 1px;
+    outline: solid 1px;
   }
 }
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index 34a9c953feb7..a9cd3601d332 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -18,7 +18,7 @@ md-card {
   font-family: $md-font-family;
 
   @include md-high-contrast {
-    border: solid 1px;
+    outline: solid 1px;
   }
 }
 
diff --git a/src/lib/dialog/dialog-container.scss b/src/lib/dialog/dialog-container.scss
index 42bd8f139bcb..afb1169d3afd 100644
--- a/src/lib/dialog/dialog-container.scss
+++ b/src/lib/dialog/dialog-container.scss
@@ -19,6 +19,6 @@ md-dialog-container {
   height: 100%;
 
   @include md-high-contrast {
-    border: solid 1px;
+    outline: solid 1px;
   }
 }
diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss
index 7ba325c75692..ae3301eda9d4 100644
--- a/src/lib/menu/menu.scss
+++ b/src/lib/menu/menu.scss
@@ -16,7 +16,7 @@ $md-menu-vertical-padding: 8px !default;
   max-height: calc(100vh + 48px);
 
   @include md-high-contrast {
-    border: solid 1px;
+    outline: solid 1px;
   }
 }
 
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index c2f406339e44..d104ee6c60dd 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -84,7 +84,7 @@ md-select {
   max-height: $md-select-panel-max-height;
 
   @include md-high-contrast {
-    border: solid 1px;
+    outline: solid 1px;
   }
 }
 
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
index daa21fa7d2c2..8083b5ec642b 100644
--- a/src/lib/tooltip/tooltip.scss
+++ b/src/lib/tooltip/tooltip.scss
@@ -21,6 +21,6 @@ $md-tooltip-padding: 8px;
   line-height: $md-tooltip-height;
 
   @include md-high-contrast {
-    border: solid 1px;
+    outline: solid 1px;
   }
 }

From 6fe4986f53ed7a0074bfec388db83549aa061c36 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 2 Dec 2016 21:10:47 +0100
Subject: [PATCH 3/4] Move the overlay coloring to the button theme.

---
 src/lib/button/_button-theme.scss | 6 ++++++
 src/lib/button/button.scss        | 4 ----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index 682bbaacbac7..f99858f139e0 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -80,6 +80,12 @@
     background-color: md-color($accent);
     color: md-color($accent, default-contrast);
   }
+
+  .md-button-focus-overlay {
+    @include md-high-contrast {
+      background-color: if(map_get($theme, is-dark), rgba(black, 0.5), rgba(white, 0.5));
+    }
+  }
 }
 
 
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 2583f3b6bd2d..c8afe08c6089 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -80,10 +80,6 @@
   border-radius: inherit;
   pointer-events: none;
   opacity: 0;
-
-  @include md-high-contrast {
-    background-color: rgba(white, 0.5);
-  }
 }
 
 // For round buttons, the ripple container should clip child ripples to a circle.

From 5954d4242fe1d52b5c9fd03751d22bcbacceab2f Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 2 Dec 2016 22:59:40 +0100
Subject: [PATCH 4/4] Move the overlay color back to the button base styles.

---
 src/lib/button/_button-theme.scss | 6 ------
 src/lib/button/button.scss        | 7 +++++++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index f99858f139e0..682bbaacbac7 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -80,12 +80,6 @@
     background-color: md-color($accent);
     color: md-color($accent, default-contrast);
   }
-
-  .md-button-focus-overlay {
-    @include md-high-contrast {
-      background-color: if(map_get($theme, is-dark), rgba(black, 0.5), rgba(white, 0.5));
-    }
-  }
 }
 
 
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index c8afe08c6089..656e8497f833 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -80,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.