Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus styles missing from Month and Year grid items #312

Open
drooJohnson opened this issue Mar 9, 2022 · 0 comments
Open

Focus styles missing from Month and Year grid items #312

drooJohnson opened this issue Mar 9, 2022 · 0 comments
Labels
discussion feature Something new is needed

Comments

@drooJohnson
Copy link

drooJohnson commented Mar 9, 2022

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:

.Calendar > :not(.Calendar__footer) button {
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

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.

@drooJohnson drooJohnson added discussion feature Something new is needed labels Mar 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion feature Something new is needed
Projects
None yet
Development

No branches or pull requests

1 participant