Modal: Auto Focus

[misael86]

Does the component already exist

• I confirm that I have checked if the component already exists in any of the Green libraries

For which framework/library you are requesting the component

React

Description

Once a modal is open the focus should be on the modal, so the first tab after opening a modal should be within the modal, most probably on the close button since that is the first interactable element inside of the modal?

When tabbing inside of a modal, it should not be possible to tab outside of the modal. One option is to set the tabindex of all other interactable elements to -1, but since this is quite tedious, we would want to propose that we listen to the tab and shift-tab events on the close buttons, both the one on the header and the footer. And once tabbing from the bottom close button, to prevent the default action and set focus on the close button on the header. And the other way around when shift-tabbing on the close button on the header. But feel free to find other solutions.

The last request is to be able to send an element to the modal so that when the modal is closed, the focus is set back to the button that opened the modal. So that you don't need to tab through the entire page again to return to where you left off.

Who will benefit from this feature?

Everyone using tabbing to navigate, and all teams using the modal component so that they don't need to find a solution to the problem by themselves.

Anything else?

Tested in https://storybook.seb.io/latest/react/?path=/story/components-modal--slide-out-small&args=isOpen:!false