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.

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

fix(popover): make the close button the first focus always #1720

Merged
merged 2 commits into from
Aug 2, 2021

Conversation

TheSisb
Copy link
Contributor

@TheSisb TheSisb commented Jul 30, 2021

In another PR, it was observed that the primary focus when a popover opened may be biased or misleading. I make a change in this PR so that we consistently make the close button the primary focus - no matter the contents of a Popover window.

@TheSisb TheSisb requested review from a team as code owners July 30, 2021 19:06
@TheSisb TheSisb requested a review from SiTaggart July 30, 2021 19:06
@changeset-bot
Copy link

changeset-bot bot commented Jul 30, 2021

🦋 Changeset detected

Latest commit: cb3e2d3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@twilio-paste/popover Patch
@twilio-paste/core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Jul 30, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: cb3e2d3

🔍 Inspect the deploy log: https://app.netlify.com/sites/paste-docs/deploys/61080d4d3ce9510008481d9f

😎 Browse the preview: https://deploy-preview-1720--paste-docs.netlify.app

@github-actions
Copy link
Contributor

github-actions bot commented Jul 30, 2021

Size Change: +1 B (0%)

Total Size: 617 kB

Filename Size Change
packages/paste-core/components/popover/dist/index.es.js 1.48 kB +2 B (0%)
packages/paste-core/components/popover/dist/index.js 1.83 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
packages/paste-color-contrast-utils/dist/index.es.js 14.9 kB
packages/paste-color-contrast-utils/dist/index.js 15.3 kB
packages/paste-core/components/alert-dialog/dist/index.es.js 1.69 kB
packages/paste-core/components/alert-dialog/dist/index.js 1.99 kB
packages/paste-core/components/alert/dist/index.es.js 1.26 kB
packages/paste-core/components/alert/dist/index.js 1.61 kB
packages/paste-core/components/anchor/dist/index.es.js 1.52 kB
packages/paste-core/components/anchor/dist/index.js 1.83 kB
packages/paste-core/components/avatar/dist/index.es.js 1.71 kB
packages/paste-core/components/avatar/dist/index.js 2.04 kB
packages/paste-core/components/base-radio-checkbox/dist/index.es.js 1.13 kB
packages/paste-core/components/base-radio-checkbox/dist/index.js 1.5 kB
packages/paste-core/components/breadcrumb/dist/index.es.js 1.08 kB
packages/paste-core/components/breadcrumb/dist/index.js 1.41 kB
packages/paste-core/components/button/dist/index.es.js 5.54 kB
packages/paste-core/components/button/dist/index.js 5.78 kB
packages/paste-core/components/card/dist/index.es.js 697 B
packages/paste-core/components/card/dist/index.js 1.04 kB
packages/paste-core/components/checkbox/dist/index.es.js 2.34 kB
packages/paste-core/components/checkbox/dist/index.js 2.65 kB
packages/paste-core/components/combobox/dist/index.es.js 13.2 kB
packages/paste-core/components/combobox/dist/index.js 13.5 kB
packages/paste-core/components/date-picker/dist/index.es.js 8.3 kB
packages/paste-core/components/date-picker/dist/index.js 8.65 kB
packages/paste-core/components/disclosure/dist/index.es.js 2.26 kB
packages/paste-core/components/disclosure/dist/index.js 2.6 kB
packages/paste-core/components/form/dist/index.es.js 256 B
packages/paste-core/components/form/dist/index.js 692 B
packages/paste-core/components/heading/dist/index.es.js 889 B
packages/paste-core/components/heading/dist/index.js 1.23 kB
packages/paste-core/components/help-text/dist/index.es.js 923 B
packages/paste-core/components/help-text/dist/index.js 1.27 kB
packages/paste-core/components/inline-control-group/dist/index.es.js 956 B
packages/paste-core/components/inline-control-group/dist/index.js 1.3 kB
packages/paste-core/components/input-box/dist/index.es.js 1.93 kB
packages/paste-core/components/input-box/dist/index.js 2.23 kB
packages/paste-core/components/input/dist/index.es.js 1.47 kB
packages/paste-core/components/input/dist/index.js 1.82 kB
packages/paste-core/components/label/dist/index.es.js 1.13 kB
packages/paste-core/components/label/dist/index.js 1.48 kB
packages/paste-core/components/list/dist/index.es.js 778 B
packages/paste-core/components/list/dist/index.js 1.13 kB
packages/paste-core/components/menu/dist/index.es.js 1.9 kB
packages/paste-core/components/menu/dist/index.js 2.23 kB
packages/paste-core/components/modal/dist/index.es.js 2.66 kB
packages/paste-core/components/modal/dist/index.js 2.99 kB
packages/paste-core/components/pagination/dist/index.es.js 3.15 kB
packages/paste-core/components/pagination/dist/index.js 3.42 kB
packages/paste-core/components/paragraph/dist/index.es.js 570 B
packages/paste-core/components/paragraph/dist/index.js 914 B
packages/paste-core/components/radio-group/dist/index.es.js 1.59 kB
packages/paste-core/components/radio-group/dist/index.js 1.93 kB
packages/paste-core/components/screen-reader-only/dist/index.es.js 652 B
packages/paste-core/components/screen-reader-only/dist/index.js 996 B
packages/paste-core/components/select/dist/index.es.js 1.55 kB
packages/paste-core/components/select/dist/index.js 1.87 kB
packages/paste-core/components/separator/dist/index.es.js 758 B
packages/paste-core/components/separator/dist/index.js 1.1 kB
packages/paste-core/components/skeleton-loader/dist/index.es.js 1.02 kB
packages/paste-core/components/skeleton-loader/dist/index.js 1.37 kB
packages/paste-core/components/spinner/dist/index.es.js 744 B
packages/paste-core/components/spinner/dist/index.js 1.14 kB
packages/paste-core/components/table/dist/index.es.js 1.74 kB
packages/paste-core/components/table/dist/index.js 2.07 kB
packages/paste-core/components/tabs/dist/index.es.js 2.06 kB
packages/paste-core/components/tabs/dist/index.js 2.39 kB
packages/paste-core/components/textarea/dist/index.es.js 5.04 kB
packages/paste-core/components/textarea/dist/index.js 5.08 kB
packages/paste-core/components/time-picker/dist/index.es.js 8.51 kB
packages/paste-core/components/time-picker/dist/index.js 8.82 kB
packages/paste-core/components/toast/dist/index.es.js 3.04 kB
packages/paste-core/components/toast/dist/index.js 3.35 kB
packages/paste-core/components/tooltip/dist/index.es.js 1.11 kB
packages/paste-core/components/tooltip/dist/index.js 1.46 kB
packages/paste-core/components/truncate/dist/index.es.js 604 B
packages/paste-core/components/truncate/dist/index.js 947 B
packages/paste-core/core-bundle/dist/alert-dialog.js 210 B
packages/paste-core/core-bundle/dist/alert.js 194 B
packages/paste-core/core-bundle/dist/anchor.js 197 B
packages/paste-core/core-bundle/dist/animation-library.js 211 B
packages/paste-core/core-bundle/dist/aspect-ratio.js 205 B
packages/paste-core/core-bundle/dist/avatar.js 200 B
packages/paste-core/core-bundle/dist/base-radio-checkbox.js 218 B
packages/paste-core/core-bundle/dist/box.js 195 B
packages/paste-core/core-bundle/dist/breadcrumb.js 204 B
packages/paste-core/core-bundle/dist/button.js 201 B
packages/paste-core/core-bundle/dist/card.js 199 B
packages/paste-core/core-bundle/dist/checkbox.js 201 B
packages/paste-core/core-bundle/dist/color-contrast-utils.js 219 B
packages/paste-core/core-bundle/dist/combobox-primitive.js 213 B
packages/paste-core/core-bundle/dist/combobox.js 203 B
packages/paste-core/core-bundle/dist/customization.js 206 B
packages/paste-core/core-bundle/dist/date-picker.js 205 B
packages/paste-core/core-bundle/dist/design-tokens.js 209 B
packages/paste-core/core-bundle/dist/disclosure-primitive.js 213 B
packages/paste-core/core-bundle/dist/disclosure.js 204 B
packages/paste-core/core-bundle/dist/dropdown-library.js 211 B
packages/paste-core/core-bundle/dist/flex.js 196 B
packages/paste-core/core-bundle/dist/form.js 197 B
packages/paste-core/core-bundle/dist/grid.js 196 B
packages/paste-core/core-bundle/dist/heading.js 199 B
packages/paste-core/core-bundle/dist/help-text.js 204 B
packages/paste-core/core-bundle/dist/index.js 1.11 kB
packages/paste-core/core-bundle/dist/inline-control-group.js 218 B
packages/paste-core/core-bundle/dist/input-box.js 206 B
packages/paste-core/core-bundle/dist/input.js 200 B
packages/paste-core/core-bundle/dist/label.js 196 B
packages/paste-core/core-bundle/dist/list.js 195 B
packages/paste-core/core-bundle/dist/media-object.js 202 B
packages/paste-core/core-bundle/dist/menu-primitive.js 210 B
packages/paste-core/core-bundle/dist/menu.js 196 B
packages/paste-core/core-bundle/dist/modal-dialog-primitive.js 219 B
packages/paste-core/core-bundle/dist/modal.js 196 B
packages/paste-core/core-bundle/dist/non-modal-dialog-primitive.js 224 B
packages/paste-core/core-bundle/dist/pagination.js 199 B
packages/paste-core/core-bundle/dist/paragraph.js 202 B
packages/paste-core/core-bundle/dist/popover.js 201 B
packages/paste-core/core-bundle/dist/radio-group.js 208 B
packages/paste-core/core-bundle/dist/reakit-library.js 211 B
packages/paste-core/core-bundle/dist/screen-reader-only.js 214 B
packages/paste-core/core-bundle/dist/select.js 197 B
packages/paste-core/core-bundle/dist/separator.js 199 B
packages/paste-core/core-bundle/dist/sibling-box.js 206 B
packages/paste-core/core-bundle/dist/skeleton-loader.js 211 B
packages/paste-core/core-bundle/dist/spinner.js 198 B
packages/paste-core/core-bundle/dist/stack.js 200 B
packages/paste-core/core-bundle/dist/style-props.js 202 B
packages/paste-core/core-bundle/dist/styling-library.js 210 B
packages/paste-core/core-bundle/dist/table.js 195 B
packages/paste-core/core-bundle/dist/tabs-primitive.js 210 B
packages/paste-core/core-bundle/dist/tabs.js 196 B
packages/paste-core/core-bundle/dist/text.js 195 B
packages/paste-core/core-bundle/dist/textarea.js 198 B
packages/paste-core/core-bundle/dist/theme.js 196 B
packages/paste-core/core-bundle/dist/time-picker.js 206 B
packages/paste-core/core-bundle/dist/toast.js 195 B
packages/paste-core/core-bundle/dist/tooltip-primitive.js 212 B
packages/paste-core/core-bundle/dist/tooltip.js 198 B
packages/paste-core/core-bundle/dist/truncate.js 198 B
packages/paste-core/core-bundle/dist/types.js 196 B
packages/paste-core/core-bundle/dist/uid-library.js 208 B
packages/paste-core/layout/aspect-ratio/dist/index.es.js 709 B
packages/paste-core/layout/aspect-ratio/dist/index.js 1.11 kB
packages/paste-core/layout/flex/dist/index.es.js 2.1 kB
packages/paste-core/layout/flex/dist/index.js 2.41 kB
packages/paste-core/layout/grid/dist/index.es.js 1.65 kB
packages/paste-core/layout/grid/dist/index.js 1.96 kB
packages/paste-core/layout/media-object/dist/index.es.js 982 B
packages/paste-core/layout/media-object/dist/index.js 1.3 kB
packages/paste-core/layout/stack/dist/index.es.js 1.14 kB
packages/paste-core/layout/stack/dist/index.js 1.47 kB
packages/paste-core/primitives/box/dist/index.es.js 3.02 kB
packages/paste-core/primitives/box/dist/index.js 3.29 kB
packages/paste-core/primitives/combobox/dist/index.es.js 142 B
packages/paste-core/primitives/combobox/dist/index.js 561 B
packages/paste-core/primitives/disclosure/dist/index.es.js 155 B
packages/paste-core/primitives/disclosure/dist/index.js 570 B
packages/paste-core/primitives/menu/dist/index.es.js 209 B
packages/paste-core/primitives/menu/dist/index.js 622 B
packages/paste-core/primitives/modal-dialog/dist/index.es.js 23.5 kB
packages/paste-core/primitives/modal-dialog/dist/index.js 23.4 kB
packages/paste-core/primitives/non-modal-dialog/dist/index.es.js 176 B
packages/paste-core/primitives/non-modal-dialog/dist/index.js 590 B
packages/paste-core/primitives/sibling-box/dist/index.es.js 744 B
packages/paste-core/primitives/sibling-box/dist/index.js 1.16 kB
packages/paste-core/primitives/tabs/dist/index.es.js 153 B
packages/paste-core/primitives/tabs/dist/index.js 572 B
packages/paste-core/primitives/text/dist/index.es.js 2.69 kB
packages/paste-core/primitives/text/dist/index.js 2.98 kB
packages/paste-core/primitives/tooltip/dist/index.es.js 163 B
packages/paste-core/primitives/tooltip/dist/index.js 578 B
packages/paste-customization/dist/index.es.js 2.08 kB
packages/paste-customization/dist/index.js 2.38 kB
packages/paste-design-tokens/dist/themes/console/tokens.common.js 3.74 kB
packages/paste-design-tokens/dist/themes/console/tokens.es6.js 3.69 kB
packages/paste-design-tokens/dist/themes/dark/tokens.common.js 3.17 kB
packages/paste-design-tokens/dist/themes/dark/tokens.es6.js 3.12 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js 3.12 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.es6.js 3.08 kB
packages/paste-design-tokens/dist/tokens.common.js 3.77 kB
packages/paste-design-tokens/dist/tokens.es6.js 3.72 kB
packages/paste-libraries/animation/dist/index.es.js 24.2 kB
packages/paste-libraries/animation/dist/index.js 24.5 kB
packages/paste-libraries/dropdown/dist/index.es.js 26.4 kB
packages/paste-libraries/dropdown/dist/index.js 26.5 kB
packages/paste-libraries/reakit/dist/index.es.js 48.4 kB
packages/paste-libraries/reakit/dist/index.js 48.6 kB
packages/paste-libraries/styling/dist/index.es.js 26.6 kB
packages/paste-libraries/styling/dist/index.js 27 kB
packages/paste-libraries/uid/dist/index.es.js 1.72 kB
packages/paste-libraries/uid/dist/index.js 2.1 kB
packages/paste-style-props/dist/index.es.js 5.11 kB
packages/paste-style-props/dist/index.js 5.63 kB
packages/paste-theme/dist/index.es.js 3.32 kB
packages/paste-theme/dist/index.js 3.56 kB
packages/paste-types/dist/index.es.js 20 B
packages/paste-types/dist/index.js 20 B

compressed-size-action

@cypress
Copy link

cypress bot commented Jul 30, 2021



Test summary

4 0 0 0Flakiness 0


Run details

Project Paste
Status Passed
Commit cb3e2d3
Started Aug 2, 2021 3:45 PM
Ended Aug 2, 2021 3:46 PM
Duration 01:01 💡
OS Linux Ubuntu - 20.04
Browser Electron 83

View run in Cypress Dashboard ➡️


This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 30, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cb3e2d3:

Sandbox Source
@twilio-paste/nextjs-template Configuration

Copy link
Collaborator

@nkrantz nkrantz left a comment

Choose a reason for hiding this comment

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

Nice simple fix 👍

@TheSisb TheSisb merged commit 0bfba62 into main Aug 2, 2021
@TheSisb TheSisb deleted the popover/close-first-focus branch August 2, 2021 18:45
@TwilioPasteBot TwilioPasteBot mentioned this pull request Aug 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants