-
Notifications
You must be signed in to change notification settings - Fork 50.2k
[react-interactions] Add allowModifiers flag to FocusList + FocusTable #16971
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
Conversation
Details of bundled changes.Comparing: 6c73a1e...94266e9 react-interactions
|
de11108 to
33caccb
Compare
Move emulateBrowserTab Move emulateBrowserTab
33caccb to
7def627
Compare
| } | ||
| const key = event.key; | ||
|
|
||
| if (key === 'Tab') { |
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.
Given that "shift" is a modifier, and it impacts "Tab" (reverses the direction) it seems odd that we check for key === 'Tab' before bailing out if modifiers aren't allowed. Is this a bug?
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.
The modifiers logic is only for the keyboard arrow keys, not for Tab.
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.
I see. That wasn't super clear to me just looking at the code and going off of the name of the prop. Maybe some inline comment clarifying the intent could be helpful?
| } | ||
| const key = event.key; | ||
|
|
||
| if (key === 'Tab') { |
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.
I see. That wasn't super clear to me just looking at the code and going off of the name of the prop. Maybe some inline comment clarifying the intent could be helpful?
| return {}; | ||
| } | ||
|
|
||
| function hasModifierKey(event: KeyboardEvent): boolean { |
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.
This function is already in the 'shared' module
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.
I originally used that thinking the exact same thing, but it's actually slightly different as it expects a different event object (that it reads nativeEvent from). I'm not too bothered about duplication here, we can tidy up once we're happy with the moving parts. :)
This PR adds the
allowModifiersflag to theFocusListandFocusTablecomponents. This PR also changes the default behaviour for using arrow keys with modifier keys (they're now no-ops). I also moved some of the test code into a different module relating toemulateBrowserTabas per a follow up to @necolas's feedback.