diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 9615407e9ee8..656e8497f833 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,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; } } diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss index 84ce66567c13..a9cd3601d332 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 { + outline: 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..afb1169d3afd 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 { + outline: solid 1px; + } } diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss index 8dfc6096a723..ae3301eda9d4 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 { + outline: solid 1px; + } } .md-menu-content { diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 0489f1fb09a8..e616041dba76 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; @@ -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; -} \ 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..8083b5ec642b 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 { + outline: solid 1px; + } }