search

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customization and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
132 stars 89 forks source link

Should open Overlays pull focus #4405

Open joshwooding opened 1 week ago

joshwooding commented 1 week ago

How should an overlay that is open by default behave? Currently it pulls focus but should it wait to trap focus inside it.

You can sort of test it here: https://storybook.saltdesignsystem.com/?path=/story/core-overlay-overlay-qa--default

jake-costa commented 6 days ago

@joshwooding Given it is a modal dialog, focus should be moved into the modal dialog and trap focus while preventing interactions outside the dialog. When closed by either a close button or esc key, focus needs to be placed back on the button or element that triggered the overlay.

joshwooding commented 6 days ago

@joshwooding Given it is a modal dialog, focus should be moved into the modal dialog and trap focus while preventing interactions outside the dialog. When closed by either a close button or esc key, focus needs to be placed back on the button or element that triggered the overlay.

Is the same behaviour fine if it's open by default and should we recommend to only have one open at a time or is there no difference?

jake-costa commented 6 days ago

Is the same behaviour fine if it's open by default

I would not recommend having it open by default.

should we recommend to only have one open at a time or is there no difference?

Yes, only 1 should be open at a time.

origami-z commented 6 days ago

Some weird question - what should happen if the overlay doesn't have a close button and the user is not using a keyboard (no "Esc" key)... how to simulate "click outside" feature...?

jake-costa commented 6 days ago

Some weird question - what should happen if the overlay doesn't have a close button and the user is not using a keyboard (no "Esc" key)... how to simulate "click outside" feature...?

Great question, APG Dialog (Modal) Pattern strongly recommends that all dialogs include a visible element with role button that closes the dialog, such as a close icon or cancel button.

That said, most assistive technologies map to keyboard inputs so they can still perform esc functionality to close the modal dialog even if they don't use a physical keyboard or mouse. For users that use speech recognition software, they can say "Dismiss" or "Press esc". And users that rely on head or eye tracking systems function like a mouse, allowing them to "click outside" the modal to close it.