feat: various ARIA enhancements for Overlay (Dialog & Drawer)

jaredcwhite commented 4 months ago

Issue Overview

This PR addresses #84

Description

Adds support for additional ARIA attributes useful for modal content, and made some tweaks to focus trapping so it's working across browsers (at least on macOS).

How Can This Be Tested/Reviewed?

View the Dialog: https://deploy-preview-85--storybook-ui-seeds.netlify.app/?path=/story/overlays-dialog--default

and Drawer: https://deploy-preview-85--storybook-ui-seeds.netlify.app/?path=/story/overlays-drawer--default

and try out using a screen reader like VoiceOver in various browsers.

My goal was to make sure the Dialog is announced with the heading having focus, and then you can move ahead to the Close button and additional content. Drawer is a little tricky here because the Close button comes first visually, so I actually modified it so it always comes after the heading in source order, but things still looks OK because of a reversed flexbox direction. I think that makes sense but lmk if you see/hear any issues.

I also tried out the alertdialog role in addition to dialog, and that flat out didn't work for me…even though Can I Use reports full browser support. Don't know what's up with that!

Checklist:

[ ] I have added QA notes to the issue with applicable URLs
[x] I have performed a self-review of my own code
[ ] I have reviewed the changes in a desktop view
[ ] I have reviewed the changes in a mobile view
[x] I have made corresponding changes to the documentation
[x] My changes generate no new warnings
[ ] I have added tests that prove my fix is effective or that my feature works
[ ] I have exported any new components
[x] My commit message(s) and PR title are polished in the conventional commit format, and any breaking changes are indicated in the message and are well-described

netlify[bot] commented 4 months ago

Deploy Preview for storybook-ui-seeds ready!

Name	Link
Latest commit	29cb22d5cf2923716a54d5bf5d15fb8965cc407b
Latest deploy log	https://app.netlify.com/sites/storybook-ui-seeds/deploys/662c18a4f35c650008194956
Deploy Preview	https://deploy-preview-85--storybook-ui-seeds.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

emilyjablonski commented 3 months ago

This looks good to me, the one difference I'm seeing when comparing it to the UIC modal is that when I open the modal and hit tab, in UIC the first focusable element I hit is the submit button, and here it's the close button, but I'm seeing that that's preferable!

jaredcwhite commented 3 months ago

@emilyjablonski Yeah, I think that's preferable and did a lot of testing to try to make sure I was getting good results from keyboard control and VoiceOver in various browsers (on macOS at least).

Can you approve with a review? GH still isn't letting me do the merge. TY

github-actions[bot] commented 3 months ago

:tada: This PR is included in version 1.16.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

bloom-housing / ui-seeds