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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Modal, Frame(Nav), Sheet] Trapped virtual cursor inside dialogs #3931

Merged
merged 4 commits into from Jan 29, 2021

Conversation

AndrewMusgrave
Copy link
Member

WHY are these changes introduced?

Keyboard focus is trapped whoever virtual cursors are not

Current keyboard trapping

Modal Sheet Nav
key-modal key-sheet key-nav

Before/After virtual cursor navigation

Before After
Modal vc-modal-old key-modal
Sheet vc-sheet-old vc-sheet
Nav vc-nav-old vc-nav

WHAT is this pull request doing?

  • Make using of the aria-modal & role attribute to trap virtual cursors in dialogs

How to 馃帺

  • Loading storybook and play around modal/nav/sheet with a virtual cursor

@github-actions
Copy link
Contributor

github-actions bot commented Jan 27, 2021

馃煛 This pull request modifies 7 files and might impact 5 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:
All files potentially affected (total: 5)
馃搫 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

馃搫 locales/en.json (total: 0)

Files potentially affected (total: 0)

馃З src/components/Frame/Frame.tsx (total: 0)

Files potentially affected (total: 0)

馃搫 src/components/Frame/README.md (total: 0)

Files potentially affected (total: 0)

馃З src/components/Frame/tests/Frame.test.tsx (total: 0)

Files potentially affected (total: 0)

馃З src/components/Modal/components/Dialog/Dialog.tsx (total: 4)

Files potentially affected (total: 4)

馃З src/components/Sheet/Sheet.tsx (total: 1)

Files potentially affected (total: 1)

Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

This is awesome Andrew, just one question about mobille vs desktop label / role

src/components/Frame/Frame.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

Nice, additions look good 馃

@AndrewMusgrave AndrewMusgrave merged commit b6f3066 into main Jan 29, 2021
@AndrewMusgrave AndrewMusgrave deleted the virtual-cursor-trap-focus branch January 29, 2021 22:15
sylvhama pushed a commit that referenced this pull request Mar 26, 2021
* Trapped virtual cursor inside dialogs

* changelog

* Add nav container label

* Only applt attributes on small screens
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

2 participants