-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(3635): a11y - Sets focus to input on select #4285
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -97,7 +97,7 @@ describe("DatePicker", () => { | |
expect(datePicker.state.open).toBe(false); | ||
}); | ||
|
||
it("should close the popper and return focus to the date input.", (done) => { | ||
it("should close the popper and return focus to the date input on Escape.", (done) => { | ||
// https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html | ||
// Date Picker Dialog | Escape | Closes the dialog and returns focus to the Choose Date button. | ||
var div = document.createElement("div"); | ||
|
@@ -123,6 +123,53 @@ describe("DatePicker", () => { | |
}); | ||
}); | ||
|
||
it("should close the popper and return focus to the date input on Enter.", (done) => { | ||
// https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
// Date Picker Dialog | Date Grid | Enter | Closes the dialog and returns focus to the Choose Date button. | ||
var div = document.createElement("div"); | ||
document.body.appendChild(div); | ||
var datePicker = ReactDOM.render(<DatePicker />, div); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ISSUE: react/no-render-return-value (Severity: Medium) Remediation: The existing test has this same code. It doesn't necessarily need to be fixed in this PR. 🤖 powered by PullRequest Automation 👋 verified by Dallas |
||
|
||
// user focuses the input field, the calendar opens | ||
var dateInput = div.querySelector("input"); | ||
TestUtils.Simulate.focus(dateInput); | ||
|
||
// user may tab or arrow down to the current day (or some other element in the popper) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
var today = div.querySelector(".react-datepicker__day--today"); | ||
today.focus(); | ||
|
||
// user hits Enter | ||
TestUtils.Simulate.keyDown(today, getKey("Enter")); | ||
defer(() => { | ||
expect(datePicker.calendar).toBeFalsy(); | ||
expect(datePicker.state.preventFocus).toBe(false); | ||
expect(document.activeElement).toBe(div.querySelector("input")); | ||
done(); | ||
}); | ||
}); | ||
|
||
it("should not close the popper and keep focus on selected date if showTimeSelect is enabled.", (done) => { | ||
var div = document.createElement("div"); | ||
document.body.appendChild(div); | ||
var datePicker = ReactDOM.render(<DatePicker showTimeSelect />, div); | ||
|
||
// user focuses the input field, the calendar opens | ||
var dateInput = div.querySelector("input"); | ||
TestUtils.Simulate.focus(dateInput); | ||
|
||
// user may tab or arrow down to the current day (or some other element in the popper) | ||
var today = div.querySelector(".react-datepicker__day--today"); | ||
today.focus(); | ||
|
||
// user hits Enter | ||
TestUtils.Simulate.keyDown(today, getKey("Enter")); | ||
defer(() => { | ||
expect(datePicker.calendar).toBeTruthy(); | ||
expect(document.activeElement).toBe(today); | ||
done(); | ||
}); | ||
}); | ||
|
||
it("should not re-focus the date input when focusing the year dropdown", () => { | ||
const onBlurSpy = jest.fn(); | ||
const datePicker = mount( | ||
|
@@ -214,6 +261,24 @@ describe("DatePicker", () => { | |
expect(datePicker.state.open).toBe(true); | ||
}); | ||
|
||
it("should keep focus within calendar when clicking a day on the calendar and shouldCloseOnSelect prop is false", () => { | ||
var div = document.createElement("div"); | ||
document.body.appendChild(div); | ||
ReactDOM.render(<DatePicker shouldCloseOnSelect={false} />, div); | ||
|
||
// user focuses the input field, the calendar opens | ||
var dateInput = div.querySelector("input"); | ||
TestUtils.Simulate.focus(dateInput); | ||
|
||
// user may tab or arrow down to the current day (or some other element in the popper) | ||
var today = div.querySelector(".react-datepicker__day--today"); | ||
today.focus(); | ||
|
||
// user hits Enter | ||
TestUtils.Simulate.keyDown(today, getKey("Enter")); | ||
expect(document.activeElement).toBe(today); | ||
}); | ||
|
||
it("should set open to true if showTimeInput is true", () => { | ||
var datePicker = TestUtils.renderIntoDocument( | ||
<DatePicker shouldCloseOnSelect={false} showTimeInput />, | ||
|
@@ -325,6 +390,23 @@ describe("DatePicker", () => { | |
expect(datePicker.calendar).toBeFalsy(); | ||
}); | ||
|
||
it("should hide the calendar and keep focus on input when pressing escape in the date input", (done) => { | ||
var div = document.createElement("div"); | ||
document.body.appendChild(div); | ||
var datePicker = ReactDOM.render(<DatePicker />, div); | ||
|
||
// user focuses the input field, the calendar opens | ||
var dateInput = div.querySelector("input"); | ||
TestUtils.Simulate.focus(dateInput); | ||
|
||
TestUtils.Simulate.keyDown(dateInput, getKey("Escape")); | ||
defer(() => { | ||
expect(datePicker.calendar).toBeFalsy(); | ||
expect(document.activeElement).toBe(dateInput); | ||
done(); | ||
}); | ||
}); | ||
|
||
it("should hide the calendar when the pressing Shift + Tab in the date input", () => { | ||
var datePicker = TestUtils.renderIntoDocument( | ||
<DatePicker onBlur={onBlurSpy} />, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ISSUE: no-use-before-define (Severity: Medium) Remediation: 🤖 powered by PullRequest Automation 👋 verified by Dallas |
||
|
@@ -403,6 +485,26 @@ describe("DatePicker", () => { | |
expect(datePicker.state.inputValue).toBeNull(); | ||
}); | ||
|
||
it("should return focus to input when clear button is used", (done) => { | ||
var div = document.createElement("div"); | ||
document.body.appendChild(div); | ||
var datePicker = ReactDOM.render( | ||
<DatePicker selected={utils.newDate("2015-12-15")} isClearable />, | ||
div, | ||
); | ||
|
||
var clearButton = TestUtils.findRenderedDOMComponentWithClass( | ||
datePicker, | ||
"react-datepicker__close-icon", | ||
); | ||
TestUtils.Simulate.click(clearButton); | ||
|
||
defer(() => { | ||
expect(document.activeElement).toBe(div.querySelector("input")); | ||
done(); | ||
}); | ||
}); | ||
|
||
it("should set the title attribute on the clear button if clearButtonTitle is supplied", () => { | ||
const datePicker = TestUtils.renderIntoDocument( | ||
<DatePicker | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
import React from "react"; | ||
import defer from "lodash/defer"; | ||
import DatePicker from "../src/index.jsx"; | ||
import TestUtils from "react-dom/test-utils"; | ||
import ReactDOM from "react-dom"; | ||
|
@@ -165,6 +166,21 @@ describe("TimePicker", () => { | |
expect(getInputString()).toBe("February 28, 2018 12:30 AM"); | ||
}); | ||
|
||
it("should return focus to input once time is selected", (done) => { | ||
document.body.appendChild(div); // So we can check the dom later for activeElement | ||
renderDatePicker("February 28, 2018 4:43 PM"); | ||
const dateInput = ReactDOM.findDOMNode(datePicker.input); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ISSUE: react/no-find-dom-node (Severity: Medium) Remediation: It looks like this has been deprecated and should be updated soon. It is being used many times in this file, so it should probably be its own PR later. 🤖 powered by PullRequest Automation 👋 verified by Dallas |
||
TestUtils.Simulate.focus(dateInput); | ||
const time = TestUtils.findRenderedComponentWithType(datePicker, Time); | ||
const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li"); | ||
TestUtils.Simulate.keyDown(lis[1], getKey("Enter")); | ||
|
||
defer(() => { | ||
expect(document.activeElement).toBe(dateInput); | ||
done(); | ||
}); | ||
}); | ||
|
||
it("should not select time when Escape is pressed", () => { | ||
renderDatePicker("February 28, 2018 4:43 PM"); | ||
TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input)); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice clarification here on an existing test
◽ Compliment
Dallas