Bug Report: Intermittent console error when opening Dialog

[IrinaSer]

Description:

An intermittent bug has been found in the Dialog component. After opening a modal window, an error occasionally appears in the console. The issue is unstable but reproducible both in a real project and in a minimal sandbox example.

❌ Error: Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus.

It seems that the error is related to aria-hidden attributes being assigned before the focus shifts away from the button that triggers the Dialog.

Steps to Reproduce:

1. Create a minimal example using the Dialog component from HeadlessUI.
2. Set up a button to open the modal window.
3. Click the button to open the modal.
4. Observe the console; the error sometimes appears.

Environment:

• HeadlessUI: @headlessui/vue: "1.7.22"
• Vue: "3.5.12"
• Browsers: Chrome
• OS: Windows/MacOS

Expected Behavior:

The modal window opens without errors in the console. The focus is correctly transferred to the first interactive element inside the Dialog.

Actual Behavior:

An error occasionally appears in the console, seemingly due to improper focus handling.

Additional Information:

• The issue occurs with minimal component configuration and logic.
• The bug is likely related to HeadlessUI attempting to assign focus attributes before fully switching the context.
• In real projects, this also leads to unstable UI behavior.

Screenshots:

1 Sandbox error:

2 Project error:

Sandbox Example:

https://codesandbox.io/p/devbox/pedantic-glade-8kth6p