fix(Modal): Apply focus trap and expose imperative handle

m7kvqbe1 commented 1 month ago

Related issue

Closes #3757

Overview

Apply focus trap to Modal and Dialog components (use native Dialog).

Expose show and close methods via forwardedRef and imperative handle.

Reason

Modal and Dialog were not correctly applying a focus trap.

Work carried out

[x] Fix styling issues with Close button (use SVG Icon)
[x] Refactor to utilise native Dialog element
[x] Expose show and hide methods via imperative handle and isOpen state
[x] Forward supplied ref from Dialog component to underlying Modal
[x] Fix styling inconsistency with Drawer close button (now matches Modal)

Screenshot

2024-05-07 09 24 21

Developer notes

When a dialog opens, the browser, by default, gives focus to the first element that can be focused within the dialog (always the close button if it is specified).

The Escape key can also now be used to close the modal.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

netlify[bot] commented 1 month ago

Deploy Preview for storybook-navy-digital-mod-uk ready!

Name	Link
Latest commit	a0bc59724b5ab8809d20c48c25d794f5a7d10e8e
Latest deploy log	https://app.netlify.com/sites/storybook-navy-digital-mod-uk/deploys/663b2adfd4744800074b525a
Deploy Preview	https://deploy-preview-3785--storybook-navy-digital-mod-uk.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.