[a11y]: Modal: doesn't return focus properly on dismissal

[finken2]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.25.0

React version

v16.12.0

Automated testing tool and ruleset

manual testing

Assistive technology

No response

Description

When launching a Modal from a button, focus goes inside the Modal, as it should. When dismissing the Modal, focus should return to the button where it was launched from.
This issue was mentioned in #12727, but i thought it was worth splitting out separately.

https://www.w3.org/WAI/WCAG21/Understanding/focus-order

Optimally, we'd automatically save off focus on launch and reset it on dismissal. Alternatively, having a prop for a selector to return focus too would also be an option.

WCAG 2.1 Violation

WCAG 2.1, focus order

Reproduction/example

any implementation of Modal from a button

Steps to reproduce

Launch a modal from a button. Dismiss modal. Note focus does not return to previous location. Focus is on the main body node after Modal dismissal.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Thanks for reporting this. I can reproduce it in the storybook by focusing the "Launch modal" button, pressing enter to open the modal, and pressing esc to close the modal. Focus is not returned to the button

[tay1orjones]

How this was originally outlined in parent #12727

Whatever launches a dialog, when it is dismissed, that item should regain focus. In the implementations in React storybook, the focus is not shown when the dialog closes, and the user must shift+tab back to put the button in focus.

[tay1orjones]

When this is tackled, we should cover the solution in automated keyboard nav tests like we're doing in #13747 and #13748

[tw15egan]

I'm not sure we can handle this on our end, since Modal and ComposedModal are just toggled via the open prop which can be toggled by any element, in most cases a button. The ComposedModal has an example of how to handle this functionality, however:

const closeButton = useRef();

<Button ref={closeButton} onClick={() => setOpen(true)}>
    Launch composed modal
</Button>


<ComposedModal
     open={open}
     onClose={() => {
     setOpen(false);
     setTimeout(() => {
         closeButton.current.focus();
    });
}}>

Any other ideas?

[tw15egan]

Put up #14355 that adds in a new prop launcherButtonRef that should allow for an easier configuration of this functionality.