Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: ensure esc key does not close modals that are blocking #3033

Merged
merged 4 commits into from
Apr 17, 2024

Conversation

adamstankiewicz
Copy link
Member

@adamstankiewicz adamstankiewicz commented Apr 17, 2024

Description

The Paragon modal components (e.g., AlertModal) generally rely on the underlying ModalDialog component and it's optional props such as isBlocking. The intent for isBlocking should prevent the modal from being dismissed for use cases where there is a required action to be taken within the modal. However, isBlocking only prevents clicking of the modal backdrop from dismissing modal; users may still press the Escape key to dismiss the modal, despite the intent to have the modal be blocking.

This PR ensures the Escape behavior when isBlocking is passed to modal components such as AlertModal follows the same behavior as the modal backdrop; that is, when a modal isBlocking, neither clicking the modal backdrop or pressing Escape key should dismiss the modal.

Deploy Preview

https://deploy-preview-3033--paragon-openedx.netlify.app/components/modal/alert-modal/

How to test:

  • On the "Basic usage" on the linked deploy preview, add the isBlocking prop to the AlertModal component.
  • Observe that neither clicking on the modal backdrop or pressing Escape key dismisses the blocking modal.

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
  • Does your change adhere to the documented style conventions?
  • Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
  • Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
  • Were your changes tested in the example app?
  • Is there adequate test coverage for your changes?
  • Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

  • Verify your changes were released to NPM at the expected version.
  • If you'd like, share your contribution in #show-and-tell.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

Copy link

netlify bot commented Apr 17, 2024

Deploy Preview for paragon-openedx ready!

Name Link
🔨 Latest commit 183e527
🔍 Latest deploy log https://app.netlify.com/sites/paragon-openedx/deploys/6620112088c7620008446e22
😎 Deploy Preview https://deploy-preview-3033--paragon-openedx.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@adamstankiewicz adamstankiewicz merged commit a381182 into master Apr 17, 2024
8 checks passed
@adamstankiewicz adamstankiewicz deleted the ags/modallayer-isblocking-esc branch April 17, 2024 19:33
@openedx-semantic-release-bot

🎉 This PR is included in version 22.2.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants