Chat -- Focus pattern of a modal?

[damiansian]

SC 2.4.3 Focus order

Issue

We may want to trap focus in the chat window until it is dismissed. It has a modal appearance but not a modal keyboard functionality. Normally, in a modal, keyboard focus is purposely trapped inside until the user finishes an action or dismisses the modal.

In the mobile viewport, the chat window takes up the whole screen, but as a screen reader user, I can still get to content behind the window.

In addition, the overall focus pattern is odd. If I am on the message input and hit the tab several times, I am taken to the URL address bar. I think this issue could be solved if we trap focus inside the modal. At a minimum, when a user moves focus away from modal, it should close, not remain open.

Decision to be made

Do you foresee a situation where you'd want people to be able to operate content on the screen while chatting? If yes, then we should not trap focus. If not, then we should trap the focus.

Intercom's documentation

https://www.intercom.com/blog/messenger-accessibility/

In our case, while the Messenger is open, we’ve set a focus trap so users are not able to tab outside of it. That way, users are able to navigate all of the elements in the Messenger without having to navigate through the entire webpage.

This is how you'd enable the focus trap:

const trap = new FocusTrap({
node: document
});

Hit play to see Gif