fix(datepicker): strong focus indication in calendar always shown (#19304)

Author: crisbeto

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: '';

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}}

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);
     });