[a11y] Closes calendar when escape is pressed #1595
Conversation
src/components/DateRangePicker.jsx
Outdated
| showKeyboardShortcuts: false, | ||
| }); | ||
|
|
||
| onFocusChange(null); |
There was a problem hiding this comment.
should this maybe be in a callback to setState, so it's sure to happen after the state is set?
iambrandonn
changed the title
|
@ljharb Any other thoughts on this PR? |
|
Seems good to me; I'm going to defer to @backwardok and @majapw here. |
| @@ -159,6 +162,8 @@ class DateInput extends React.PureComponent { | |||
| } else if (key === '?') { | |||
| e.preventDefault(); | |||
| onKeyDownQuestionMark(e); | |||
| } else if (key === 'Escape') { | |||
There was a problem hiding this comment.
Seems like you'd also want to add escape key handling within the calendar overlay itself as well.
|
@backwardok I've made a few more changes so the calendar will close consistently, whether the user gained focus by pressing the down arrow key or by pushing the tab key. It seems to be working well for me. I'm willing to set up a github pages branch so you can see it working... but for some reason |
| @@ -267,6 +269,15 @@ class DateRangePicker extends React.PureComponent { | |||
| }); | |||
| } | |||
|
|
|||
| onKeyDownTab(evt) { | |||
| const { focusedInput } = this.props; | |||
| if (focusedInput !== null) { | |||
There was a problem hiding this comment.
There's another change (#1553) that's going to make it so that there's only one instance of the calendar, and it sits between the two inputs. This will end up breaking the behavior you're adding here, since it will cause a keyboard trap on the last input.
In general, it's not advised to manually handle focus from tabbing. What's the need for adding this behavior here?
Fixes #18