fix: Update home key and end key navigation in Calendar component

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 Closes Hacker0x01#4420
qburst · Jan 2, 2024 · 27e8c4b · 27e8c4b
1 parent 804b7ca
commit 27e8c4b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 21 deletions.
diff --git a/src/index.jsx b/src/index.jsx
@@ -38,6 +38,7 @@ import {
   getYear,
   getMonth,
   getStartOfWeek,
+  getEndOfWeek,
   registerLocale,
   setDefaultLocale,
   getDefaultLocale,
@@ -877,10 +878,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;

diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
@@ -854,25 +854,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));
@@ -2039,21 +2039,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", () => {