fix(checkbox): no focus indicator in high contrast (#13255)

devversion · vivian-hu-zz · commit caf65e560de8 · 2018-11-08T10:03:43.000-08:00
* Fixes that the checkbox does not have a focus indicator in high-contrast. Similarly to native checkboxes, the Material checkbox should have a dotted border/outline on keyboard focus. Fixes #13227
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
@@ -240,6 +240,14 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   ._mat-animation-noopable & {
     transition: none;
   }
+
+  @include cdk-high-contrast {
+    // Note that we change the border style of the checkbox frame to dotted because this
+    // is how IE/Edge similarly treats native checkboxes in high contrast mode.
+    .mat-checkbox.cdk-keyboard-focused & {
+      border-style: dotted;
+    }
+  }
 }
 
 .mat-checkbox-background {

Original file line number	Diff line number	Diff line change
`@@ -240,6 +240,14 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;`
`240`	`240`	`._mat-animation-noopable & {`
`241`	`241`	`transition: none;`
`242`	`242`	`}`
	`243`	`+`
	`244`	`+ @include cdk-high-contrast {`
	`245`	`+ // Note that we change the border style of the checkbox frame to dotted because this`
	`246`	`+ // is how IE/Edge similarly treats native checkboxes in high contrast mode.`
	`247`	`+ .mat-checkbox.cdk-keyboard-focused & {`
	`248`	`+ border-style: dotted;`
	`249`	`+ }`
	`250`	`+ }`
`243`	`251`	`}`
`244`	`252`
`245`	`253`	`.mat-checkbox-background {`