Skip to content

Commit

Permalink
fix: Update home key and end key navigation in Calendar component
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Balaji Sridharan committed Jan 2, 2024
1 parent 804b7ca commit 62807cf
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 21 deletions.
9 changes: 7 additions & 2 deletions src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
getYear,
getMonth,
getStartOfWeek,
getEndOfWeek,
registerLocale,
setDefaultLocale,
getDefaultLocale,
Expand Down Expand Up @@ -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;
Expand Down
23 changes: 4 additions & 19 deletions test/datepicker_test.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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", () => {
Expand Down

0 comments on commit 62807cf

Please sign in to comment.