Repository: Hacker0x01/react-datepicker (ts)

Issue:
Keyboard accessibility not aligned with ARIA authoring practices guide
**Describe the bug**
Some of the keyboard shortcuts are not aligned to what the W3C WAI-ARIA.
[Date Picker Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)
Like the Home and End button should go to the first and last day of the week.

**To Reproduce**
Steps to reproduce the behavior:

1. Open the calendar
2. Press Home on keyboard
3. Previous year is selected

**Expected behavior**
Should move the selected day to the first day of the week.


Pull request:
Fix #4420: Update home key and end key navigation in Calendar component
Closes #4420

## 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](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/#:~:text=the%20previous%20day.-,Home,to%20the%20last%20day%20(e.g.%20Saturday)%20of%20the%20current%20week.,-Page%20Up)

## 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

Patch:
diff --git a/src/index.jsx b/src/index.jsx
index f0eac76e..ed748d64 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -22,11 +22,9 @@ import {
   addDays,
   addMonths,
   addWeeks,
-  addYears,
   subDays,
   subMonths,
   subWeeks,
-  subYears,
   isDayDisabled,
   isDayInRange,
   getEffectiveMinDate,
@@ -38,6 +36,7 @@ import {
   getYear,
   getMonth,
   getStartOfWeek,
+  getEndOfWeek,
   registerLocale,
   setDefaultLocale,
   getDefaultLocale,
@@ -883,10 +882,14 @@ export default class DatePicker extends React.Component {
           newSelection = addMonths(copy, 1);
           break;
         case "Home":
-          newSelection = subYears(copy, 1);
+          newSelection = getStartOfWeek(
+            copy,
+            this.props.locale,
+            this.props.calendarStartDay,
+          );
           break;
         case "End":
-          newSelection = addYears(copy, 1);
+          newSelection = getEndOfWeek(copy);
           break;
         default:
           newSelection = null;


Test patch:
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
index e846097e..a2a0fbdc 100644
--- a/test/datepicker_test.test.js
+++ b/test/datepicker_test.test.js
@@ -932,25 +932,25 @@ describe("DatePicker", () => {
     ).toBe(utils.formatDate(data.copyM, data.testFormat));
   });
   it("should handle onDayKeyDown End", () => {
-    var data = getOnInputKeyDownStuff();
+    const data = getOnInputKeyDownStuff();
     TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowDown"));
     TestUtils.Simulate.keyDown(
       getSelectedDayNode(data.datePicker),
       getKey("End"),
     );
-    data.copyM = utils.addYears(data.copyM, 1);
+    data.copyM = utils.getEndOfWeek(data.copyM);
     expect(
       utils.formatDate(data.datePicker.state.preSelection, data.testFormat),
     ).toBe(utils.formatDate(data.copyM, data.testFormat));
   });
   it("should handle onDayKeyDown Home", () => {
-    var data = getOnInputKeyDownStuff();
+    const data = getOnInputKeyDownStuff();
     TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowDown"));
     TestUtils.Simulate.keyDown(
       getSelectedDayNode(data.datePicker),
       getKey("Home"),
     );
-    data.copyM = utils.subYears(data.copyM, 1);
+    data.copyM = utils.getStartOfWeek(data.copyM);
     expect(
       utils.formatDate(data.datePicker.state.preSelection, data.testFormat),
     ).toBe(utils.formatDate(data.copyM, data.testFormat));
@@ -2117,21 +2117,6 @@ describe("DatePicker", () => {
       );
       expect(datePickerInline.state.shouldFocusDayInline).toBe(true);
     });
-
-    it("should be set to true when changing displayed month with End key", () => {
-      const datePickerInline = TestUtils.renderIntoDocument(
-        <DatePicker
-          selected={utils.newDate("2020-11-15")}
-          dateFormat={dateFormat}
-          inline
-        />,
-      );
-      TestUtils.Simulate.keyDown(
-        getSelectedDayNode(datePickerInline),
-        getKey("End"),
-      );
-      expect(datePickerInline.state.shouldFocusDayInline).toBe(true);
-    });
   });
 
   it("should show the correct start of week for GB locale", () => {