Merge pull request #4430 from qburst/issue-4420/fix/aria-home-and-end…

…-key Fix #4420: Update home key and end key navigation in Calendar component
Hacker0x01 · Jan 3, 2024 · 1be1893 · 1be1893
2 parents c5d1ee3 + 1320d9a
commit 1be1893
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 23 deletions.
diff --git 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;

diff --git 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", () => {