Fix #4420: Update home key and end key navigation in Calendar component #4430

balajis-qb · 2024-01-02T06:26:30Z

Description

This PR addresses the navigation behavior in the calendar component to enhance accessibility based on W3C WAI-ARIA principles. Previously, the home and end key handers navigated one year before and after the selected (which is the handlers for shift+PageUp and shift+PageDown), which could be confusing for users. The update modifies the behavior to move to the first and last day of the week, providing a more intuitive and accessible experience.

Reference Link

Changes Made

Updated home and end key handlers in the calendar component.
Navigation now focuses on the first and last day of the week, improving usability.
Updated the corresponding test cases.

Related issues

Closes #4420

I'll create a separate PR to fix the shift+pageUp and shift+pageDown issue, currently, it's working like PageUp and PageDown

Adjust home and end handlers to align with W3C WAI-ARIA principles. Previously navigation moves to the first and last day of the week instead of one year before and after the calendar. After this change, it's moving to [the first and last day of the week](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) Closes Hacker0x01#4420

pullrequest

✅ This pull request was sent to the PullRequest network.

@balajis-qb you can click here to see the review status or cancel the code review job.

pullrequest

PullRequest Breakdown

Reviewable lines of change

+ 11
- 23

68% JavaScript (tests)
32% JavaScript

Type of change

Fix - These changes are likely to be fixing a bug or issue.

pullrequest

This makes the appropriate change as described, but makes me wonder if there is any documentation that should also be updated to go along with it

James D

Reviewed with ❤️ by PullRequest

balajis-qb · 2024-01-02T06:41:17Z

Currently, the test case of this branch is failing because of some existing issues in the test case in the main branch itself. Due to that only a few of the other open PRs are failing I guess. I'll analyze the issue and work on it.

balajis-qb · 2024-01-02T06:50:44Z

This makes the appropriate change as described, but makes me wonder if there is any documentation that should also be updated to go along with it

James D

Reviewed with ❤️ by PullRequest

Thank you for reviewing my PR. Currently, I don't think we documented the keyboard navigation anywhere. We just documented a way to disable the keyboard navigation. I think as we are following the W3C WAI-ARIA principles we don't need to document it anywhere.

@martijnrusschen, Let me know if I need to update the current functionality anywhere.

pullrequest

The change makes sense given the provided ARIA documentation. Looks good to me here.

Nathanial L

Reviewed with ❤️ by PullRequest

codecov · 2024-01-02T09:42:18Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (57c0438) 95.30% compared to head (1320d9a) 95.30%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4430   +/-   ##
=======================================
  Coverage   95.30%   95.30%           
=======================================
  Files          28       28           
  Lines        2491     2491           
  Branches     1024     1024           
=======================================
  Hits         2374     2374           
  Misses        117      117

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

pullrequest

PullRequest reviewed the updates made to #4430 up until the latest commit (1320d9a). No further issues were found.

Reviewed by:

James D

barettjfed · 2024-01-03T12:38:09Z

@balajis-qb Thanks for doing this! Just FYI there is documentation in the read me about it. Wondering if that should get updated.
Read me

balajis-qb · 2024-01-03T12:59:01Z

Thank you @barettjfed for letting me know, I'll update the file

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-datepicker](https://togithub.com/Hacker0x01/react-datepicker) | [`^4.20.0` -> `^5.0.0`](https://renovatebot.com/diffs/npm/react-datepicker/4.23.0/5.1.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/react-datepicker/5.1.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-datepicker/5.1.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-datepicker/4.23.0/5.1.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-datepicker/4.23.0/5.1.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>Hacker0x01/react-datepicker (react-datepicker)</summary> ### [`v5.1.0`](https://togithub.com/Hacker0x01/react-datepicker/compare/v5.0.0...v5.1.0) [Compare Source](https://togithub.com/Hacker0x01/react-datepicker/compare/v5.0.0...v5.1.0) ### [`v5.0.0`](https://togithub.com/Hacker0x01/react-datepicker/releases/tag/v5.0.0): 5.0.0 [Compare Source](https://togithub.com/Hacker0x01/react-datepicker/compare/v4.25.0...v5.0.0) #### Breaking changes - Migrate from Popper.js to Floating-UI by [@G07cha](https://togithub.com/G07cha) in [Hacker0x01/react-datepicker#4393 #### What's Changed - 🐛 FIX: readability-isMonthinRange by [@mary139](https://togithub.com/mary139) in [Hacker0x01/react-datepicker#4421 - Fix [#4431](https://togithub.com/Hacker0x01/react-datepicker/issues/4431): Update the excludedDate to match the year to check of the isYearDisabled by [@balajis-qb](https://togithub.com/balajis-qb) in [Hacker0x01/react-datepicker#4432 - Fix [#4420](https://togithub.com/Hacker0x01/react-datepicker/issues/4420): Update home key and end key navigation in Calendar component by [@balajis-qb](https://togithub.com/balajis-qb) in [Hacker0x01/react-datepicker#4430 - Document [#4420](https://togithub.com/Hacker0x01/react-datepicker/issues/4420): 📝 Update the behavior of Home Key and End Key in the README file by [@balajis-qb](https://togithub.com/balajis-qb) in [Hacker0x01/react-datepicker#4438 - Fix [#4076](https://togithub.com/Hacker0x01/react-datepicker/issues/4076): Trigger onCalendarClose event and onChange even when the same date is selected as the start and the end date in a date range by [@balajis-qb](https://togithub.com/balajis-qb) in [Hacker0x01/react-datepicker#4394 - Excluded dates message by [@dvelazquez1282](https://togithub.com/dvelazquez1282) in [Hacker0x01/react-datepicker#4437 - Fix [#4456](https://togithub.com/Hacker0x01/react-datepicker/issues/4456): Add shift+pageUp key and shift+pageDown key navigation in Calendar component by [@balajis-qb](https://togithub.com/balajis-qb) in [Hacker0x01/react-datepicker#4457 - Fix options passed to date-fns/format by [@emilecantin](https://togithub.com/emilecantin) in [Hacker0x01/react-datepicker#4469 #### New Contributors - [@mary139](https://togithub.com/mary139) made their first contribution in [Hacker0x01/react-datepicker#4421 - [@G07cha](https://togithub.com/G07cha) made their first contribution in [Hacker0x01/react-datepicker#4393 - [@dvelazquez1282](https://togithub.com/dvelazquez1282) made their first contribution in [Hacker0x01/react-datepicker#4437 - [@emilecantin](https://togithub.com/emilecantin) made their first contribution in [Hacker0x01/react-datepicker#4469 **Full Changelog**: Hacker0x01/react-datepicker@v4.25.0...v5.0.0 ### [`v4.25.0`](https://togithub.com/Hacker0x01/react-datepicker/releases/tag/v4.25.0): 4.25.0 [Compare Source](https://togithub.com/Hacker0x01/react-datepicker/compare/v4.24.0...v4.25.0) #### What's Changed - feature: Add day parameter to renderMonthContent function by [@omarhoumz](https://togithub.com/omarhoumz) in [Hacker0x01/react-datepicker#4405 - Update 'Local Development' instruction of README.md by [@raceStarter](https://togithub.com/raceStarter) in [Hacker0x01/react-datepicker#4391 - Feature [#4091](https://togithub.com/Hacker0x01/react-datepicker/issues/4091) - Make the Calendar Icon clickable by [@balajis-qb](https://togithub.com/balajis-qb) in [Hacker0x01/react-datepicker#4417 #### New Contributors - [@omarhoumz](https://togithub.com/omarhoumz) made their first contribution in [Hacker0x01/react-datepicker#4405 - [@raceStarter](https://togithub.com/raceStarter) made their first contribution in [Hacker0x01/react-datepicker#4391 **Full Changelog**: Hacker0x01/react-datepicker@v4.24.0...v4.25.0 ### [`v4.24.0`](https://togithub.com/Hacker0x01/react-datepicker/releases/tag/v4.24.0): 4.24.0 [Compare Source](https://togithub.com/Hacker0x01/react-datepicker/compare/v4.23.0...v4.24.0) #### What's Changed - containerRef div shouldnt affect styling by [@joaopaulo-capy](https://togithub.com/joaopaulo-capy) in [Hacker0x01/react-datepicker#4384 - Fix: reflect the `holidays` prop change by [@shimech](https://togithub.com/shimech) in [Hacker0x01/react-datepicker#4373 - Disable clear button when the component is disabled by [@Rafatcb](https://togithub.com/Rafatcb) in [Hacker0x01/react-datepicker#4392 #### New Contributors - [@joaopaulo-capy](https://togithub.com/joaopaulo-capy) made their first contribution in [Hacker0x01/react-datepicker#4384 - [@shimech](https://togithub.com/shimech) made their first contribution in [Hacker0x01/react-datepicker#4373 - [@Rafatcb](https://togithub.com/Rafatcb) made their first contribution in [Hacker0x01/react-datepicker#4392 **Full Changelog**: Hacker0x01/react-datepicker@v4.23.0...v4.24.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/toeverything/AFFiNE).

pullrequest bot reviewed Jan 2, 2024

View reviewed changes

Balaji Sridharan added 2 commits January 2, 2024 15:05

Merge branch 'main' into issue-4420/fix/aria-home-and-end-key

c96a276

lint: Remove the unused import statements

1320d9a

pullrequest bot reviewed Jan 3, 2024

View reviewed changes

martijnrusschen merged commit 1be1893 into Hacker0x01:main Jan 3, 2024
6 checks passed

balajis-qb mentioned this pull request Jan 3, 2024

Document #4420: 📝 Update the behavior of Home Key and End Key in the README file #4438

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #4420: Update home key and end key navigation in Calendar component #4430

Fix #4420: Update home key and end key navigation in Calendar component #4430

balajis-qb commented Jan 2, 2024

pullrequest bot left a comment

pullrequest bot left a comment •

edited

pullrequest bot left a comment

balajis-qb commented Jan 2, 2024 •

edited

balajis-qb commented Jan 2, 2024

pullrequest bot left a comment

codecov bot commented Jan 2, 2024

pullrequest bot left a comment

barettjfed commented Jan 3, 2024

balajis-qb commented Jan 3, 2024

Fix #4420: Update home key and end key navigation in Calendar component #4430

Fix #4420: Update home key and end key navigation in Calendar component #4430

Conversation

balajis-qb commented Jan 2, 2024

Description

Changes Made

Related issues

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot left a comment • edited

Choose a reason for hiding this comment

PullRequest Breakdown

pullrequest bot left a comment

Choose a reason for hiding this comment

balajis-qb commented Jan 2, 2024 • edited

balajis-qb commented Jan 2, 2024

pullrequest bot left a comment

Choose a reason for hiding this comment

codecov bot commented Jan 2, 2024

Codecov Report

pullrequest bot left a comment

Choose a reason for hiding this comment

barettjfed commented Jan 3, 2024

balajis-qb commented Jan 3, 2024

pullrequest bot left a comment •

edited

balajis-qb commented Jan 2, 2024 •

edited