@proyecto-viviana/solidaria 0.4.0 → 0.4.2

package/src/table/createTableSelectionCheckbox.ts

@@ -8,6 +8,7 @@ import type { JSX } from "solid-js";
 import { createId } from "@proyecto-viviana/solid-stately";
 import type { TableState, TableCollection } from "@proyecto-viviana/solid-stately";
 import type { AriaTableSelectionCheckboxProps, TableSelectionCheckboxAria } from "./types";
+import { getRowLabelledBy } from "./utils";
 
 /**
  * Creates accessibility props for a table row selection checkbox.
@@ -24,10 +25,25 @@ export function createTableSelectionCheckbox<T extends object>(
     return s.isSelected(p.key);
   });
 
+  // Mirrors `useGridSelectionCheckbox`'s `!selectionManager.canSelectItem(key)`:
+  // a row's checkbox is disabled when selection is off, the key is in
+  // `disabledKeys`, or the row/item itself is disabled. This is broader than the
+  // row's own focusability gate (which only disables under `disabledBehavior:
+  // "all"`) — a row disabled via its `isDisabled` prop still cannot be selected,
+  // so its checkbox is disabled regardless of `disabledBehavior`.
+  //
+  // `isRowDisabled` carries the render-time per-row `isDisabled` that this
+  // data-driven port keeps on the row hook rather than the collection node
+  // (surfaced via `TableRowContext`); the collection-node check below still
+  // applies for any path that does populate `node.isDisabled`.
   const isDisabled = createMemo(() => {
     const s = state();
     const p = props();
-    return s.isDisabled(p.key);
+    if (s.selectionMode === "none" || s.disabledKeys.has(p.key) || p.isRowDisabled) {
+      return true;
+    }
+    const item = s.collection.getItem(p.key);
+    return !item || !!item.isDisabled || !!item.props?.isDisabled;
   });
 
   const onChange = () => {
@@ -39,6 +55,9 @@ export function createTableSelectionCheckbox<T extends object>(
   };
 
   const checkboxProps = createMemo(() => {
+    const s = state();
+    const p = props();
+
     const baseProps: Record<string, unknown> = {
       id: checkboxId,
       type: "checkbox",
@@ -46,6 +65,10 @@ export function createTableSelectionCheckbox<T extends object>(
       disabled: isDisabled(),
       onChange,
       "aria-label": "Select",
+      // Mirrors `useTableSelectionCheckbox`: the checkbox is labelled by its own
+      // "Select" text plus the row's row-header cell(s), so screen readers read
+      // "Select Foo.pdf" rather than a bare "Select".
+      "aria-labelledby": `${checkboxId} ${getRowLabelledBy(s, p.key)}`,
     };
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;

package/src/table/types.ts

@@ -180,6 +180,14 @@ export interface TableRowGroupAria {
 export interface AriaTableSelectionCheckboxProps {
   /** The key of the row. */
   key: Key;
+  /**
+   * Whether the owning row is disabled. In upstream RAC the row's `isDisabled`
+   * lives on the shared collection node, so `selectionManager.canSelectItem`
+   * can read it. In this data-driven port per-row `isDisabled` is a render-time
+   * prop threaded through `createTableRow`, so it is surfaced to the sibling
+   * checkbox via `TableRowContext` and forwarded here.
+   */
+  isRowDisabled?: boolean;
 }
 
 /**

package/src/table/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * Table accessibility id helpers.
+ * Port of @react-aria/table/utils (`getRowLabelledBy` / cell id derivation).
+ */
+
+import type {
+  Key,
+  GridNode,
+  TableState,
+  TableCollection,
+} from "@proyecto-viviana/solid-stately";
+import { getTableData } from "./createTable";
+
+/**
+ * A row is labelled by its row-header cells. Mirrors `@react-aria/table`'s
+ * `getRowLabelledBy`, which joins `getCellId(state, rowKey, columnKey)` across
+ * `collection.rowHeaderColumnKeys`. We resolve the actual rowheader cell node
+ * and rebuild the exact id string `createTableCell` puts on the element
+ * (`${tableId}-${parentKey}-${cellKey}`) so the reference always matches a real
+ * element, regardless of the cell-key scheme.
+ */
+export function getRowLabelledBy<T extends object>(
+  state: TableState<T, TableCollection<T>>,
+  rowKey: Key,
+): string {
+  const tableData = getTableData(state);
+  const tableId = tableData?.tableId ?? "table";
+  const collection = state.collection as TableCollection<T> & {
+    getCell?: (rowKey: Key, columnKey: Key) => GridNode<T> | null;
+  };
+
+  return [...collection.rowHeaderColumnKeys]
+    .map((columnKey) => {
+      const cell = collection.getCell?.(rowKey, columnKey);
+      return cell?.parentKey != null
+        ? `${tableId}-${String(cell.parentKey)}-${String(cell.key)}`
+        : null;
+    })
+    .filter((id): id is string => id != null)
+    .join(" ");
+}

package/src/tabs/createTabs.ts

@@ -3,7 +3,7 @@
  * Based on @react-aria/tabs.
  */
 
-import { type Accessor, createEffect, createMemo } from "solid-js";
+import { type Accessor, batch, createEffect, createMemo } from "solid-js";
 import { createFocusRing } from "../interactions";
 import { createPress } from "../interactions";
 import { createHover } from "../interactions";
@@ -88,6 +88,7 @@ export interface TabAria {
     onPointerDown: (e: PointerEvent) => void;
     onClick: (e: MouseEvent) => void;
     onFocus: (e: FocusEvent) => void;
+    onFocusIn: (e: FocusEvent) => void;
     onBlur: (e: FocusEvent) => void;
   };
   /** Whether the tab is selected. */
@@ -271,12 +272,25 @@ export function createTabList<T>(props: AriaTabListProps, state: TabListState<T>
 
     if (nextKey !== null) {
       e.preventDefault();
-      state.setFocusedKey(nextKey);
-      // Selection follows focus only for keyboard navigation in automatic mode
-      // (mirrors useSelectableCollection's selectOnFocus in navigateToKey).
-      if (keyboardActivation() === "automatic") {
-        state.setSelectedKey(nextKey);
-      }
+      // Batch the focus + selection writes so their observable ordering matches
+      // React. `setFocusedKey` drives a reactive effect that moves DOM focus
+      // (firing native focusout/focusin); `setSelectedKey` calls
+      // `onSelectionChange` synchronously. Written bare, Solid flushes the focus
+      // effect the instant `setFocusedKey` runs — so focus moves *before* the
+      // selection callback, inverting React's order. React batches both state
+      // updates in the handler (callback fires synchronously) and defers the
+      // focus move to a layout effect. `batch()` is the Solid equivalent: it
+      // holds the focus effect until the batch closes, so the synchronous
+      // `onSelectionChange` fires first, then focus moves — matching upstream's
+      // `callback → focusout → focusin` sequence (D4 event-sequence oracle).
+      batch(() => {
+        state.setFocusedKey(nextKey);
+        // Selection follows focus only for keyboard navigation in automatic mode
+        // (mirrors useSelectableCollection's selectOnFocus in navigateToKey).
+        if (keyboardActivation() === "automatic") {
+          state.setSelectedKey(nextKey);
+        }
+      });
     }
   };
 
@@ -340,9 +354,17 @@ export function createTab<T>(
   // keyboard on key down, while touch, pen, and virtual pointers select on
   // press up.
   const selectTab = () => {
-    const tabKey = key();
-    state.setFocusedKey(tabKey);
-    state.setSelectedKey(tabKey);
+    // Press handlers select only — they do NOT set the focused key. Upstream's
+    // useSelectableItem does the same: its press/onSelect path calls
+    // replaceSelection, while `focusedKey` is driven exclusively by the DOM
+    // `onFocus` handler (see handleFocus below). Setting the focused key here too
+    // flipped the roving tabIndex synchronously at pointer-up — *before* the
+    // browser's native focus reached the tab — so a touch tap logged the tapped
+    // tab with tabIndex 0 at its own `focusin`, where React (which updates
+    // tabIndex only on the post-event commit) still shows -1. Letting native
+    // focus alone advance `focusedKey` defers the tabIndex flip past the focus
+    // event, matching React's D4 event sequence.
+    state.setSelectedKey(key());
   };
   const { isPressed, pressProps } = createPress({
     get isDisabled() {
@@ -382,12 +404,30 @@ export function createTab<T>(
     }
   };
 
-  // Focus management
+  // Focus management. The focus ring reacts to the native `focus` event, but the
+  // roving-tabindex commit is deliberately bound to `focusin` (see
+  // handleFocusIn) so its DOM reflection lands one event later — matching React,
+  // whose `onFocus` is a `focusin`-delegated listener at the app root.
   const handleFocus = (e: FocusEvent) => {
-    state.setFocusedKey(key());
     callHandler(focusProps.onFocus, e);
   };
 
+  // Roving-tabindex commit (D4 event-ordering). React's `onFocus` is delegated
+  // to a single `focusin` listener at the app root, so the roving tabIndex it
+  // drives reflects one event *after* the native `focus`. Binding the
+  // focusedKey write here (to `focusin`) mirrors that timing: the D4 oracle
+  // records event targets from a document-level capture-phase listener, which
+  // runs before this at-target handler, so a touch tap — whose selection lands
+  // on press-up, after focus — is still observed with tabIndex=-1 at `focusin`,
+  // exactly as React. A mouse press selects on press-start and syncs focusedKey
+  // before focus (createTabListState's selection→focus effect), so its tab
+  // already reads tabIndex=0 at `focusin`, again matching React. Setting it on
+  // the earlier `focus` event flipped the tab a whole event too soon, so touch
+  // taps diverged at `focusin`. See recertification.md D4 event-ordering.
+  const handleFocusIn = () => {
+    state.setFocusedKey(key());
+  };
+
   const handleBlur = (e: FocusEvent) => {
     callHandler(focusProps.onBlur, e);
   };
@@ -449,6 +489,7 @@ export function createTab<T>(
       onPointerDown: handlePointerDown,
       onClick: handleClick,
       onFocus: handleFocus,
+      onFocusIn: handleFocusIn,
       onBlur: handleBlur,
     },
     isSelected,

package/src/tag/createTag.ts

@@ -184,13 +184,27 @@ export function createTag<T>(
   const handleKeyDown = (e: KeyboardEvent) => {
     if (isDisabled()) return;
 
+    // A TagGroup is inherently horizontal (useTagGroup passes
+    // `orientation: 'horizontal'` to the ListKeyboardDelegate), so the inline
+    // (Left/Right) axis is the navigation axis and flips under RTL, while the
+    // block (Up/Down) axis stays DOM-ordered. Mirror ListKeyboardDelegate:
+    // getKeyRightOf = rtl ? previous : next; getKeyLeftOf = rtl ? next : previous;
+    // getKeyBelow/Above are never direction-flipped.
+    const isRtl = getData()?.direction === "rtl";
+
     switch (e.key) {
       case "ArrowRight":
+        e.preventDefault();
+        focusKey(isRtl ? getPreviousFocusableKey(key()) : getNextFocusableKey(key()));
+        return;
+      case "ArrowLeft":
+        e.preventDefault();
+        focusKey(isRtl ? getNextFocusableKey(key()) : getPreviousFocusableKey(key()));
+        return;
       case "ArrowDown":
         e.preventDefault();
         focusKey(getNextFocusableKey(key()));
         return;
-      case "ArrowLeft":
       case "ArrowUp":
         e.preventDefault();
         focusKey(getPreviousFocusableKey(key()));
@@ -226,39 +240,14 @@ export function createTag<T>(
     }
   };
 
-  // Compute tabIndex
+  // Compute tabIndex. Mirror useTag (vendored @react-aria/tag/src/useTag.ts):
+  //   tabIndex = (!isDisabled && (isFocused || focusedKey == null)) ? 0 : -1
+  // Every non-disabled row is a tab stop when nothing is focused yet (so native
+  // Shift+Tab from a following element lands on the LAST row); once a key is
+  // focused, only that row keeps tabIndex 0 (roving single tab stop).
   const tabIndex = createMemo(() => {
     if (isDisabled()) return -1;
-
-    if (isFocused()) {
-      return 0;
-    }
-
-    if (state.focusedKey() !== null) {
-      return -1;
-    }
-
-    const collection = state.collection();
-    let defaultTabStop: Key | null = null;
-
-    if (state.selectionMode() !== "none") {
-      for (const item of collection) {
-        if (!state.isDisabled(item.key) && state.isSelected(item.key)) {
-          defaultTabStop = item.key;
-          break;
-        }
-      }
-    }
-
-    if (defaultTabStop == null) {
-      defaultTabStop = getFirstFocusableKey();
-    }
-
-    if (key() === defaultTabStop) {
-      return 0;
-    }
-
-    return -1;
+    return isFocused() || state.focusedKey() == null ? 0 : -1;
   });
 
   // Filter DOM props

package/src/tag/createTagGroup.ts

@@ -35,6 +35,12 @@ export interface AriaTagGroupProps {
   errorMessage?: string;
   /** Handler that is called when a user removes a tag. */
   onRemove?: (keys: Set<Key>) => void;
+  /**
+   * The layout direction, threaded from `useLocale`. A TagGroup navigates on the
+   * inline axis, so ArrowLeft/ArrowRight flip under RTL (mirrors the direction
+   * the ListKeyboardDelegate receives from useTagGroup).
+   */
+  direction?: "ltr" | "rtl";
 }
 
 export interface TagGroupAria {
@@ -54,6 +60,7 @@ const tagGroupData = new WeakMap<object, TagGroupData>();
 interface TagGroupData {
   id: string;
   onRemove?: (keys: Set<Key>) => void;
+  direction: "ltr" | "rtl";
 }
 
 export function getTagGroupData(state: ListState): TagGroupData | undefined {
@@ -83,6 +90,9 @@ export function createTagGroup<T>(
     get onRemove() {
       return getProps().onRemove;
     },
+    get direction() {
+      return getProps().direction ?? "ltr";
+    },
   };
 
   // Filter DOM props
@@ -133,6 +143,82 @@ export function createTagGroup<T>(
     return ids.length > 0 ? ids.join(" ") : undefined;
   };
 
+  const getRef = () => _ref?.() ?? null;
+
+  // First/last navigable (non-disabled) row keys — the entry targets.
+  const getFirstNavigableKey = (): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getFirstKey();
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyAfter(candidate);
+    }
+    return candidate;
+  };
+
+  const getLastNavigableKey = (): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getLastKey();
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyBefore(candidate);
+    }
+    return candidate;
+  };
+
+  // Focus marshalling — the grid container is a trampoline. Its roving tabIndex
+  // is 0 only while `focusedKey == null` (see gridProps below), so a forward Tab
+  // that reaches the standalone container lands on the container itself; move the
+  // focused key onto the first/last row and the post-commit effect below pulls
+  // REAL DOM focus there while the container rolls to tabIndex -1. Mirrors
+  // useSelectableCollection's `onFocus` (via useTagGroup → useGridList). A
+  // Shift+Tab arriving directly on a row is handled by the row's own focusable
+  // onFocus, since every non-disabled row is a tab stop when nothing is focused.
+  const onFocus = (e: FocusEvent) => {
+    state.setFocused(true);
+
+    // `focus` is non-bubbling in Solid, so this fires only when the container
+    // itself receives focus; ignore anything that bubbled from a descendant.
+    const container = e.currentTarget as HTMLElement | null;
+    if (container && e.target && !container.contains(e.target as Node)) return;
+    if (state.focusedKey() != null || getProps().isDisabled) return;
+
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Focus arriving from an element that FOLLOWS the group in document order
+    // means the user shift-tabbed backward into it → enter at the LAST row;
+    // otherwise (forward Tab, or programmatic) enter at the FIRST.
+    const enterKey =
+      relatedTarget &&
+      container &&
+      container.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING
+        ? getLastNavigableKey()
+        : getFirstNavigableKey();
+    if (enterKey != null) {
+      state.setFocusedKey(enterKey);
+    }
+  };
+
+  const onBlur = () => {
+    state.setFocused(false);
+  };
+
+  // Once the roving tabindex for the focused key has committed to the DOM, move
+  // browser focus onto that row (looked up by its stable data-key), mirroring
+  // useSelectableCollection. Only manage focus while it already lives inside the
+  // container — i.e. the user is navigating via the trampoline — so a background
+  // focusedKey change never yanks focus from elsewhere on the page.
+  createEffect(() => {
+    const key = state.focusedKey();
+    const el = getRef();
+    if (!el || key == null) return;
+
+    const active = document.activeElement;
+    if (!active || (active !== el && !el.contains(active))) return;
+
+    const target = el.querySelector<HTMLElement>(`[data-key="${CSS.escape(String(key))}"]`);
+    if (target && target !== active) {
+      target.focus();
+    }
+  });
+
   return {
     get gridProps() {
       const p = getProps();
@@ -146,6 +232,12 @@ export function createTagGroup<T>(
         "aria-relevant": "additions",
         "aria-describedby": getAriaDescribedBy(),
         "aria-disabled": p.isDisabled || undefined,
+        // Roving container tabIndex mirrors useSelectableCollection: the container
+        // is tabbable (0) only while nothing is focused, then rolls to -1 once a
+        // row takes focus so Tab exits the group.
+        tabIndex: p.isDisabled ? undefined : state.focusedKey() != null ? -1 : 0,
+        onFocus,
+        onBlur,
       });
     },
     get labelProps() {

package/src/toolbar/createToolbar.ts

@@ -79,47 +79,6 @@ function getActiveElement(doc: Document): Element | null {
   return activeElement;
 }
 
-const TEXT_INPUT_TYPES = new Set([
-  "",
-  "text",
-  "search",
-  "url",
-  "tel",
-  "password",
-  "email",
-  "number",
-  "date",
-  "datetime-local",
-  "month",
-  "time",
-  "week",
-]);
-
-function isTextInputLikeElement(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) {
-    return false;
-  }
-
-  if (target.isContentEditable || !!target.closest('[contenteditable="true"]')) {
-    return true;
-  }
-
-  if (target.getAttribute("role") === "textbox") {
-    return true;
-  }
-
-  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
-    return true;
-  }
-
-  if (target instanceof HTMLInputElement) {
-    const type = target.type.toLowerCase();
-    return TEXT_INPUT_TYPES.has(type);
-  }
-
-  return false;
-}
-
 function createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {
   return {
     focusNext(opts: FocusManagerOptions = {}) {
@@ -283,20 +242,6 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
 
     const doc = getOwnerDocument(root);
 
-    // Text entry controls keep the arrow keys for caret/value navigation.
-    // Upstream useToolbar has no such guard; a text input placed inside a
-    // toolbar would otherwise lose caret movement. Kept (narrowed to arrows)
-    // as a suspected divergence pending a dedicated ActionBar/Toolbar cert.
-    if (isTextInputLikeElement(target)) {
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowLeft":
-        case "ArrowDown":
-        case "ArrowUp":
-          return;
-      }
-    }
-
     const dir = locale().direction;
     const isRTL = dir === "rtl";
     const isHorizontal = orientation() === "horizontal";
@@ -411,14 +356,17 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
         return isInToolbar() ? "group" : "toolbar";
       },
       get "aria-orientation"() {
-        return isInToolbar() ? undefined : orientation();
+        // Upstream useToolbar emits aria-orientation unconditionally, on the
+        // nested role="group" too — not only on the root role="toolbar".
+        return orientation();
       },
       get "aria-label"() {
         return ariaLabel();
       },
       get "aria-labelledby"() {
-        // Only use aria-labelledby if no aria-label is provided
-        return ariaLabel() ? undefined : ariaLabelledby();
+        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.
+        // An explicit empty-string aria-label still suppresses labelledby.
+        return ariaLabel() == null ? ariaLabelledby() : undefined;
       },
       ref: setRef,
     },

package/src/tree/createTree.ts

@@ -240,24 +240,76 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     }
   };
 
-  const onFocus = () => {
+  // The first / last SELECTED key in flattened (visible) order — mirrors React
+  // Aria's `SelectionManager.firstSelectedKey`/`lastSelectedKey`, which entry
+  // focus prefers over the first/last row.
+  const firstSelectedKey = (s: TreeState<T, C>): Key | null => {
+    let key = s.collection.getFirstKey();
+    while (key != null) {
+      if (s.isSelected(key)) return key;
+      key = s.collection.getKeyAfter(key);
+    }
+    return null;
+  };
+  const lastSelectedKey = (s: TreeState<T, C>): Key | null => {
+    let key = s.collection.getLastKey();
+    while (key != null) {
+      if (s.isSelected(key)) return key;
+      key = s.collection.getKeyBefore(key);
+    }
+    return null;
+  };
+
+  // Entry focus is handled on `focusin` (BUBBLING) rather than `focus`
+  // (non-bubbling): React Aria's `useSelectableCollection.onFocus` bubbles, so a
+  // Shift+Tab that the browser parks on a tabbable descendant (e.g. a selection
+  // checkbox, which is `tabIndex=0` like upstream) still reaches the collection
+  // and is redirected to the focused/selected row. A Solid non-bubbling `focus`
+  // handler on the treegrid only fires for forward Tab (the container is the first
+  // tab stop) and would strand backward entry on the last checkbox — the same
+  // trampoline gotcha the TagGroup port hit. See `createListBox.onListBoxFocus`.
+  const onFocusIn = (e: FocusEvent) => {
     const s = state();
     s.setFocused(true);
 
-    // If nothing is focused, focus the first navigable item
-    if (s.focusedKey == null) {
-      const firstKey = findNextNavigableKey(s, s.collection.getFirstKey(), (k) =>
-        s.collection.getKeyAfter(k),
-      );
-      if (firstKey != null) {
-        s.setFocusedKey(firstKey);
-      }
+    const currentTarget = e.currentTarget as Element | null;
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Internal roving moves (focus already inside the tree) are driven by
+    // `onKeyDown`; only seed focus when it enters from OUTSIDE the treegrid.
+    if (!currentTarget || (relatedTarget && currentTarget.contains(relatedTarget))) {
+      return;
+    }
+
+    let key = s.focusedKey;
+    if (key == null) {
+      // Shift+Tab backward into the tree (focus arrived from a FOLLOWING element)
+      // enters at the last selected row, else the last navigable row; forward Tab
+      // enters at the first selected row, else the first navigable row.
+      const backward =
+        !!relatedTarget &&
+        !!(
+          currentTarget.compareDocumentPosition(relatedTarget) &
+          Node.DOCUMENT_POSITION_FOLLOWING
+        );
+      key = backward
+        ? (lastSelectedKey(s) ??
+          findNextNavigableKey(s, s.collection.getLastKey(), (k) => s.collection.getKeyBefore(k)))
+        : (firstSelectedKey(s) ??
+          findNextNavigableKey(s, s.collection.getFirstKey(), (k) => s.collection.getKeyAfter(k)));
+    }
+    if (key != null) {
+      s.setFocusedKey(key);
     }
   };
 
-  const onBlur = () => {
+  const onFocusOut = (e: FocusEvent) => {
     const s = state();
-    s.setFocused(false);
+    const currentTarget = e.currentTarget as Element | null;
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Only clear the focused flag once focus has left the treegrid entirely.
+    if (!currentTarget || !relatedTarget || !currentTarget.contains(relatedTarget)) {
+      s.setFocused(false);
+    }
   };
 
   createEffect(() => {
@@ -295,10 +347,13 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
       "aria-describedby": p["aria-describedby"],
       "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
       "aria-disabled": p.isDisabled || undefined,
-      tabIndex: p.isDisabled ? undefined : 0,
+      // Roving container tab stop: `0` while no row is focused (Tab enters the
+      // tree), `-1` once a row takes focus (the row holds the tab stop). Mirrors
+      // `useSelectableCollection` `tabIndex = focusedKey == null ? 0 : -1`.
+      tabIndex: p.isDisabled ? undefined : s.focusedKey == null ? 0 : -1,
       onKeyDown,
-      onFocus,
-      onBlur,
+      onFocusIn,
+      onFocusOut,
     };
 
     // Add row count for virtualized trees

package/src/tree/createTreeSelectionCheckbox.ts

@@ -5,8 +5,10 @@
 
 import { createMemo, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
 import type { TreeState, TreeCollection } from "@proyecto-viviana/solid-stately";
 import type { AriaTreeSelectionCheckboxProps, TreeSelectionCheckboxAria } from "./types";
+import { getTreeData } from "./createTree";
 
 /**
  * Creates accessibility props for a tree selection checkbox.
@@ -18,6 +20,16 @@ export function createTreeSelectionCheckbox<
   props: Accessor<AriaTreeSelectionCheckboxProps>,
   state: Accessor<TreeState<T, C>>,
 ): TreeSelectionCheckboxAria {
+  const fallbackRowId = createId();
+  const checkboxId = createId();
+
+  // Mirror @react-aria/tree getRowId: the checkbox's aria-labelledby folds its own
+  // "Select" label with the row's id so the SR announces "Select <row text>".
+  const rowId = createMemo(() => {
+    const treeData = getTreeData(state());
+    return treeData ? `${treeData.treeId}-row-${String(props().key)}` : fallbackRowId;
+  });
+
   const isSelected = createMemo(() => {
     const s = state();
     const p = props();
@@ -52,12 +64,13 @@ export function createTreeSelectionCheckbox<
   const checkboxProps = createMemo(() => {
     const baseProps: Record<string, unknown> = {
       type: "checkbox",
+      id: checkboxId,
       "aria-label": "Select",
+      "aria-labelledby": `${checkboxId} ${rowId()}`,
       checked: isSelected(),
       disabled: isDisabled(),
       onChange,
       onClick,
-      tabIndex: -1, // Use arrow keys to navigate, not tab
     };
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;