fix(overlay): Programmatic clicks on elements outside of the overlay now registers #5670
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: d922d70 The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 packages
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 |
Rajdeepc
changed the title
📚 Branch Preview🔍 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
Tachometer resultsChromeoverlay permalinkbasic-test
directive-test permalink
element-test permalink
lazy-test permalink
Firefoxoverlay permalinkbasic-test
directive-test permalink
element-test permalink
lazy-test permalink
|
blunteshwar
approved these changes
Aug 5, 2025
nikkimk
requested changes
Aug 7, 2025
packages/overlay/README.md
Outdated
|
|
||
| ```javascript | ||
| // Programmatic click outside will close the overlay | ||
| function closeOverlayProgrammatically() { |
There was a problem hiding this comment.
From: https://w3c.github.io/aria/#aria-modal
The aria-modal attribute is used to indicate that the presence of a "modal" element precludes usage of other content on the page. For example, when a modal dialog is displayed, it is expected that the user's interaction is limited to the contents of the dialog, until the modal dialog loses focus or is no longer displayed.
When a modal element is displayed, assistive technologies SHOULD navigate to the element unless focus has explicitly been set elsewhere. Some assistive technologies limit navigation to the modal element's contents. If focus moves to an element outside the modal element, assistive technologies SHOULD NOT limit navigation to the modal element.
When a modal element is displayed, authors MUST ensure the interface can be controlled using only descendants of the modal element. In other words, if a modal dialog has a close button, the button should be a descendant of the dialog. When a modal element is displayed, authors SHOULD mark all other contents as inert (such as "inert subtrees" in HTML) if the ability to do so exists in the host language.
Clicking should not be allowed because keyboard focus outside the modal should not be allowed.
Tagging @jnurthen and @majornista on this one for their thoughts.
nikkimk
approved these changes
Aug 19, 2025
Comment on lines
+577
to
+593
| ##### Deprecated Properties | ||
|
|
||
| > **⚠️ Deprecation Notice**: The `allow-outside-click` property is deprecated and will be removed in a future version. | ||
|
|
||
| The `allow-outside-click` property allows clicks outside the overlay to close it. **We do not recommend using this property for accessibility reasons** as it can cause unexpected behavior and accessibility issues. When set to `true`, it configures the focus trap to allow outside clicks, which may interfere with proper focus management and user expectations. | ||
|
|
||
| ```html | ||
| <!-- @deprecated Not recommended for accessibility reasons --> | ||
| <sp-overlay trigger="trigger@click" allow-outside-click="true"> | ||
| <sp-popover> | ||
| <p>This overlay can be closed by clicking outside</p> | ||
| </sp-popover> | ||
| </sp-overlay> | ||
| ``` | ||
|
|
||
| **Alternative approaches**: Instead of using `allow-outside-click`, consider implementing explicit close buttons or using the `type="modal"` or `type="page"` overlay types which provide better accessibility and user experience. | ||
|
|
There was a problem hiding this comment.
I like the wording on this. Thanks for including it!
Comment on lines
+293
to
+301
| /** | ||
| * @deprecated This property will be removed in a future version. | ||
| * We do not recommend using this property for accessibility reasons. | ||
| * It allows clicks outside the overlay to close it, which can cause | ||
| * unexpected behavior and accessibility issues. | ||
| * | ||
| * @type {boolean} | ||
| * @default false | ||
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds
allowOutsideClickproperty for the external click registration behavior in thesp-overlaycomponent. The implementation verifies that programmatic clicks on elements outside of modal overlays properly register and close the overlay, while user-initiated clicks are prevented from doing so.Technical Details
External Click Behavior
The overlay component uses a focus trap for
modalandpagetype overlays with special handling for external clicks:This configuration ensures:
Motivation and context
This bug came when
showModal()api was changed todialog.show()and this edge case was missed.Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Manual Testing - Chrome, Firefox & Safari
Test Automation
Device review