fix(3635): a11y - Sets focus to input on select #4285

justinseiter · 2023-10-02T17:19:54Z

Fixes: #3635 : Accessibility issue - when date picker closes focus does not return on input

Issue

When using the Escape or Enter keys as well as after selection with pointer, focus did not return to input.

Accessibility guidelines suggest that in these instances focus should return to the input.

What were the specific changes made?

Adds a sendFocusBackToInput method for handling returning focus. There were already two separate (nearly identical) implementations to handle this within handleSelect and onPopperKeydown. The sendFocusBackToInput is simply an abstraction to facilitate reuse in those instances as well as several others.
Adds tests around possible consumer implementations.

Additional notes/context

This work makes considerations not only for default implementations but as well as:

isClearable - Clicking clear now returns focus to input
customInput - This one Just Works ™️ as long as implemented as outlined in docs (ie with forwardRef)
shouldCloseOnSelect - Don't hide calendar on date selection means we'll keep focus within picker
disabledKeyboardNavigation- Pointer only
showTimeSelect - When this prop is enabled the picker currently closes once a time is selected. This work just makes sure that focus only returns on that event and not on date selection.
inline - Focus remains on picker
withPortal - Again, Just works ™️ thanks to previous contributors. :)
Pressing Escape while in the input field - If picker was open and focus was on input, pressing Escape would send focus to body. Now returns to input.

CleanShot.2023-09-29.at.12.07.25.mp4

pullrequest

✅ This pull request was sent to the PullRequest network.

@justinseiter you can click here to see the review status or cancel the code review job.

pullrequest

PullRequest Breakdown

Reviewable lines of change

+ 148
- 27

69% JavaScript (tests)
31% JavaScript

Type of change

Fix - These changes are likely to be fixing a bug or issue.

* Adds sendFocusBackToInput method for handling returning focus. * Adds tests around possible consumer implementations.

codecov · 2023-10-02T19:29:10Z

Codecov Report

Merging #4285 (1ffa8b6) into main (68c8914) will increase coverage by 0.17%.
Report is 12 commits behind head on main.
The diff coverage is 100.00%.

❗ Current head 1ffa8b6 differs from pull request most recent head 83afadf. Consider uploading reports for the commit 83afadf to get more accurate results

@@            Coverage Diff             @@
##             main    #4285      +/-   ##
==========================================
+ Coverage   96.34%   96.52%   +0.17%     
==========================================
  Files          25       25              
  Lines        2352     2358       +6     
  Branches      958      962       +4     
==========================================
+ Hits         2266     2276      +10     
+ Misses         86       82       -4

Files	Coverage Δ
src/index.jsx	`94.24% <100.00%> (+0.47%)`	⬆️
src/inputTime.jsx	`96.15% <100.00%> (+4.48%)`	⬆️

... and 1 file with indirect coverage changes

pullrequest

It looks like this feature should successfully improve accessibility as described. I like that the tests were expanded so much for this. I just flagged a few things that our automation caught for future work since some things have been deprecated that affect the tests.

Dallas

Reviewed with ❤️ by PullRequest

pullrequest · 2023-10-02T22:31:43Z

test/datepicker_test.test.js

@@ -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) => {


Nice clarification here on an existing test

◽ Compliment

Dallas

pullrequest · 2023-10-02T22:31:43Z

test/datepicker_test.test.js

+    // 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);


ISSUE: react/no-render-return-value (Severity: Medium)
Do not depend on the return value from ReactDOM.render

Remediation:
Automation Result: react/no-render-return-value Do not depend on the return value from ReactDOM.render
It looks like these tests will need to be updated at some point. This link gives information about how this is legacy and what to do instead.

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

pullrequest · 2023-10-02T22:31:43Z

test/datepicker_test.test.js

+      done();
+    });
+  });
+
  it("should hide the calendar when the pressing Shift + Tab in the date input", () => {
    var datePicker = TestUtils.renderIntoDocument(
      <DatePicker onBlur={onBlurSpy} />,


ISSUE: no-use-before-define (Severity: Medium)
'onBlurSpy' was used before it was defined.

Remediation:
Automation Result: no-use-before-define 'onBlurSpy' was used before it was defined.
This isn't actually in the changed code, but it looks like things are out of order here and that onBlurSpy is defined 2 lines below this. Does this test work as expected?

🤖 powered by PullRequest Automation 👋 verified by Dallas

pullrequest · 2023-10-02T22:31:44Z

test/timepicker_test.test.js

+  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);


ISSUE: react/no-find-dom-node (Severity: Medium)
Do not use findDOMNode. It doesn’t work with function components and is deprecated in StrictMode. See https://reactjs.org/docs/react-dom.html#finddomnode

Remediation:
Automation Result: react/no-find-dom-node Do not use findDOMNode. It doesn’t work with function components and is deprecated in StrictMode. See https://reactjs.org/docs/react-dom.html#finddomnode

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

pullrequest

This PR looks quite good for addressing the a11y problems outlined in the original issue. It's great to have the behavior for returning focus consolidated into one place and invoked where necessary, compared to the previous approach.

Thanks for such an excellent write-up as well.

I see the another reviewer already left some comments, and I don't see any further issues.

Nice work!

Ryan

Reviewed with ❤️ by PullRequest

pullrequest · 2023-10-03T05:06:14Z

test/datepicker_test.test.js

@@ -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


Adding in the relevant documentation here is really useful—thanks!

◽ Compliment

Ryan

pullrequest · 2023-10-03T05:06:14Z

test/datepicker_test.test.js

+    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)


Wow, this is also really great that you're walking us through each step of the test in detail. This helps a lot with readability and future maintainability.

◽ Compliment

Ryan

martijnrusschen

Thanks, this is looking great.

pullrequest bot reviewed Oct 2, 2023

View reviewed changes

a11y: Sends focus back to input on select

83afadf

* Adds sendFocusBackToInput method for handling returning focus. * Adds tests around possible consumer implementations.

justinseiter force-pushed the fix/issue-3635 branch from bd1cd27 to 83afadf Compare October 2, 2023 19:28

pullrequest bot reviewed Oct 2, 2023

View reviewed changes

pullrequest bot reviewed Oct 3, 2023

View reviewed changes

martijnrusschen approved these changes Oct 3, 2023

View reviewed changes

martijnrusschen merged commit 27788f5 into Hacker0x01:main Oct 3, 2023
4 checks passed

snyk-io bot mentioned this pull request Jun 11, 2024

[Snyk] Upgrade react-datepicker from 4.11.0 to 4.25.0 Opetushallitus/rekisterointi#30

Closed

jones58 mentioned this pull request Aug 6, 2024

[Snyk] Upgrade react-datepicker from 4.8.0 to 4.25.0 jones58/personal-knowledge-wiki#29

Merged

rowidanagah mentioned this pull request Aug 25, 2024

[Snyk] Upgrade react-datepicker from 4.11.0 to 4.25.0 rowidanagah/EduMentorMate#9

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(3635): a11y - Sets focus to input on select #4285

fix(3635): a11y - Sets focus to input on select #4285

justinseiter commented Oct 2, 2023

pullrequest bot left a comment

pullrequest bot left a comment •

edited

Loading

codecov bot commented Oct 2, 2023 •

edited

Loading

pullrequest bot left a comment

pullrequest bot Oct 2, 2023

pullrequest bot Oct 2, 2023

pullrequest bot Oct 2, 2023

pullrequest bot Oct 2, 2023

pullrequest bot left a comment

pullrequest bot Oct 3, 2023

pullrequest bot Oct 3, 2023

martijnrusschen left a comment

fix(3635): a11y - Sets focus to input on select #4285

fix(3635): a11y - Sets focus to input on select #4285

Conversation

justinseiter commented Oct 2, 2023

Fixes: #3635 : Accessibility issue - when date picker closes focus does not return on input

Issue

What were the specific changes made?

Additional notes/context

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot left a comment • edited Loading

Choose a reason for hiding this comment

PullRequest Breakdown

codecov bot commented Oct 2, 2023 • edited Loading

Codecov Report

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot Oct 2, 2023

Choose a reason for hiding this comment

◽ Compliment

pullrequest bot Oct 2, 2023

Choose a reason for hiding this comment

🤖 powered by PullRequest Automation 👋 verified by Dallas

pullrequest bot Oct 2, 2023

Choose a reason for hiding this comment

🤖 powered by PullRequest Automation 👋 verified by Dallas

pullrequest bot Oct 2, 2023

Choose a reason for hiding this comment

🤖 powered by PullRequest Automation 👋 verified by Dallas

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot Oct 3, 2023

Choose a reason for hiding this comment

◽ Compliment

pullrequest bot Oct 3, 2023

Choose a reason for hiding this comment

◽ Compliment

martijnrusschen left a comment

Choose a reason for hiding this comment

pullrequest bot left a comment •

edited

Loading

codecov bot commented Oct 2, 2023 •

edited

Loading