react-calendar icon indicating copy to clipboard operation
react-calendar copied to clipboard

Improved keyboard navigation/focus handling - Use roving tabindex

Open thepuzzlemaster opened this issue 1 year ago • 2 comments

This PR continues where #449 left off in implementing keyboard navigation using arrow keys.

thepuzzlemaster avatar Mar 09 '23 20:03 thepuzzlemaster

Okay, I think this is starting to feel pretty good. I updated a few of the behaviors And I added a whole bunch of tests as well.

  • It no longer allows for focus to progress beyond the min/max dates.
  • Clicking on a tile, sets it as the activeTabDate.
  • Navigating Up/Down to a new TileGroup now behaves more expectedly (imo) when the number of tiles is not the same in ever row (decade and century views).

I also started to implement aria role="grid", but ran into some breaking-change roadblocks, since the flex layout doesn't actually include any rows. I do think that would be a nice improvement for the future to get it to more properly implement the role="grid" guidance, since it does follow the grid behaviors. But I think it would be okay to push that improvement out to a future release.

A couple notes/questions: @wojtekmaj, the tests are fairly redundant, as I am testing the same basic keyboard functionality across all the different arrow keys, and also all the different calendar views. At one point I'd pulled out the shared logic into a helper method which definitely condensed the test file down, but I felt like it sacrificed a little bit in explicitness and readability, so I backed those changes out and left it in its current explicit format. That feels the best to me, but open to suggestions if you'd rather it be formatted differently.

As part of converting this to use a roving tabindex, I had to convert the Flex element from a function component to a forwardRef function component. Since this is an internal implementation detail, I'm not sure if this would be considered a breaking change or not, but figured it'd be worth mentioning in case some people think it might be.

thepuzzlemaster avatar Mar 11 '23 00:03 thepuzzlemaster

@wojtekmaj @thepuzzlemaster Hello, is there any information/update by when this can be released?

dutiyesh avatar Jul 31 '23 02:07 dutiyesh