ensure direct clicks to the dialog can only close the dialog

[keithamus]

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

In #2549 we shipped a fix whereby clicking outside of a dialog would close the dialog, even if clicking an element that overflowed the bounds of the dialog - for example clicking an item in an action menu that overflowed.

While v0.17.1 fixes that particular bug it introduced a regression with that fix; because we call .stopPropagation() on the click of the dialog show button, anything which reached into the dialog show button to add a click listener would no longer receive events. Consequently this caused a regression in some of dotcom.

This PR revisits that fix by taking an alternate route; see below.

Screenshots

No visual changes.

Integration

No

List the issues that this change affects.

Closes # (type the GitHub issue number after #)

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Rather than stopping propagation in the button, this checks that the inner-most click target is the dialog itself, and that that click is out of bounds of the dialogs bounding rect. This means:

• clicking on the dialog will do nothing (as its inside the bounds)
• clicking on an item that overflows the dialog will do nothing (as the target won't be the actual dialog element)
• clicking on the backdrop will close (as the backdrop's target is always the dialog element, but it is outside of the bounds of the dialog rect).

Anything you want to highlight for special attention from reviewers?

Accessibility

• New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: ab41339

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

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