From 664df9f79cb25cc8ff829a8aba5510f8aa6fb8b2 Mon Sep 17 00:00:00 2001 From: Balaji Sridharan Date: Sun, 31 Dec 2023 22:29:58 +0530 Subject: [PATCH 1/2] 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](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) Closes #4420 --- src/index.jsx | 9 +++++++-- test/datepicker_test.test.js | 23 ++++------------------- 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/src/index.jsx b/src/index.jsx index 8f150bf60..acb127a48 100644 --- 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 index 6949e7cb5..270f5595f 100644 --- 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( - , - ); - TestUtils.Simulate.keyDown( - getSelectedDayNode(datePickerInline), - getKey("End"), - ); - expect(datePickerInline.state.shouldFocusDayInline).toBe(true); - }); }); it("should show the correct start of week for GB locale", () => { From 1320d9ae55701241a4162d185a9e91381cc0b282 Mon Sep 17 00:00:00 2001 From: Balaji Sridharan Date: Tue, 2 Jan 2024 15:10:20 +0530 Subject: [PATCH 2/2] lint: Remove the unused import statements --- src/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/index.jsx b/src/index.jsx index 568d4edc1..ed748d64f 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,