fix: picker: ensure keyboard navigation selected styles are implemented in year mode #523
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY:
Date Picker supports keyboard navigation, but year mode needs fixing:
Adds selected class names to picker year mode.
yearMode.mp4
GITHUB ISSUE (Open Source Contributors)
#501
JIRA TASK (Eightfold Employees Only):
CHANGE TYPE:
TEST COVERAGE:
TODO: Add keyboard navigation tests (Jest)
TEST PLAN:
Pull the PR branch and run
yarn
andyarn storybook
. test Date Picker keyboard navigation:Tab - Places focus on the calendar in the dropdown
Date mode:
Arrow left - Previous day
Arrow right - Next day
Arrow down - Next week
Arrow up - Previous week
Page down - Next month
Page up - previous month
CTRL + Arrow left - Previous year
CTRL + Arrow right - Next year
Week mode:
Arrow left - N/A
Arrow right - N/A
Arrow down - Next week
Arrow up - Previous week
Page down - Next month
Page up - previous month
CTRL + Arrow left - Previous year
CTRL + Arrow right - Next year
Month mode:
Arrow left - Previous month
Arrow right - Next month
Arrow down - Next month row
Arrow up - Previous month row
CTRL + Arrow left - Previous year
CTRL + Arrow right - Next year
Page down - N/A
Page up - N/A
Year mode:
Arrow left - Previous year
Arrow right - Next year
Arrow down - Next year row
Arrow up - Previous year row
CTRL + Arrow left - Previous decade
CTRL + Arrow right - Next decade
Page down - N/A
Page up - N/A
Decade mode:
Arrow left - Previous decade
Arrow right - Next decade
Arrow down - Next decade row
Arrow up - Previous decade row
CTRL + Arrow left - Previous century
CTRL + Arrow right - Next century
Page down - N/A
Page up - N/A