feat(react/Calendar): enhance keyboard navigation and date selection

[cheton]

Demo: https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-909/components/date-pickers/calendar

New Updates

• Use ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Home, and End keys to navigate between days in month view.
• When pressing TAB or TAB + SHIFT to navigate from outside the calendar into it, the focus should be set to today’s date or the specified selected date.
• Enable date selection with SPACE or ENTER keys'
• Add support for year selection with keyboard navigation

Operation Keys

• Forward navigation: Press Tab
• Backward navigation: Press Shift + Tab
• Month selection (⬅️➡️): Press Space or Enter on the arrow buttons (⬅️➡️)
• Year selection (⬆️⬇️): Press ArrowUp or ArrowDown keys to increase or decrease current year
• Day selection
  • Press ⬅️➡️⬆️⬇️ to navigate between days
  • Press Enter or Space to select date.
  • Note: Deselecting is supported for the Calendar view, but not implemented in the demo.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

🦋 Changeset detected

Latest commit: 186083f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@tonic-ui/react	Minor
@tonic-ui/utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Attention: Patch coverage is 33.33333% with 118 lines in your changes missing coverage. Please review.

Project coverage is 77.72%. Comparing base (33117d0) to head (186083f).
Report is 1 commits behind head on v2.

Files	Patch %	Lines
...ckages/react/src/date-pickers/Calendar/Calendar.js	21.29%	85 Missing ⚠️
...ickers/Calendar/YearMonthPicker/YearMonthPicker.js	37.77%	28 Missing ⚠️
...s/react/src/date-pickers/Calendar/MonthDate/Day.js	42.85%	4 Missing ⚠️
packages/utils/src/dom-query.js	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##               v2     #909      +/-   ##
==========================================
- Coverage   78.84%   77.72%   -1.12%     
==========================================
  Files         378      377       -1     
  Lines        6168     6295     +127     
==========================================
+ Hits         4863     4893      +30     
- Misses       1305     1402      +97     

Flag	Coverage Δ
-base	77.72% <33.33%> (-1.12%)	⬇️
-github	77.72% <33.33%> (-1.12%)	⬇️
-hooks	77.72% <33.33%> (-1.12%)	⬇️
-icons	77.72% <33.33%> (-1.12%)	⬇️
-system	77.72% <33.33%> (-1.12%)	⬇️
codemod	77.72% <33.33%> (-1.12%)	⬇️
react	77.72% <33.33%> (-1.12%)	⬇️
theme	77.72% <33.33%> (-1.12%)	⬇️
utils	77.72% <33.33%> (-1.12%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[trendmicro-frontend-bot]

Tonic UI Demo

• 2024-08-22 07:57:57 +0000 The PR feat(react/Calendar): enhance keyboard navigation and date selection #909 (186083f) has been deployed to https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-909/

[tinaClin]

@cheton There is a side effect: when I try to select a date for the next month (September 20), the Calendar UI jumps back to the current month (August).

Screen.Recording.2024-08-19.at.9.50.41.AM.mov

[cheton]

@cheton There is a side effect: when I try to select a date for the next month (September 20), the Calendar UI jumps back to the current month (August).

Screen.Recording.2024-08-19.at.9.50.41.AM.mov

@tinaClin
The focus handling regression was resolved in b88001d

[cheton]

@tinaClin I updated the code to manage the focus change exclusively for the "Tab" key (d5fa719)

[cheton]

@trend-albert-shala Could you help check the keyboard navigation behavior in the demo?

[trend-albert-shala]

Operation Keys

@cheton the changes look good, tested the options outlined under Operation Keys, and they're working as expected. Btw I'm on a Mac, if additional testing on a Windows machine is needed

[cheton]

@cheton the changes look good, tested the options outlined under Operation Keys, and they're working as expected. Btw I'm on a Mac, if additional testing on a Windows machine is needed

Thank you for confirming. We have tested it on both Windows and Mac, using Chrome and Safari browsers.

For Safari, users will need to enable "Tab" navigation first:

1. Open the Safari browser on your Mac
2. Go to "Safari > Preferences > Advanced"
3. Check the option Press Tab to highlight each item on a webpage to enable tab navigation