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

[@mantine/dates]: Change tab order behavior to match native date pickers #3876

Merged
merged 4 commits into from Mar 28, 2023
Merged

[@mantine/dates]: Change tab order behavior to match native date pickers #3876

merged 4 commits into from Mar 28, 2023

Conversation

filiptammergard
Copy link
Contributor

@filiptammergard filiptammergard commented Mar 23, 2023

Fixes #3662.

This changes keyboard navigation behavior pretty drastically.

  • ArrowRight moves focus to the closest succeeding non-disabled cell. If current focus is on last non-disabled cell in row, focus is moved to first non-disabled cell in next row.
  • ArrowLeft moves focus to the closest preceding non-disabled cell. If current focus is on first non-disabled cell in row, focus is moved to last non-disabled cell in previous row.
  • ArrowDown moves focus to closest succeeding non-disabled cell in the same column.
  • ArrowUp moves focus to closest preceding non-disabled cell in the same column.

The other major change is behavior when multiple pickers are rendered side-by-side. Take this one as an example: https://mantine.dev/dates/date-picker/#number-of-columns

image

Behavior before:

  • When focus is on March 5, clicking ArrowRight won't move focus.
  • When focus is on March 12, clicking ArrowRight moves focus to April 3.
  • When focus is on March 31, clicking ArrowRight won't move focus.
  • When focus is on March 31, clicking ArrowDown won't move focus.
  • When focus is on April 1, clicking ArrowLeft won't move focus.
  • When focus is on April 3, clicking ArrowLeft moves focus to March 12.
  • When focus is on April 24, clicking ArrowLeft won't move focus.
  • When focus is on April 1, clicking ArrowUp won't move focus.

Summary of behavior:

  • Focus can only be moved to an adjacent cell.
  • Focus can only be moved from a cell in one picker to a cell in another picker if the latter cell happen to be non-disabled and non-hidden.

There is an inconsistency in that if a date is disabled or hidden, focus is moved to the next date if that date is within the picker, otherwise focus is not moved.

Behavior after:

  • When focus is on March 5, clicking ArrowRight moves focus to March 6 (the next date).
  • When focus is on March 12, clicking ArrowRight moves focus to March 13 (the next date).
  • When focus is on March 31, clicking ArrowRight moves focus to April 1 (the next date).
  • When focus is on March 31, clicking ArrowDown moves focus to April 7 (the next week).
  • When focus is on April 1, clicking ArrowLeft moves focus to March 31 (the previous date).
  • When focus is on April 3, clicking ArrowLeft moves focus to April 2 (the previous date).
  • When focus is on April 24, clicking ArrowLeft moves focus to April 23 (the previous date.
  • When focus is on April 1, clicking ArrowUp moves focus to March 25 (the previous week).

Summary of behavior:

  • Focus is always moved to the next non-disabled date with ArrowRight, the previous non-disabled date with ArrowLeft, the next non-disabled week with ArrowDown and the previous non-disabled week with ArrowUp.
  • Only exception is that you can only move focus within the currently rendered pickers. I.e., when focus is on March 1 in the example above, clicking ArrowLeft won't change the displayed months. This could potentially be something to implement in the future.

Behavior after matches with native date picker behavior, with guidelines for date grids and with Spectrum's date picker.

@filiptammergard filiptammergard marked this pull request as ready for review March 23, 2023 16:21
@rtivital
Copy link
Member

Works great, thanks for your work on this issue!

@rtivital rtivital merged commit e23ae01 into mantinedev:master Mar 28, 2023
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unexpected keyboard interactions in calendar components
2 participants