Royal-Navy / design-system

Build web applications that meet the Royal Navy service standards
https://storybook.design-system.navy.digital.mod.uk
Apache License 2.0
103 stars 32 forks source link

Add focus trap to Modal #3757

Closed jpveooys closed 1 week ago

jpveooys commented 4 weeks ago

Description

Currently the Modal doesn't have a focus trap. This means when a Modal is active, you can still press Tab on the keyboard to focus and then interact with things outside the modal.

IIRC this can be resolved by using the <dialog> element in modal mode i.e. using showModal (if support for it is considered good enough now).

Alternatively, focus-trap-react could be used (as it is in DatePicker).