No focusable buttons when first toolbar item is disabled

[jeryj]

Current behavior

If the first button in a toolbar is disabled after rerender, it does not cause the data-active-item and roving tabindex to update, so the disabled button remains as the he data-active-item and the rest of the buttons have a tabindex=-1, so no button in the toolbar is able to be focused.

Steps to reproduce the bug

1. Open sandbox: https://codesandbox.io/p/sandbox/inspiring-cherry-6xwpl2
2. Tab to the toolbar
3. Focus skips the toolbar, as the active item is still set as the now disabled button, which can't receive focus.

Expected behavior

The toolbar will rerender and allow focus to be placed on the next available non-disabled button.

Workaround

#3232 (comment)

Possible solutions

No response

[diegohaz]

Thanks for reporting, @jeryj!

I believe this is because Ariakit doesn't automatically shift focus to another composite item when the current one becomes disabled or is removed from the DOM. This is because elements might be temporarily removed from the DOM due to React Suspense, virtualization, and so on. Plus, the active item id might point to an item that's not yet rendered, but will be soon. I'm planning to introduce a new feature to handle removable elements in the near future.

However, we could likely build something for disabled items directly into the composite item component.

In the meantime, here are two alternatives that can be implemented in userland:

• Use the accessibleWhenDisabled prop on toolbar items.

• Implement logic within a custom ToolbarItem component that automatically sets the active id when the current item is active and becomes disabled:

  function ToolbarItem(props) {
    const toolbar = Ariakit.useToolbarContext()!;
  
    const defaultId = React.useId();
    const id = props.id ?? defaultId;
    const isActiveDisabled = toolbar.useState((state) => {
      return props.disabled && state.activeId === id;
    });
  
    React.useEffect(() => {
      if (!isActiveDisabled) return;
      toolbar.setActiveId(toolbar.next());
    }, [isActiveDisabled, toolbar]);
  
    return <Ariakit.ToolbarItem id={id} {...props} />;
  }

[jeryj]

Thank you for the workaround ideas, @diegohaz! Those are super helpful.