search

segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.38k stars 830 forks source link

added 'tab' accessibility to modal with focus lock to prevent from fo… #1575

Open simona1245 opened 1 year ago

simona1245 commented 1 year ago

as of the documentation and thorough internet searching about "tab focusing" it is clear that creating tab focus from scratch is not applicable. (see stackoverflow)

Library to add: react-focus-trap

netlify[bot] commented 1 year ago

Deploy Preview for evergreen-storybook ready!

Name Link
Latest commit 82e23dde6c0ce5cc48d809a6f7570c86993927f3
Latest deploy log https://app.netlify.com/sites/evergreen-storybook/deploys/639784d5b8f1b10008030fb4
Deploy Preview https://deploy-preview-1575--evergreen-storybook.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

brandongregoryscott commented 1 year ago

Thanks for taking a look at this @simona1245!

I pulled it down and gave it a run myself, and it does seem to trap focus as expected. One potential issue I noticed is that it no longer closes the dialog when you click outside of it. I'm not entirely sure whether we should have this behavior, but it will be a breaking change if we keep it as-is. I'm going to dig into web accessibility standards a bit and see what I can find.

brandongregoryscott commented 1 year ago

Hmm, after taking a look at what Paste does, they actually split out two variants of what looks like our Dialog component that are for different use cases:

https://paste.twilio.design/components/modal

This seems to be more or less our Dialog component, i.e. it closes on an outside click (but it is accessible in that it traps focus inside, handles escape to close, etc)

https://paste.twilio.design/components/alert-dialog

I think this is closer to what the proposed implementation in this PR is - same visual styling as their Modal component, but closing the AlertDialog has to be explicitly done with the Cancel/Confirmation action (escape does not close it either).

We're in somewhat of a middle state between these two variants. In the interest of backwards compatibility, can we figure out how to maintain the outside-click-to-close behavior?