Overlay: Add role="dialog", focus trap to Overlay

[TylerJDev]

Closes https://github.com/github/primer/issues/3378

Usages of Overlay tend to lean more towards a dialog across GH. This PR aims to define it as a dialog in most cases, provided with a focus trap that's toggled via the newly added focusTrap prop.

Changelog

New

• Add role="dialog" and aria-modal="true" to Overlay component

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

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]

🦋 Changeset detected

Latest commit: 5627e4f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.85 KB (+0.02% 🔺)
packages/react/dist/browser.umd.js	98.16 KB (+0.1% 🔺)

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/343407

[TylerJDev]

This change essentially turns Overlay into a "Dialog" in the sense of role="dialog" and aria-modal="true" being added. A focus trap is also added by default, and is enabled if there are focusable elements inside of the overlay. This change will not affect overlays that already have a role attribute, as long as that role attribute isn't role="dialog".

Rollout plan:

• Add role="none" to existing Overlay components that do not implicitly set role already
• Add focusTrap={false} to Overlay components that are used as Dialogs currently, but do not utilize a focus trap.

[TylerJDev]

Added a new prop in case there's an implementation that wants to be a dialog, but doesn't want the focus trap applied. This is a very specific case, and ideally won't be necessary in more than a handful of instances.