fix(material/datepicker): add focus indication to calendar selected date in high contrast mode (#22889)

crisbeto · web-flow · commit 66c9e4ef36b8 · 2022-01-13T22:47:42.000Z
Fixes that selected dates in the calendar didn't have focus indication in high contrast mode. Fixes #22873.
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
@@ -208,8 +208,12 @@ $calendar-range-end-body-cell-size:
 
   .cdk-keyboard-focused .mat-calendar-body-active,
   .cdk-program-focused .mat-calendar-body-active {
-    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
+    & > .mat-calendar-body-cell-content {
       outline: dotted 2px;
+
+      &.mat-calendar-body-selected {
+        outline: solid 3px;
+      }
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -208,8 +208,12 @@ $calendar-range-end-body-cell-size:`
`208`	`208`
`209`	`209`	`.cdk-keyboard-focused .mat-calendar-body-active,`
`210`	`210`	`.cdk-program-focused .mat-calendar-body-active {`
`211`		`- & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {`
	`211`	`+ & > .mat-calendar-body-cell-content {`
`212`	`212`	`outline: dotted 2px;`
	`213`	`+`
	`214`	`+ &.mat-calendar-body-selected {`
	`215`	`+ outline: solid 3px;`
	`216`	`+ }`
`213`	`217`	`}`
`214`	`218`	`}`
`215`	`219`