bug(mat-date-range-picker): Focus indicator is not present for the selected date

[sourabhsoni0711]

Reproduction

Steps to reproduce:

1. Open the URL https://material.angular.io/components/datepicker/examples
2. Open date range picker in example 1
3. Navigate to the selected date using keyboard arrow keys
4. Observe that when focus is on selected date , user cannot understand where the current focus is.

Expected Behavior

Provide a focus indicator or drop shadow in addition to the background color change

Actual Behavior

Focus indicator is not present for the selected state of date's present inside date range picker. Hence it is difficult for the users to know where the focus is

Environment

• Angular: 11.0.3
• CDK/Material: 11.0.3
• Browser(s): Chrome browser 90.0.4430.100
• Operating System (e.g. Windows, macOS, Ubuntu): Google Chrome OS

[zarend]

Hello, Does enabling strong focus indicators fix this problem? -Zach

[cjlawson02]

Reproducible on Windows but not macOS

This is a regression from Angular v12. Both v13 and v14 have this issue now

[zarend]

Confirming that I can repro on both Mac and Window

It's ambiguous if Jan 23 is both focused and select or only selected.

Environment:

• 13.1 (22C65)
• Chrome Version 109.0.5414.87 (Official Build) (x86_64)