Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[react-interactions] Repurpose React a11y modules #16997

Merged
merged 2 commits into from
Oct 3, 2019
Merged

[react-interactions] Repurpose React a11y modules #16997

merged 2 commits into from
Oct 3, 2019

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented Oct 3, 2019 •
edited
Loading

This PR mostly just re-labels and re-purposes some of the accessibility modules and the components in them. It comes from internal feedback that some of the names were confusing and some of the components felt misaligned for their real main benefit. Notably: folks only cared for using the FocusManager component for handling focus containment, and didn't see what it really had to do with managing focus other that that. Based all this feedback, the following changes have been made:

  • FocusManager -> FocusContain
  • FocusContain component now only handles containment, and requires a scope be passed to the component via tabScope. The documentation has been updated to also reflect this.
  • FocusControl -> FocusManager as people mentioned that the set of functions from this module are essentially management helpers. The docs have also been updated to reflect this.
  • FocusList -> FocusGroup

@sizebot
Copy link

sizebot commented Oct 3, 2019 •
edited
Loading

Details of bundled changes.

Comparing: f6efb22...8a3cb13

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/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/press.production.min.js 0.0% 🔺+0.1% 2.62 KB 2.62 KB 1.09 KB 1.09 KB UMD_PROD
ReactFocusTable-dev.js +10.1% +15.9% 9.77 KB 10.75 KB 2.11 KB 2.45 KB FB_WWW_DEV
ReactFocusGroup-dev.js n/a n/a 0 B 7.36 KB 0 B 1.87 KB FB_WWW_DEV
react-interactions-events/context-menu.development.js 0.0% -0.2% 2.68 KB 2.68 KB 1007 B 1005 B 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 728 B UMD_PROD
react-interactions-events/input.production.min.js 0.0% -0.1% 1.84 KB 1.84 KB 984 B 983 B UMD_PROD
react-interactions-events/scroll.production.min.js 0.0% -0.1% 2.63 KB 2.63 KB 1.15 KB 1.15 KB UMD_PROD
ReactFocusManager-dev.js +27.1% -10.3% 2.74 KB 3.49 KB 1009 B 905 B FB_WWW_DEV
ReactFocusManager-prod.js 🔺+15.6% -9.5% 2.37 KB 2.74 KB 867 B 785 B FB_WWW_PROD
react-interactions-events/scroll.development.js 0.0% -0.1% 6.12 KB 6.12 KB 1.61 KB 1.61 KB NODE_DEV
react-interactions-accessibility/focus-contain.development.js n/a n/a 0 B 2.24 KB 0 B 943 B NODE_DEV
react-interactions-events/context-menu.production.min.js 0.0% -0.1% 1.2 KB 1.2 KB 668 B 667 B NODE_PROD
react-interactions-events/input.production.min.js 0.0% -0.1% 1.66 KB 1.66 KB 917 B 916 B NODE_PROD
react-interactions-events/scroll.production.min.js 0.0% -0.1% 2.44 KB 2.44 KB 1.09 KB 1.09 KB NODE_PROD
react-interactions-accessibility/focus-contain.production.min.js n/a n/a 0 B 1.09 KB 0 B 650 B NODE_PROD
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
ReactFocusContain-dev.js n/a n/a 0 B 2.22 KB 0 B 905 B FB_WWW_DEV
ReactFocusContain-prod.js n/a n/a 0 B 1.88 KB 0 B 770 B FB_WWW_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 +9.7% +15.1% 9.91 KB 10.87 KB 2.16 KB 2.49 KB NODE_DEV
react-interactions-accessibility/focus-group.development.js n/a n/a 0 B 7.29 KB 0 B 1.9 KB NODE_DEV
react-interactions-events/hover.production.min.js 0.0% -0.1% 2.94 KB 2.94 KB 1.07 KB 1.07 KB NODE_PROD
react-interactions-accessibility/focus-table.production.min.js 🔺+9.5% 🔺+12.9% 3.12 KB 3.42 KB 1.24 KB 1.4 KB NODE_PROD
react-interactions-accessibility/focus-group.production.min.js n/a n/a 0 B 2.41 KB 0 B 1.12 KB NODE_PROD
ReactFocusTable-prod.js 🔺+8.5% 🔺+13.3% 8.87 KB 9.62 KB 1.84 KB 2.08 KB FB_WWW_PROD
ReactFocusGroup-prod.js n/a n/a 0 B 6.54 KB 0 B 1.57 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-accessibility/tabbable-scope.development.js 0.0% -0.2% 1.2 KB 1.2 KB 598 B 597 B NODE_DEV
react-interactions-events/focus.production.min.js 0.0% -0.1% 4.14 KB 4.14 KB 1.4 KB 1.4 KB NODE_PROD
react-interactions-accessibility/tabbable-scope.production.min.js 0.0% -0.2% 662 B 662 B 438 B 437 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/keyboard.development.js 0.0% -0.0% 5.97 KB 5.97 KB 2.24 KB 2.24 KB UMD_DEV
react-interactions-events/swipe.development.js 0.0% -0.1% 6 KB 6 KB 1.63 KB 1.62 KB UMD_DEV
react-interactions-events/drag.production.min.js 0.0% -0.1% 2.25 KB 2.25 KB 1.07 KB 1.07 KB UMD_PROD
react-interactions-events/swipe.production.min.js 0.0% -0.2% 2.45 KB 2.45 KB 1.11 KB 1.1 KB UMD_PROD
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-manager.development.js +27.8% -10.3% 2.76 KB 3.53 KB 1.03 KB 947 B NODE_DEV
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-manager.production.min.js -1.8% -13.8% 1.27 KB 1.25 KB 711 B 613 B NODE_PROD

Generated by 🚫 dangerJS against 8a3cb13

threepointone
threepointone approved these changes Oct 3, 2019
View reviewed changes
Copy link
Contributor

@threepointone threepointone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spotted a couple of typos, and assumed the rest of the code is just moving/renaming stuff. lgtm.

packages/react-interactions/accessibility/docs/FocusContain.md Show resolved Hide resolved
packages/react-interactions/accessibility/docs/FocusContain.md Outdated Show resolved Hide resolved
packages/react-interactions/accessibility/docs/FocusManager.md Outdated Show resolved Hide resolved
packages/react-interactions/accessibility/docs/FocusManager.md Outdated Show resolved Hide resolved
packages/react-interactions/accessibility/docs/FocusManager.md Outdated Show resolved Hide resolved
@trueadm trueadm merged commit b33633d into facebook:master Oct 3, 2019
@trueadm trueadm deleted the more-a11y-changes branch October 3, 2019 09:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@threepointone threepointone threepointone approved these changes

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@trueadm @sizebot @threepointone @facebook-github-bot