[ComposedModal] keyboard trap fails when modal is last component in page

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

In normal use, a ComposedModal will trap the keyboard to rotate the input focus within the modal itself. If you add a ComposedModal as the last component in a page i.e. there are no naturally focusable elements in the DOM after the modal, then the focus trap fails to work.

The reason this fails to work is that the focus moves to the browser URL bar which is a non-DOM element so the evt.relatedTarget value in the focus event is set to null for security reasons. The handleBlur function will not work if evt.relatedTarget is null, so the keyboard trap fails.

This occurs in both Firefox and Chrome.

Steps to reproduce the issue

1. Build a page with some focusable elements
2. Add a ComposedModal at the end of the page
3. Show the modal and press Tab to move the focus.
4. Observe that the focus is not trapped and actually follows through the browser URL bar and then the rest of the page.
5. Move the modal to the start of the page and observe that the focus trap now works.

[ptaunton]

I find it odd that this is intentional. Adding a check for a null value for evt.relatedTarget should be all that is needed to fix this issue. A null value will always indicate that the newly focussed item is outside the scope of the modal so it is safe to call the focusModal method in this case.

[asudoh]

I see your points, consideration is in place for better documentation, etc as well as better announcement. We are aware that there are two choices on focus-wrap, and took a route with less implementation overhead.