Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Use the tab key to place focus on the ... button (i.e. <OverflowMenu>)
Push Enter key
Use tab key to choose a menu item
Push Enter key
Observe the modal opening and overlaying over the overflow menu button
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: carbon-overflow-modal-focus-demo

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.

Issue Analytics

State:
Created 4 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

kinuengcommented, Sep 27, 2019

Hi @asudoh, Got the Modal focus to work with the two workarounds (https://github.com/carbon-design-system/carbon/issues/4036#issuecomment-535448845, https://github.com/carbon-design-system/carbon/issues/4036#issuecomment-535702634)

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

0reactions

asudohcommented, Sep 26, 2019

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

Top Results From Across the Web

Modal dont focus when is opened - Stack Overflow

I just ran into this problem not too long ago. In your buttons, be sure to do data ...

Dialogs - Carbon Design System

A modal dialog triggers a state (or mode) that focuses the user's attention ... Modeless dialogs are commonly used to present non-critical information...

Modal - Carbon Components Svelte - Render

Use the selectorPrimaryFocus to specify the element that should be focused when the modal is opened (e.g., #id , .class , [data-attribute] )....

Modal - Bootstrap

Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so...

Transactional modal - Carbon Design System

Modals focus the user's attention exclusively on one task or piece of information via ... Modal dialogs are commonly used for short and...