Overlay: Add proper roles w/ keyboard expectations to stories

[TylerJDev]

We utilize Overlay in many different ways. Our stories for Overlay largely represent a modal dialog pattern. This PR aims to add proper roles with the proper keyboard expectations for those roles to each story.

Changelog

Changed

• Adds roles with keyboard expectations to Overlay stories

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why (Only includes changes to Storybook examples)

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 016dd81

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.23 KB (0%)
packages/react/dist/browser.umd.js	97.58 KB (0%)

[francinelucca]

Looking good!
One question: For the positioned overlays story, I have to hit esc twice to get one of the overlays to close, is this intended? In prod I see we only have to click it once.
I also noticed the default story is not showing up neither here nor in prod, do you know what that's about? I can open a separate issue for that
Everything else looks good to me!

[TylerJDev]

One question: For the positioned overlays story, I have to hit esc twice to get one of the overlays to close, is this intended? In prod I see we only have to click it once.

Good catch, this seems to be because we're using an IconButton here with Tooltip. Escape will close the tooltip first before closing the dialog. I'm wondering if we should change this to a standard <button> with "close" as the text over an IconButton?

As for the default story, I believe it's because we only have a .features file for Overlay. I'm guessing this was a choice to only show features, but I'm not sure 🤔 We could create a separate issue for it and see if there are any other components w/o one.

[francinelucca]

Good catch, this seems to be because we're using an IconButton here with Tooltip. Escape will close the tooltip first before closing the dialog. I'm wondering if we should change this to a standard <button> with "close" as the text over an IconButton?

Ahh I didn't notice the first esc was closing the tooltip, that may be ok then. Your call

Opened issue for default story: #5183

[francinelucca]

🚀