fix(tabs): unable to distinguish disabled tab in high contrast mode (#12160)

crisbeto · jelbourn · commit 98b9ed14be69 · 2018-07-12T07:38:01.000-07:00
Fixes disabled tabs being indistinguishable from enabled ones in high contrast mode.
diff --git a/src/lib/tabs/_tabs-common.scss b/src/lib/tabs/_tabs-common.scss
@@ -24,10 +24,18 @@ $mat-tab-animation-duration: 500ms !default;
     &:not(.mat-tab-disabled) {
       opacity: 1;
     }
+
+    @include cdk-high-contrast {
+      outline: dotted 2px;
+    }
   }
 
   &.mat-tab-disabled {
     cursor: default;
+
+    @include cdk-high-contrast {
+      opacity: 0.5;
+    }
   }
 
   .mat-tab-label-content {
@@ -36,6 +44,10 @@ $mat-tab-animation-duration: 500ms !default;
     align-items: center;
     white-space: nowrap;
   }
+
+  @include cdk-high-contrast {
+    opacity: 1;
+  }
 }
 
 // Mixin styles for the top section of the view; contains the tab labels.

Original file line number	Diff line number	Diff line change
`@@ -24,10 +24,18 @@ $mat-tab-animation-duration: 500ms !default;`
`24`	`24`	`&:not(.mat-tab-disabled) {`
`25`	`25`	`opacity: 1;`
`26`	`26`	`}`
	`27`	`+`
	`28`	`+ @include cdk-high-contrast {`
	`29`	`+ outline: dotted 2px;`
	`30`	`+ }`
`27`	`31`	`}`
`28`	`32`
`29`	`33`	`&.mat-tab-disabled {`
`30`	`34`	`cursor: default;`
	`35`	`+`
	`36`	`+ @include cdk-high-contrast {`
	`37`	`+ opacity: 0.5;`
	`38`	`+ }`
`31`	`39`	`}`
`32`	`40`
`33`	`41`	`.mat-tab-label-content {`
`@@ -36,6 +44,10 @@ $mat-tab-animation-duration: 500ms !default;`
`36`	`44`	`align-items: center;`
`37`	`45`	`white-space: nowrap;`
`38`	`46`	`}`
	`47`	`+`
	`48`	`+ @include cdk-high-contrast {`
	`49`	`+ opacity: 1;`
	`50`	`+ }`
`39`	`51`	`}`
`40`	`52`
`41`	`53`	`// Mixin styles for the top section of the view; contains the tab labels.`