You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is your feature request related to a problem? Please describe.
After tab-focusing the Month or Year from the calendar and hitting "Enter" or "Space" to display the grid of Months or Years respectively, you can tab into the grid and select a new Month or Year using the Left and Right arrow keys, but it isn't possible to see which Month or Year you have selected because they have no focus styling. This is additionally confusing as the Up and Down arrows scroll the grid instead of moving focus, so it is unlikely that any user would be able to use the component if navigating visually with a keyboard.
Describe the solution you'd like
Currently it looks like all of the focus styles are being removed by this CSS rule:
This outline:none; should be removed and proper focus styles should be added for all focusable elements in the datepicker to make react-modern-calendar-datepicker visually navigable with a keyboard.
Describe alternatives you've considered
Adding brand new :focus styles with an outline as is common elsewhere instead of re-using the :hover styling.
Additional context
Add any other context or screenshots about the feature request here.
The text was updated successfully, but these errors were encountered:
Is your feature request related to a problem? Please describe.
After tab-focusing the Month or Year from the calendar and hitting "Enter" or "Space" to display the grid of Months or Years respectively, you can tab into the grid and select a new Month or Year using the Left and Right arrow keys, but it isn't possible to see which Month or Year you have selected because they have no focus styling. This is additionally confusing as the Up and Down arrows scroll the grid instead of moving focus, so it is unlikely that any user would be able to use the component if navigating visually with a keyboard.
Describe the solution you'd like
Currently it looks like all of the focus styles are being removed by this CSS rule:
This
outline:none;
should be removed and proper focus styles should be added for all focusable elements in the datepicker to make react-modern-calendar-datepicker visually navigable with a keyboard.Describe alternatives you've considered
Adding brand new :focus styles with an outline as is common elsewhere instead of re-using the :hover styling.
Additional context
Add any other context or screenshots about the feature request here.
The text was updated successfully, but these errors were encountered: