[React] Menu component taking over focus on close

[breadadams]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.5

What browser are you using?

Chrome w/ macOS Voice Over, and Chrome Screen Reader

Reproduction URL

https://stackblitz.com/edit/headlessui-dialog-a11y-bug

(If a git repo is required too just let me know)

Describe your issue

When a Menu component contains an option that triggers a Dialog, screen readers do not detect the opening of the dialog component.

This appears to be due to the fact that Menu.Items returns focus to the Menu.Button when it closes, and therefore the screen reader instead reads that focus action.

Our workaround currently has been to wait for the next tick before opening the dialog:

// before
<Menu.Item><button onClick={() => setIsOpen(true)} ... /></Menu.Item>

// after 
<Menu.Item><button onClick={() => setTimeout(() => setIsOpen(true), 0)} ... /></Menu.Item>

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1782, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.