[Bug]: Accordion collapse delay allows focus to move into collapsing panel

[petdud]

Component

Accordion

Package version

latest

React version

18.3.1

Environment

System:
    OS: Linux 6.8 Ubuntu 24.04.4 LTS 24.04.4 LTS (Noble Numbat)
    CPU: (32) x64 AMD EPYC 7763 64-Core Processor
    Memory: 54.65 GB / 125.79 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Browsers:
    Chrome: 145.0.7632.116
  npmPackages:
    @types/react: patch:@types/react@npm%3A18.3.12#~/.yarn/patches/@types-react-npm-18.3.12-69c5fbaab9.patch => 18.3.12 
    @types/react-dom: ^18.3.0 => 18.3.5 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1

Current Behavior

Accordion panels do not collapse immediately when multiple items are closed quickly.

Because the panel remains interactive for a short time during collapse, keyboard focus can move into content that is already supposed to be closing. A reliable repro is:

1. Focus an open accordion header.
2. Ensure the panel contains an actionable control such as a button.
3. Press Enter to collapse the item.
4. Immediately press Tab.

Focus can move into the button inside the panel before the collapse completes. Once the panel finishes collapsing, that focused element disappears from the tab order and focus is effectively lost or moved unexpectedly.

This looks like a timing gap between the header toggle action and the point when the collapsing panel content becomes non-focusable.

Expected Behavior

Once an accordion item starts collapsing, interactive content inside that panel should no longer be reachable by keyboard navigation.

Pressing Enter on the header and then quickly pressing Tab should move focus to the next valid focus target outside the collapsing panel, not into an element that is about to be hidden.

Reproduction

https://stackblitz.com/edit/kbyw9mr6?file=src%2Fexample.tsx

Steps to reproduce

1. Open the StackBlitz reproduction.
2. Open multiple accordion items.
3. Put keyboard focus on the first open accordion header.
4. Ensure there is a focusable control inside the expanded panel, such as a button.
5. Press Enter to collapse the focused accordion item.
6. Immediately press Tab before the collapse animation/state transition fully finishes.
7. Observe that focus can briefly enter the button inside the collapsing panel.
8. Observe that when the panel finishes collapsing, focus is lost or jumps unexpectedly because the focused element is no longer available.

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.