[Tab] - Disabled tab stuck with `data-focus-visible="true"`

[ItaiYosephi]

Current behavior

When selected tab goes disabled, it can sometimes get stuck with data-focus-visible="true"

https://github.com/user-attachments/assets/033452bb-c353-4af3-8280-dc2ba09018f4

Steps to reproduce the bug

1. Open https://stackblitz.com/edit/am32ns-b2vc47?file=dialog-combobox-command-menu%2Findex.tsx
2. Open the dialog
3. Click on tab Two
4. type 4 letters causing it to be disabled.
5. click on the up arrow, and then on left/right arrows

Expected behavior

There should only be one tab with data-focus-visible="true"

Workaround

https://github.com/ariakit/ariakit/issues/3941#issuecomment-2227092167

Possible solutions

No response

[diegohaz]

Thanks for reporting. It indeed looks like a bug.

You can work around it by disabling accessibleWhenDisabled only after the selected tab that got disabled loses focus, so the blur event can be triggered (and therefore remove the data-focus-visible attribute):

function Tab(props: Ariakit.TabProps) {
  const tab = Ariakit.useTabContext()!;
  const selectedId = tab.useState("selectedId");
  const defaultId = useId();
  const id = props.id ?? defaultId;
  return <Ariakit.Tab accessibleWhenDisabled={selectedId === id} {...props} />;
}