From 7916fc123200db5bc77e237ee4de4f1b3e795b74 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 10 May 2020 10:55:26 +0200
Subject: [PATCH] fix(datepicker): strong focus indication in calendar always
 shown

We ended up using the same pseudo elements for the strong focus indication and the date range, causing the focus indication to always be shown. These changes move the focus indicator to a different element.
---
 src/material/core/focus-indicators/_focus-indicators.scss | 3 +++
 src/material/datepicker/calendar-body.html                | 4 ++--
 src/material/datepicker/calendar-body.spec.ts             | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss
index 9a57b9f34fe7..ed53ce4a28d7 100644
--- a/src/material/core/focus-indicators/_focus-indicators.scss
+++ b/src/material/core/focus-indicators/_focus-indicators.scss
@@ -70,6 +70,9 @@
   // is present.
   .mat-focus-indicator.mat-option.mat-active::before,
 
+  // The focus indicator in the calendar is placed on an element inside the cell.
+  .mat-calendar-body-active .mat-focus-indicator::before,
+
   // For all other components, render the focus indicator on focus.
   .mat-focus-indicator:focus::before {
     content: '';
diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index cb6d2d4d1e6c..78605033398d 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -29,7 +29,7 @@
   </td>
   <td *ngFor="let item of row; let colIndex = index"
       role="gridcell"
-      class="mat-calendar-body-cell mat-focus-indicator"
+      class="mat-calendar-body-cell"
       [ngClass]="item.cssClasses"
       [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
       [attr.data-mat-row]="rowIndex"
@@ -54,7 +54,7 @@
       [style.width]="_cellWidth"
       [style.paddingTop]="_cellPadding"
       [style.paddingBottom]="_cellPadding">
-      <div class="mat-calendar-body-cell-content"
+      <div class="mat-calendar-body-cell-content mat-focus-indicator"
         [class.mat-calendar-body-selected]="_isSelected(item)"
         [class.mat-calendar-body-today]="todayValue === item.compareValue">
         {{item.displayValue}}
diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts
index bc5b0c9cf1fb..20c16da6caf7 100644
--- a/src/material/datepicker/calendar-body.spec.ts
+++ b/src/material/datepicker/calendar-body.spec.ts
@@ -107,7 +107,7 @@ describe('MatCalendarBody', () => {
     });
 
     it('should have a focus indicator', () => {
-      expect(cellEls.every(element => element.classList.contains('mat-focus-indicator')))
+      expect(cellEls.every(element => !!element.querySelector('.mat-focus-indicator')))
           .toBe(true);
     });