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

crisbeto · crisbeto · commit 686dada682bd · 2019-11-04T19:35:03.000+09: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,12 @@ $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: dotted 2px;
+    }
   }
 
   .mat-ripple-element {

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,12 @@ $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: dotted 2px;`
	`54`	`+ }`
`49`	`55`	`}`
`50`	`56`
`51`	`57`	`.mat-ripple-element {`