From caf65e560de8eb09855ca714aebb4c4d427ea68a Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 8 Nov 2018 18:03:43 +0000
Subject: [PATCH] fix(checkbox): no focus indicator in high contrast (#13255)

* 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
---
 src/lib/checkbox/checkbox.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index b1cb567b186..15e625cf80d 100644
--- 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 {