Skip to content

Conversation

@trueadm
Copy link
Contributor

@trueadm trueadm commented Oct 1, 2019

This PR adds the allowModifiers flag to the FocusList and FocusTable components. 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 to emulateBrowserTab as per a follow up to @necolas's feedback.

@sizebot
Copy link

sizebot commented Oct 1, 2019

Details of bundled changes.

Comparing: 6c73a1e...94266e9

react-interactions

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-interactions-events/focus.development.js 0.0% 0.0% 11.81 KB 11.81 KB 2.57 KB 2.57 KB UMD_DEV
react-interactions-events/tap.development.js 0.0% 0.0% 17.8 KB 17.8 KB 3.85 KB 3.85 KB UMD_DEV
react-interactions-events/focus.production.min.js 0.0% 🔺+0.1% 4.31 KB 4.31 KB 1.46 KB 1.46 KB UMD_PROD
react-interactions-events/tap.production.min.js 0.0% 0.0% 6.23 KB 6.23 KB 2.35 KB 2.35 KB UMD_PROD
ReactFocusTable-dev.js +7.5% +10.4% 9.08 KB 9.77 KB 1.91 KB 2.11 KB FB_WWW_DEV
ReactFocusList-dev.js +13.0% +15.0% 5.54 KB 6.26 KB 1.34 KB 1.55 KB FB_WWW_DEV
react-interactions-events/context-menu.development.js 0.0% +0.1% 2.68 KB 2.68 KB 1007 B 1008 B UMD_DEV
react-interactions-events/input.development.js 0.0% +0.1% 4.52 KB 4.52 KB 1.44 KB 1.45 KB UMD_DEV
react-interactions-events/scroll.development.js 0.0% +0.1% 6.3 KB 6.3 KB 1.65 KB 1.65 KB UMD_DEV
react-interactions-events/context-menu.production.min.js 0.0% 🔺+0.1% 1.39 KB 1.39 KB 729 B 730 B UMD_PROD
react-interactions-events/input.production.min.js 0.0% 🔺+0.1% 1.84 KB 1.84 KB 984 B 985 B UMD_PROD
react-interactions-accessibility/focus-manager.development.js 0.0% +0.1% 2.76 KB 2.76 KB 1.03 KB 1.03 KB NODE_DEV
react-interactions-events/context-menu.production.min.js 0.0% 🔺+0.1% 1.2 KB 1.2 KB 668 B 669 B NODE_PROD
react-interactions-events/input.production.min.js 0.0% 🔺+0.1% 1.66 KB 1.66 KB 917 B 918 B NODE_PROD
react-interactions-events/hover.development.js 0.0% +0.1% 7 KB 7 KB 1.55 KB 1.56 KB UMD_DEV
react-interactions-events/press-legacy.development.js 0.0% -0.0% 24.6 KB 24.6 KB 6.08 KB 6.07 KB UMD_DEV
react-interactions-events/hover.production.min.js 0.0% 🔺+0.1% 3.12 KB 3.12 KB 1.13 KB 1.13 KB UMD_PROD
react-interactions-events/hover.development.js 0.0% +0.1% 6.82 KB 6.82 KB 1.51 KB 1.51 KB NODE_DEV
react-interactions-accessibility/focus-table.development.js +6.9% +10.5% 9.27 KB 9.91 KB 1.95 KB 2.16 KB NODE_DEV
react-interactions-accessibility/focus-list.development.js +11.9% +14.4% 5.59 KB 6.26 KB 1.37 KB 1.57 KB NODE_DEV
react-interactions-events/hover.production.min.js 0.0% 🔺+0.2% 2.94 KB 2.94 KB 1.07 KB 1.08 KB NODE_PROD
react-interactions-events/press-legacy.production.min.js 0.0% -0.0% 7.13 KB 7.13 KB 2.71 KB 2.71 KB NODE_PROD
react-interactions-accessibility/focus-table.production.min.js 🔺+5.5% 🔺+5.3% 2.96 KB 3.12 KB 1.18 KB 1.24 KB NODE_PROD
react-interactions-accessibility/focus-list.production.min.js 🔺+9.5% 🔺+9.0% 1.92 KB 2.11 KB 910 B 992 B NODE_PROD
ReactFocusTable-prod.js 🔺+15.4% 🔺+8.7% 7.68 KB 8.87 KB 1.69 KB 1.84 KB FB_WWW_PROD
ReactFocusList-prod.js 🔺+12.9% 🔺+10.0% 5.08 KB 5.73 KB 1.2 KB 1.32 KB FB_WWW_PROD
react-interactions-events/focus.development.js 0.0% 0.0% 11.63 KB 11.63 KB 2.53 KB 2.53 KB NODE_DEV
react-interactions-events/tap.development.js 0.0% 0.0% 17.62 KB 17.62 KB 3.79 KB 3.8 KB NODE_DEV
react-interactions-accessibility/tabbable-scope.development.js 0.0% +0.2% 1.2 KB 1.2 KB 598 B 599 B NODE_DEV
react-interactions-events/press.production.min.js 0.0% 🔺+0.1% 2.33 KB 2.33 KB 1 KB 1 KB NODE_PROD
react-interactions-events/tap.production.min.js 0.0% 0.0% 6.06 KB 6.06 KB 2.3 KB 2.3 KB NODE_PROD
react-interactions-accessibility/tabbable-scope.production.min.js 0.0% 🔺+0.2% 662 B 662 B 438 B 439 B NODE_PROD
react-interactions-events/drag.development.js 0.0% +0.1% 5.23 KB 5.23 KB 1.54 KB 1.54 KB UMD_DEV
react-interactions-events/swipe.development.js 0.0% +0.1% 6 KB 6 KB 1.63 KB 1.63 KB UMD_DEV
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.39 KB 2.39 KB 1.21 KB 1.21 KB UMD_PROD
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.2% 2.45 KB 2.45 KB 1.11 KB 1.11 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% 0.0% 6.98 KB 6.98 KB 2.21 KB 2.21 KB NODE_DEV
react-interactions-events/keyboard.development.js 0.0% 0.0% 5.79 KB 5.79 KB 2.19 KB 2.19 KB NODE_DEV
react-interactions-events/swipe.development.js 0.0% +0.1% 5.82 KB 5.82 KB 1.58 KB 1.58 KB NODE_DEV
react-interactions-accessibility/focus-control.development.js 0.0% +0.1% 4.64 KB 4.64 KB 1.29 KB 1.29 KB NODE_DEV
react-interactions-events/drag.production.min.js 0.0% 🔺+0.1% 2.88 KB 2.88 KB 1.38 KB 1.38 KB NODE_PROD
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.22 KB 2.22 KB 1.15 KB 1.15 KB NODE_PROD
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.2% 2.27 KB 2.27 KB 1.05 KB 1.05 KB NODE_PROD
react-interactions-accessibility/focus-control.production.min.js 0.0% 🔺+0.1% 1.65 KB 1.65 KB 808 B 809 B NODE_PROD

Generated by 🚫 dangerJS against 94266e9

Move emulateBrowserTab

Move emulateBrowserTab
}
const key = event.key;

if (key === 'Tab') {
Copy link
Contributor

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?

Copy link
Contributor Author

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.

Copy link
Contributor

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') {
Copy link
Contributor

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?

@trueadm trueadm merged commit 3445772 into facebook:master Oct 1, 2019
@trueadm trueadm deleted the focus-modifiers branch October 1, 2019 15:59
return {};
}

function hasModifierKey(event: KeyboardEvent): boolean {
Copy link
Contributor

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

Copy link
Contributor Author

@trueadm trueadm Oct 1, 2019

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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants