Opening Modal from OverflowMenu, focus is not placed on the Modal's selectorPrimaryFocus

[kinueng]

When using <OverflowMenu> with a <OverflowMenuItem> that opens a <Modal selectorPrimaryFocus>, the focus is not being placed on the <Modal> but rather the <OverflowMenu> that is in the background.

Environment

Operating system

macOS Mojave Version 10.14.6

Automated testing tool and ruleset

N/A

Browser

Chrome Version 76.0.3809.132 (Official Build) (64-bit)

Automated testing tool and ruleset

Job Access With Speech (JAWS), MacOS VoiceOver

Detailed description

What version of the Carbon Design System are you using?

• "carbon-components": "9.x"
• "carbon-components-react": "6.x"

What did you expect to happen?

The <OverflowMenu> items open a <Modal>. When choosing a menu item, the focus should be placed on the modal, specifically the modal's close button. The close button should have focus by specifying <Modal selectorPrimaryFocus='.bx--modal-close'>

What happened instead?

After the <Modal> is opened, the <OverflowMenu> is stealing focus.

What WCAG 2.1 checkpoint does the issue violate?

I do not know the exact WCAG 2.1 violation. When using screen readers, it is misleading to visually impaired users what is on the screen. The screen reader announces the Overflow menu when the screen reader should be reading the opened modal.

Steps to reproduce the issue

1. Use the tab key to place focus on the ... button (i.e. <OverflowMenu>)
2. Push Enter key
3. Use tab key to choose a menu item
4. Push Enter key
5. Observe the modal opening and overlaying over the overflow menu button
6. Observe the focus is placed on the overflow menu button, which is now in the "background"

• CodeSandbox React Demo: https://codesandbox.io/s/codesandbox-bkp0e

Additional information

Here is the problem below in my product recorded in a .gif file:

NOTE: There is a workaround seen in the gif file. After opening the modal, the user can use the tab key to place focus on the modal x close button. When you recreate the problem, the focus is now placed correctly on the modal close button.

[gscottj]

WCAG 2.1 violation is with respects to Success Criterion 2.4.3 Focus Order
https://www.w3.org/TR/WCAG21/#focus-order
https://www.w3.org/WAI/WCAG21/Understanding/focus-order

[asudoh]

Workaround: The overflow menu action opening modal with setTimeout(), instead of opening modal synchronously.

[kinueng]

Hello @asudoh,

I was unsuccessful at using setTimeout() as a workaround. Do you have an example showing setTimeout() working as a workaround?

---

setTimeout() Workaround Attempt

Below is my unsuccessful codesandbox.io attempt at using setTimeout() to delay the modal opening after clicking an overflow menu item. I am assuming the workaround is an attempt to let the <OverflowMenu> focus event happen first and then let the <Modal> focus event happen next to correctly place the focus on the Modal. Is that the workaround’s intent?

https://codesandbox.io/s/codesandbox-sdcsh

Debugging observations

When I put breakpoints in <OverflowMenu> and <Modal> on the product that I work on (https://github.com/kappnav/ui), I am noticing that the modal never runs the logic to process the selectorPrimaryFocus property in https://github.com/carbon-design-system/carbon-components-react/blob/68c30ea43c6502826f1150c67f35bb2a6b345337/src/components/Modal/Modal.js#L230-L238.

We have other places where we open a modal without an overflow menu and the selectorPrimaryFocus logic runs fine. Is there something in the overflow menu that is preventing the modal from processing selectorPrimaryFocus?

[asudoh]

Seems that you hit #4088, too. Adding focusTrap={false} to <Modal> is a workaround there.

[kinueng]

Hi @asudoh,
Got the Modal focus to work with the two workarounds (#4036 (comment), #4036 (comment))

See here for an example
https://codesandbox.io/s/codesandbox-m8c6c