Keep selected tab accessible when disabled

.changeset/4018-tab-selected-accessible-when-disabled.md

@@ -0,0 +1,8 @@
+---
+"@ariakit/react-core": patch
+"@ariakit/react": patch
+---
+
+Accessing selected tabs when disabled
+
+A [Tab](https://ariakit.org/components/tab) component that is both selected and disabled will now remain accessible to keyboard focus even if the [`accessibleWhenDisabled`](https://ariakit.org/reference/tab#accessiblewhendisabled) prop is set to `false`. This ensures users can navigate to other tabs using the keyboard.

examples/combobox-tabs/style.css

@@ -67,6 +67,7 @@
     bg-inherit
     text-sm
     bottom-0
+    mt-auto
     gap-4
     p-2
     border-t

examples/combobox-tabs/test-browser.ts

@@ -0,0 +1,34 @@
+import { query } from "@ariakit/test/playwright";
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/previews/combobox-tabs", { waitUntil: "networkidle" });
+});
+
+test("https://github.com/ariakit/ariakit/issues/3941", async ({ page }) => {
+  const q = query(page);
+
+  await q.combobox().click();
+  await expect(q.dialog()).toBeVisible();
+
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.press("ArrowLeft");
+  await expect(q.tab("Guide 6")).toHaveAttribute("data-active-item");
+  await expect(q.tab("Guide 6")).toHaveAttribute("data-focus-visible");
+  await expect(q.tab("Guide 6")).toHaveAttribute("aria-selected", "true");
+
+  await page.keyboard.type("ann");
+  await page.keyboard.press("Backspace");
+  await expect(q.tab("Guide 0")).toHaveAttribute("data-active-item");
+  await expect(q.tab("Guide 0")).toHaveAttribute("data-focus-visible");
+  await expect(q.tab("Guide 0")).toHaveAttribute("aria-selected", "true");
+
+  await page.keyboard.press("ArrowRight");
+  await expect(q.tab("Components 1")).toHaveAttribute("data-active-item");
+  await expect(q.tab("Components 1")).toHaveAttribute("data-focus-visible");
+  await expect(q.tab("Components 1")).toHaveAttribute("aria-selected", "true");
+
+  await expect(q.tab("Guide 0")).toHaveAttribute("aria-selected", "false");
+  await expect(q.tab("Guide 0")).not.toHaveAttribute("data-focus-visible");
+  await expect(q.tab("Guide 0")).not.toHaveAttribute("data-active-item");
+});

packages/ariakit-react-core/src/focusable/focusable.tsx

@@ -224,9 +224,9 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
     const trulyDisabled = !!disabled && !accessibleWhenDisabled;
     const [focusVisible, setFocusVisible] = useState(false);
 
-    // When the focusable element is disabled, it doesn't trigger a blur event so
-    // we can't set focusVisible to false there. Instead, we have to do it here by
-    // checking the element's disabled attribute.
+    // When the focusable element is disabled, it doesn't trigger a blur event
+    // so we can't set focusVisible to false there. Instead, we have to do it
+    // here by checking the element's disabled attribute.
     useEffect(() => {
       if (!focusable) return;
       if (trulyDisabled && focusVisible) {
@@ -311,12 +311,12 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
       if (!focusable) return;
       const element = event.currentTarget;
       if (!element) return;
-      if (!hasFocus(element)) return;
-      onFocusVisible?.(event);
-      if (event.defaultPrevented) return;
       // Some extensions like 1password dispatches some keydown events on
       // autofill and immediately moves focus to the next field. That's why we
       // need to check if the current element is still focused.
+      if (!hasFocus(element)) return;
+      onFocusVisible?.(event);
+      if (event.defaultPrevented) return;
       setFocusVisible(true);
     };
 

packages/ariakit-react-core/src/tab/tab.tsx

@@ -6,7 +6,7 @@ import {
   CompositeItem,
   useCompositeItem,
 } from "../composite/composite-item.tsx";
-import { useEvent, useId, useWrapElement } from "../utils/hooks.ts";
+import { useEvent, useId } from "../utils/hooks.ts";
 import { useStoreState } from "../utils/store.tsx";
 import {
   createElement,
@@ -37,7 +37,6 @@ type HTMLType = HTMLElementTagNameMap[TagName];
  */
 export const useTab = createHook<TagName, TabOptions>(function useTab({
   store,
-  accessibleWhenDisabled = true,
   getItem: getItemProp,
   ...props
 }) {
@@ -85,38 +84,7 @@ export const useTab = createHook<TagName, TabOptions>(function useTab({
   const selected = store.useState((state) => !!id && state.selectedId === id);
   const hasActiveItem = store.useState((state) => !!store.item(state.activeId));
   const canRegisterComposedItem = isActive || (selected && !hasActiveItem);
-
-  props = useWrapElement(
-    props,
-    (element) => {
-      if (!store?.composite) return element;
-      const defaultProps = {
-        id,
-        store: store.composite,
-        shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,
-        render: element,
-      } satisfies CompositeItemOptions;
-      // If the tab is rendered as part of another composite widget such as
-      // combobox, we need to render it as a composite item. This ensures it's
-      // recognized in the composite store and lets us manage arrow key
-      // navigation to move focus to other composite items that might be
-      // rendered in a tab panel. We only register the selected tab to maintain
-      // a vertical list orientation.
-      return (
-        <CompositeItem
-          {...defaultProps}
-          render={
-            store.combobox && store.composite !== store.combobox ? (
-              <CompositeItem {...defaultProps} store={store.combobox} />
-            ) : (
-              element
-            )
-          }
-        />
-      );
-    },
-    [store, id, canRegisterComposedItem, shouldRegisterItem],
-  );
+  const accessibleWhenDisabled = selected || props.accessibleWhenDisabled;
 
   // If the tab is rendered within another composite widget with virtual focus,
   // such as combobox, it shouldn't be tabbable even if the tab store uses
@@ -143,6 +111,37 @@ export const useTab = createHook<TagName, TabOptions>(function useTab({
     onClick,
   };
 
+  // If the tab is rendered as part of another composite widget such as
+  // combobox, we need to render it as a composite item. This ensures it's
+  // recognized in the composite store and lets us manage arrow key navigation
+  // to move focus to other composite items that might be rendered in a tab
+  // panel. We only register the selected tab to maintain a vertical list
+  // orientation.
+  if (store.composite) {
+    const defaultProps = {
+      id,
+      accessibleWhenDisabled,
+      store: store.composite,
+      shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,
+      render: props.render,
+    } satisfies CompositeItemOptions;
+    props = {
+      ...props,
+      render: (
+        <CompositeItem
+          {...defaultProps}
+          render={
+            store.combobox && store.composite !== store.combobox ? (
+              <CompositeItem {...defaultProps} store={store.combobox} />
+            ) : (
+              defaultProps.render
+            )
+          }
+        />
+      ),
+    };
+  }
+
   props = useCompositeItem({
     store,
     ...props,