Closed jaredcwhite closed 3 months ago
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.
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!
@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
:tada: This PR is included in version 1.16.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
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 todialog
, 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: