fix(material-experimental/mdc-tabs): missing focus indication in high contrast mode (#17601)

crisbeto · web-flow · commit 0777c44c0318 · 2020-07-20T15:48:26.000-07:00
Fixes the MDC-based tabs not having focus indication in high contrast mode.
diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -46,6 +46,14 @@ $mat-tab-animation-duration: 500ms !default;
     .mdc-tab__ripple::before {
       opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
     }
+
+    // The usual focus indication is color-based so it won't show up in
+    // high contrast mode. Add an outline which is a bit more visible.
+    @include cdk-high-contrast {
+      $outline-width: 2px;
+      outline: dotted $outline-width;
+      outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.
+    }
   }
 
   .mat-ripple-element {

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,14 @@ $mat-tab-animation-duration: 500ms !default;`
`46`	`46`	`.mdc-tab__ripple::before {`
`47`	`47`	`opacity: map-get($mdc-ripple-dark-ink-opacities, focus);`
`48`	`48`	`}`
	`49`	`+`
	`50`	`+ // The usual focus indication is color-based so it won't show up in`
	`51`	`+ // high contrast mode. Add an outline which is a bit more visible.`
	`52`	`+ @include cdk-high-contrast {`
	`53`	`+ $outline-width: 2px;`
	`54`	`+ outline: dotted $outline-width;`
	`55`	`+ outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.`
	`56`	`+ }`
`49`	`57`	`}`
`50`	`58`
`51`	`59`	`.mat-ripple-element {`