fix(datepicker): add focus indication in high contrast mode (#15661)

crisbeto · jelbourn · commit c0399873e623 · 2019-05-13T10:05:17.000-07:00
Fixes the datepicker calendar not having focus indication in high contrast mode, making it difficult to navigate using the keyboard.
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
@@ -76,6 +76,13 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   .mat-calendar-body-today {
     outline: dotted 1px;
   }
+
+  .cdk-keyboard-focused .mat-calendar-body-active,
+  .cdk-program-focused .mat-calendar-body-active {
+    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
+      outline: dotted 2px;
+    }
+  }
 }
 
 [dir='rtl'] {

Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,13 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar`
`76`	`76`	`.mat-calendar-body-today {`
`77`	`77`	`outline: dotted 1px;`
`78`	`78`	`}`
	`79`	`+`
	`80`	`+ .cdk-keyboard-focused .mat-calendar-body-active,`
	`81`	`+ .cdk-program-focused .mat-calendar-body-active {`
	`82`	`+ & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {`
	`83`	`+ outline: dotted 2px;`
	`84`	`+ }`
	`85`	`+ }`
`79`	`86`	`}`
`80`	`87`
`81`	`88`	`[dir='rtl'] {`