Calendar: Material Design theme keyboard navigation of overlay CSS focus bug (accessibility)

[ian4uia]

For MD and MDC themes. When using the down arrow to enter the calendar overlay the date that has focus has no style to distinguish it from the other dates making it difficult to navigate with the keyboard.

I've tried the Bootstrap Blue and Purple themes and also the Lara Light Blue theme and the keyboard navigation provides visible feedback as expected. I've replicated the issue with Chrome, Edge and Firefox.

Version: 3.16.2 To replicate:

1. Go to https://www.primefaces.org/primevue/calendar
2. Click the style cog and select Material Design Indigo
3. Using the Icon input as an example click the calendar icon and select today's date from the overlay.
4. Use the tab key to select the calendar icon and then the spacebar to activate the overlay.
5. Press the down arrow to enter the overlay and focus today's date - There is no visible indication what day has focus.
6. Press an arrow key to select a date adjacent to today. - Again, there is no visible indication to identify your chosen date.
7. Press return to select the date.

[ian4uia]

As a temporary fix I've updated the theme.css as follows:

.p-datepicker table td > span:focus {
  outline: 0 none;
  outline-offset: 0;
  /* box-shadow: none; IJ */
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12); /* IJ */
}

And

.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
  outline: 0 none;
  outline-offset: 0;
  /* box-shadow: none; IJ */
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12); /* IJ */
}

I chose the shadow colour by using the same one from the .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus background.