segmentio / evergreen

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

Dialog allows user to tab elements in the background #1551

Open mnlfischer opened 1 year ago

mnlfischer commented 1 year ago

For my understanding the Dialog component should only enable tabbing in the current dialog context, not in the background of it. https://evergreen.segment.com/components/dialog

Working w3c example: https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/alertdialog.html

brandongregoryscott commented 1 year ago

You're right, it should be trapping focus inside. Accessibility hasn't been top of mind up to this point ☹️ PRs are welcome to help improve usability!

simona1245 commented 1 year ago

Hi guys! Just wanted to let you now I'm on it.

simona1245 commented 1 year ago

As of thorough research it is clear that making a custom focus trapping technique is not advisable.

therefore I found a well known and used library react-focus-trap to achieve desired improvement.

Creating a pull request.

simona1245 commented 1 year ago

https://github.com/segmentio/evergreen/pull/1575