@proyecto-viviana/solidaria 0.4.0 → 0.4.2

package/src/label/createLabels.ts

@@ -19,10 +19,13 @@ export function createLabels(
   props: DOMProps & AriaLabelingProps,
   defaultLabel?: string,
 ): DOMProps & AriaLabelingProps {
-  let { id, "aria-label": label, "aria-labelledby": labelledBy } = props;
-
-  // Generate an ID if not provided
-  id = createId(id);
+  // Read props directly rather than destructuring: in Solid a destructure
+  // freezes the value at call time. This is a pure snapshot transform, so it is
+  // behaviourally identical, but keeping the reactive read explicit matches the
+  // rest of the port and satisfies guard:idiomatic-solid.
+  let id = createId(props.id);
+  let label = props["aria-label"];
+  let labelledBy = props["aria-labelledby"];
 
   // If there is both an aria-label and aria-labelledby,
   // combine them by pointing to the element itself.

package/src/listbox/createListBox.ts

@@ -250,6 +250,57 @@ export function createListBox<T>(
     },
   });
 
+  // Focus marshalling — the container is a trampoline. When a standalone
+  // listbox receives DOM focus with nothing focused yet (e.g. Tab lands on the
+  // container, whose roving tabIndex is 0 only while `focusedKey == null`), move
+  // the focused key to the first/last option; `createSelectableItem`'s focus
+  // effect then pulls REAL DOM focus onto that option and the container rolls to
+  // tabIndex -1. This mirrors `useSelectableCollection`'s `onFocus`
+  // (useSelectableCollection.ts:409-454) and is why upstream never needs
+  // `aria-activedescendant` on a standalone listbox — real focus IS the AT
+  // channel. Skipped under `shouldUseVirtualFocus` (ComboBox/Autocomplete keep
+  // DOM focus on the input and drive an activedescendant via the virtual-focus
+  // channel instead).
+  //
+  // NOTE on the guard: unlike upstream (whose selectable `onFocus` sets
+  // `manager.setFocused(true)` itself and guards on `manager.isFocused`), our
+  // `createFocusWithin` already flips `setFocused(true)` via `onFocusWithinChange`
+  // — and mergeProps chains it BEFORE this handler — so `manager.isFocused` is
+  // already true here. Guard on `focusedKey() == null` instead (only marshal when
+  // no option is focused yet). `onFocus` is non-bubbling in Solid, so this fires
+  // only when the container element itself receives focus, not on child focus.
+  const onListBoxFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
+    const p = getProps();
+    if (p.isDisabled || p.shouldUseVirtualFocus) return;
+    // Ignore focus events that bubbled through a portal.
+    if (!e.currentTarget.contains(e.target as Node)) return;
+    if (state.focusedKey() != null) return;
+
+    const manager = state.selectionManager;
+    const selectOnFocus = state.selectionBehavior() === "replace";
+    const navigateToKey = (key: Key | null | undefined) => {
+      if (key == null) return;
+      state.setFocusedKey(key);
+      if (selectOnFocus && !manager.isSelected(key)) {
+        state.replaceSelection(key);
+      }
+    };
+
+    const collection = state.collection();
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Detect tab direction: if focus came from an element that FOLLOWS the
+    // listbox in the document, the user is shift-tabbing backward into it, so
+    // enter at the last item; otherwise enter at the first.
+    if (
+      relatedTarget &&
+      e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING
+    ) {
+      navigateToKey(manager.lastSelectedKey ?? collection.getLastKey());
+    } else {
+      navigateToKey(manager.firstSelectedKey ?? collection.getFirstKey());
+    }
+  };
+
   // Keyboard navigation
   const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {
     const p = getProps();
@@ -410,6 +461,26 @@ export function createListBox<T>(
     get listBoxProps() {
       const p = getProps();
       const selectionMode = state.selectionMode();
+      const virtualFocus = p.shouldUseVirtualFocus ?? false;
+      const focusedKey = state.focusedKey();
+
+      // Roving container tabIndex mirrors `useSelectableCollection`
+      // (useSelectableCollection.ts:581-582): with real option focus, the
+      // container is tabbable (0) only while nothing is focused, then rolls to
+      // -1 once focus lands on an option so Tab exits the widget. Under virtual
+      // focus (ComboBox/Autocomplete) the container is NOT a tab stop at all —
+      // upstream leaves `tabIndex` undefined, so the popover listbox never
+      // appears in the roving trail. `aria-activedescendant` is the
+      // virtual-focus AT channel and is emitted ONLY on that path — a standalone
+      // listbox announces the active option through real DOM focus, so upstream
+      // never sets it there.
+      const tabIndex = p.isDisabled
+        ? undefined
+        : virtualFocus
+          ? undefined
+          : focusedKey != null
+            ? -1
+            : 0;
 
       const baseProps = mergeProps(
         domProps(),
@@ -417,12 +488,13 @@ export function createListBox<T>(
         fieldProps as Record<string, unknown>,
         {
           role: "listbox",
-          tabIndex: p.isDisabled ? undefined : 0,
+          tabIndex,
           "aria-disabled": p.isDisabled || undefined,
           "aria-multiselectable": selectionMode === "multiple" ? true : undefined,
           "aria-activedescendant":
-            state.focusedKey() != null ? String(state.focusedKey()) : undefined,
+            virtualFocus && focusedKey != null ? String(focusedKey) : undefined,
           onKeyDown,
+          onFocus: onListBoxFocus,
         },
       );
 

package/src/listbox/createOption.ts

@@ -9,7 +9,7 @@ import { createFocusRing } from "../interactions/createFocusRing";
 import { mergeProps } from "../utils/mergeProps";
 import { access, type MaybeAccessor } from "../utils/reactivity";
 import { getListBoxData } from "./createListBox";
-import type { ListState, Key } from "@proyecto-viviana/solid-stately";
+import { getItemCount, type ListState, type Key } from "@proyecto-viviana/solid-stately";
 import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
 
 export interface AriaOptionProps {
@@ -164,6 +164,19 @@ export function createOption<T>(
       const selectionMode = state.selectionMode();
       const ariaLabel = getProps()["aria-label"];
 
+      // When the listbox is virtualized the DOM only holds the windowed rows, so
+      // (mirroring @react-aria/listbox useOption) publish the item's absolute
+      // position in the full collection for assistive tech. Only under
+      // virtualization — an un-windowed listbox exposes every row and the browser
+      // derives posinset/setsize itself.
+      let ariaPosInSet: number | undefined;
+      let ariaSetSize: number | undefined;
+      if (isVirtualized()) {
+        const index = Number(state.collection().getItem(key)?.index);
+        ariaPosInSet = Number.isNaN(index) ? undefined : index + 1;
+        ariaSetSize = getItemCount(state.collection());
+      }
+
       return mergeProps(
         selectableItem.itemProps as Record<string, unknown>,
         hoverProps as Record<string, unknown>,
@@ -176,6 +189,8 @@ export function createOption<T>(
           "aria-label": ariaLabel,
           "aria-labelledby": !ariaLabel ? labelId : undefined,
           "aria-describedby": descriptionId,
+          "aria-posinset": ariaPosInSet,
+          "aria-setsize": ariaSetSize,
           "data-selected": selectableItem.isSelected() || undefined,
           "data-focused": selectableItem.isFocused() || undefined,
           "data-focus-visible": (selectableItem.isFocused() && isFocusVisible()) || undefined,

package/src/select/createSelect.ts

@@ -73,6 +73,8 @@ export interface SelectAria<T> {
   isFocusVisible: Accessor<boolean>;
   /** Whether the select is currently open. */
   isOpen: Accessor<boolean>;
+  /** Whether the trigger button is currently pressed (for `pressScale`). */
+  isPressed: Accessor<boolean>;
   /** The currently selected item. */
   selectedItem: Accessor<CollectionNode<T> | null>;
 }
@@ -196,7 +198,7 @@ export function createSelect<T>(
     }
   };
 
-  const { pressProps } = createPress({
+  const { pressProps, isPressed } = createPress({
     get isDisabled() {
       return getProps().isDisabled ?? state.isDisabled;
     },
@@ -385,6 +387,15 @@ export function createSelect<T>(
           "aria-disabled": isDisabled || undefined,
           "aria-required": p.isRequired || undefined,
           "aria-describedby": p["aria-describedby"] || undefined,
+          // Mirror upstream `useSelect`: the trigger's accessible name folds the
+          // SELECTED VALUE ("Pro") ahead of the field label ("Plan") → "Pro Plan"
+          // via `aria-labelledby=[valueId, labelId]`. Only wire this when there is
+          // a real visible label; with an `aria-label` (no `labelledby`) the field
+          // props' `aria-label` stays the trigger name (label-less legacy path,
+          // keeps TabsPicker/label-less Select unchanged).
+          "aria-labelledby": fieldProps["aria-labelledby"]
+            ? [valueId, fieldProps["aria-labelledby"]].filter(Boolean).join(" ")
+            : undefined,
           onKeyDown,
           onFocus: handleFocus,
           onBlur: handleBlur,
@@ -409,11 +420,21 @@ export function createSelect<T>(
         id: valueId,
       } as JSX.HTMLAttributes<HTMLElement>;
     },
+    // Surfaced so the styled layer (S2 Picker) can apply the `pressScale` press
+    // effect on the trigger button — upstream S2 wires `pressScale(buttonRef)` on
+    // the RAC Button, which needs the button's live `isPressed`.
+    isPressed,
     get menuProps() {
       return {
         id: listBoxId,
         role: "listbox",
-        "aria-labelledby": buttonId,
+        // Mirror upstream `useSelect`: the listbox is labelled by the FIELD LABEL
+        // (`fieldProps['aria-labelledby']` → the visible "Plan" label), NOT the
+        // trigger button — the button's own accessible name folds in the selected
+        // value ("Pro Plan"), which must not leak onto the listbox. Only when
+        // there is no visible label (an `aria-label` on the field) does it fall
+        // back to the trigger id (unchanged legacy behavior for label-less use).
+        "aria-labelledby": fieldProps["aria-labelledby"] ?? buttonId,
         "aria-multiselectable": state.selectionMode() === "multiple" ? true : undefined,
         tabIndex: -1,
         onBlur: (e: FocusEvent) => {

package/src/selection/createSelectableItem.ts

@@ -44,6 +44,7 @@ import { focusSafely } from "../utils/focus";
 import { getOwnerDocument, getEventTarget, openLink } from "../utils/dom";
 import { getCollectionId, isNonContiguousSelectionModifier } from "./utils";
 import { selectItem, type SelectItemState } from "./selectItem";
+import { createDragSession } from "../dnd/DragManager";
 
 /**
  * DOM event dispatched when an item action is performed. Mirrors upstream's
@@ -289,7 +290,20 @@ export function createSelectableItem<T>(
   // Focus the associated DOM node when this item becomes the focused key. This
   // is the imperative half of roving tabindex — the tabIndex 0/-1 swap below is
   // only declarative.
+  const dragSession = createDragSession();
   createEffect(() => {
+    // While a keyboard drag session is active, real DOM focus is owned by the
+    // DragManager (it lives on drop indicators / the collection), and upstream's
+    // React `useSelectableItem` focus effect provably cannot re-run mid-drag —
+    // its dep array `[ref, key, focusedKey, childFocusStrategy, isFocused]` stays
+    // frozen. Our reactive effect would otherwise re-fire and steal focus back
+    // onto the focused option, bouncing focus off the drop indicator. Reading the
+    // reactive drag-session accessor here also re-runs this effect once the drag
+    // ends, restoring normal roving-tabindex focus.
+    if (dragSession()) {
+      return;
+    }
+
     if (key() !== manager.focusedKey() || !manager.isFocused()) {
       return;
     }

package/src/spinbutton/createSpinButton.ts

@@ -0,0 +1,163 @@
+/**
+ * createSpinButton hook for Solidaria
+ *
+ * Provides the ARIA spinbutton props and live-region announcement behaviour for
+ * a single spinbutton (e.g. a date-field segment). Port of the keyboard/announce
+ * portion of @react-aria/spinbutton `useSpinButton`. The pointer press-and-hold
+ * button machinery (increment/decrement buttons) is intentionally omitted — date
+ * segments drive value changes through the keyboard only.
+ */
+
+import { createMemo, createEffect } from "solid-js";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { createStringFormatter } from "../i18n";
+import { announce, clearAnnouncer } from "../live-announcer";
+import { spinButtonStrings, type SpinButtonStringKey } from "./intl";
+
+export interface SpinButtonProps {
+  /** The current value of the spinbutton. */
+  value?: number;
+  /** A human-readable text alternative for the value. */
+  textValue?: string;
+  /** The smallest value allowed. */
+  minValue?: number;
+  /** The largest value allowed. */
+  maxValue?: number;
+  /** Whether the spinbutton is disabled. */
+  isDisabled?: boolean;
+  /** Whether the spinbutton is read only. */
+  isReadOnly?: boolean;
+  /** Whether the spinbutton is required. */
+  isRequired?: boolean;
+  onIncrement?: () => void;
+  onIncrementPage?: () => void;
+  onDecrement?: () => void;
+  onDecrementPage?: () => void;
+  onDecrementToMin?: () => void;
+  onIncrementToMax?: () => void;
+}
+
+export interface SpinButtonAria {
+  /** Props for the spinbutton element. */
+  spinButtonProps: Record<string, unknown>;
+}
+
+/**
+ * Provides the behaviour and accessibility implementation for a spinbutton.
+ */
+export function createSpinButton(props: MaybeAccessor<SpinButtonProps>): SpinButtonAria {
+  const getProps = () => access(props);
+  const stringFormatter = createStringFormatter<SpinButtonStringKey>(
+    spinButtonStrings,
+    "@react-aria/spinbutton",
+  );
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const p = getProps();
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || p.isReadOnly || e.isComposing) {
+      return;
+    }
+
+    switch (e.key) {
+      // Upstream deliberately falls through PageUp → ArrowUp when no page
+      // handler exists; our tsconfig forbids lexical fallthrough, so the
+      // PageUp case mirrors that branch inline instead.
+      case "PageUp":
+        if (p.onIncrementPage) {
+          e.preventDefault();
+          p.onIncrementPage();
+        } else if (p.onIncrement) {
+          e.preventDefault();
+          p.onIncrement();
+        }
+        break;
+      case "ArrowUp":
+      case "Up":
+        if (p.onIncrement) {
+          e.preventDefault();
+          p.onIncrement();
+        }
+        break;
+      // Same faithful fallthrough as PageUp, mirrored inline (PageDown → ArrowDown).
+      case "PageDown":
+        if (p.onDecrementPage) {
+          e.preventDefault();
+          p.onDecrementPage();
+        } else if (p.onDecrement) {
+          e.preventDefault();
+          p.onDecrement();
+        }
+        break;
+      case "ArrowDown":
+      case "Down":
+        if (p.onDecrement) {
+          e.preventDefault();
+          p.onDecrement();
+        }
+        break;
+      case "Home":
+        if (p.onDecrementToMin) {
+          e.preventDefault();
+          p.onDecrementToMin();
+        }
+        break;
+      case "End":
+        if (p.onIncrementToMax) {
+          e.preventDefault();
+          p.onIncrementToMax();
+        }
+        break;
+    }
+  };
+
+  // Non-reactive focus flag — matches upstream's `isFocused` ref. Toggling it must
+  // NOT re-run the announce effect; only a change in `ariaTextValue` announces.
+  let isFocused = false;
+  const onFocus = () => {
+    isFocused = true;
+  };
+  const onBlur = () => {
+    isFocused = false;
+  };
+
+  // Replace Unicode hyphen-minus (U+002D) with minus sign (U+2212) so VoiceOver
+  // announces it as "minus". Replace the empty string with the word "Empty".
+  const ariaTextValue = createMemo(() => {
+    const p = getProps();
+    return p.textValue === ""
+      ? stringFormatter().format("Empty")
+      : (p.textValue || `${p.value}`).replace("-", "−");
+  });
+
+  createEffect(() => {
+    const value = ariaTextValue();
+    if (isFocused) {
+      clearAnnouncer("assertive");
+      announce(value, "assertive");
+    }
+  });
+
+  const spinButtonProps = createMemo(() => {
+    const p = getProps();
+    const value = p.value;
+    return {
+      role: "spinbutton",
+      "aria-valuenow": value !== undefined && !isNaN(value) ? value : undefined,
+      "aria-valuetext": ariaTextValue(),
+      "aria-valuemin": p.minValue,
+      "aria-valuemax": p.maxValue,
+      "aria-disabled": p.isDisabled || undefined,
+      "aria-readonly": p.isReadOnly || undefined,
+      "aria-required": p.isRequired || undefined,
+      onKeyDown,
+      onFocus,
+      onBlur,
+    };
+  });
+
+  return {
+    get spinButtonProps() {
+      return spinButtonProps();
+    },
+  };
+}

package/src/spinbutton/index.ts

@@ -0,0 +1,10 @@
+export {
+  createSpinButton,
+  type SpinButtonProps,
+  type SpinButtonAria,
+} from "./createSpinButton";
+export {
+  spinButtonStrings,
+  spinButtonDictionary,
+  type SpinButtonStringKey,
+} from "./intl";

package/src/spinbutton/intl.ts

@@ -0,0 +1,115 @@
+// Spinbutton announcement catalog, ported verbatim from @react-aria/spinbutton's
+// intl/*.json (34 locales). Keep in sync with the vendored react-spectrum source on
+// every pin bump.
+import { LocalizedStringDictionary } from "@internationalized/string";
+
+export type SpinButtonStringKey = "Empty";
+
+export const spinButtonStrings: Record<string, Record<SpinButtonStringKey, string>> = {
+  "ar-AE": {
+  "Empty": `\u{641}\u{627}\u{631}\u{63A}`
+  },
+  "bg-BG": {
+  "Empty": `\u{418}\u{437}\u{43F}\u{440}\u{430}\u{437}\u{43D}\u{438}`
+  },
+  "cs-CZ": {
+  "Empty": `Pr\xe1zdn\xe9`
+  },
+  "da-DK": {
+  "Empty": `Tom`
+  },
+  "de-DE": {
+  "Empty": `Leer`
+  },
+  "el-GR": {
+  "Empty": `\u{386}\u{3B4}\u{3B5}\u{3B9}\u{3BF}`
+  },
+  "en-US": {
+  "Empty": `Empty`
+  },
+  "es-ES": {
+  "Empty": `Vac\xedo`
+  },
+  "et-EE": {
+  "Empty": `T\xfchjenda`
+  },
+  "fi-FI": {
+  "Empty": `Tyhj\xe4`
+  },
+  "fr-FR": {
+  "Empty": `Vide`
+  },
+  "he-IL": {
+  "Empty": `\u{5E8}\u{5D9}\u{5E7}`
+  },
+  "hr-HR": {
+  "Empty": `Prazno`
+  },
+  "hu-HU": {
+  "Empty": `\xdcres`
+  },
+  "it-IT": {
+  "Empty": `Vuoto`
+  },
+  "ja-JP": {
+  "Empty": `\u{7A7A}`
+  },
+  "ko-KR": {
+  "Empty": `\u{BE44}\u{C5B4} \u{C788}\u{C74C}`
+  },
+  "lt-LT": {
+  "Empty": `Tu\u{161}\u{10D}ias`
+  },
+  "lv-LV": {
+  "Empty": `Tuk\u{161}s`
+  },
+  "nb-NO": {
+  "Empty": `Tom`
+  },
+  "nl-NL": {
+  "Empty": `Leeg`
+  },
+  "pl-PL": {
+  "Empty": `Pusty`
+  },
+  "pt-BR": {
+  "Empty": `Vazio`
+  },
+  "pt-PT": {
+  "Empty": `Vazio`
+  },
+  "ro-RO": {
+  "Empty": `Gol`
+  },
+  "ru-RU": {
+  "Empty": `\u{41D}\u{435} \u{437}\u{430}\u{43F}\u{43E}\u{43B}\u{43D}\u{435}\u{43D}\u{43E}`
+  },
+  "sk-SK": {
+  "Empty": `Pr\xe1zdne`
+  },
+  "sl-SI": {
+  "Empty": `Prazen`
+  },
+  "sr-SP": {
+  "Empty": `Prazno`
+  },
+  "sv-SE": {
+  "Empty": `Tomt`
+  },
+  "tr-TR": {
+  "Empty": `Bo\u{15F}`
+  },
+  "uk-UA": {
+  "Empty": `\u{41F}\u{443}\u{441}\u{442}\u{43E}`
+  },
+  "zh-CN": {
+  "Empty": `\u{7A7A}`
+  },
+  "zh-TW": {
+  "Empty": `\u{7A7A}\u{767D}`
+  },
+};
+
+export const spinButtonDictionary = new LocalizedStringDictionary<SpinButtonStringKey, string>(
+  spinButtonStrings,
+);

package/src/table/createTable.ts

@@ -10,6 +10,7 @@ import type { TableState, TableCollection, Key, GridNode } from "@proyecto-vivia
 import type { AriaTableProps, TableAria } from "./types";
 import { useLocale } from "../i18n";
 import { announce } from "../live-announcer";
+import { createDescription } from "../utils/createDescription";
 import { scrollIntoViewport } from "../utils";
 import { getInteractionModality } from "../interactions/createInteractionModality";
 
@@ -590,16 +591,40 @@ export function createTable<T extends object>(
     }
   });
 
+  // A sorted table exposes a persistent sort description on the grid ("sorted by
+  // column {name} in {direction} order"), mirroring `useTable`'s
+  // `useDescription(sortDescription)` — separate from the transient live-region
+  // announcement above. `columnName` follows upstream exactly
+  // (`columns.find(c => c.key === column)?.textValue ?? ''`) so a header with no
+  // plain-text value yields an empty name, matching the S2 oracle.
+  const sortDescription = () => {
+    const s = state();
+    const descriptor = s.sortDescriptor;
+    const column = descriptor?.column;
+    const direction = descriptor?.direction;
+    if (!direction || column == null) {
+      return undefined;
+    }
+    const columnName = s.collection.columns.find((c) => c.key === column)?.textValue ?? "";
+    return `sorted by column ${columnName} in ${direction} order`;
+  };
+  const sortDescriptionProps = createDescription(sortDescription);
+
   const gridProps = createMemo(() => {
     const p = props();
     const s = state();
 
+    const describedBy =
+      [sortDescriptionProps["aria-describedby"], p["aria-describedby"]]
+        .filter(Boolean)
+        .join(" ") || undefined;
+
     const baseProps: Record<string, unknown> = {
       role: "grid",
       id,
       "aria-label": p["aria-label"],
       "aria-labelledby": p["aria-labelledby"],
-      "aria-describedby": p["aria-describedby"],
+      "aria-describedby": describedBy,
       "aria-multiselectable": s.selectionMode === "multiple" ? "true" : undefined,
       // Keep the grid itself tabbable so keyboard users can enter
       // row/cell navigation without requiring a prior pointer interaction.

package/src/table/createTableColumnHeader.ts

@@ -8,6 +8,7 @@ import type { JSX } from "solid-js";
 import type { TableState, TableCollection } from "@proyecto-viviana/solid-stately";
 import type { AriaTableColumnHeaderProps, TableColumnHeaderAria } from "./types";
 import { getTableData } from "./createTable";
+import { createDescription } from "../utils/createDescription";
 
 /**
  * Creates accessibility props for a table column header.
@@ -27,6 +28,14 @@ export function createTableColumnHeader<T extends object>(
     return s.focusedKey === p.node.key;
   });
 
+  // A sortable column header is described as "sortable column" — mirrors
+  // `useTableColumnHeader`'s `useDescription(stringFormatter.format('sortable'))`.
+  // Backed by a shared hidden element (ref-counted) and referenced via
+  // aria-describedby.
+  const sortDescriptionProps = createDescription(() =>
+    props().allowsSorting ? "sortable column" : undefined,
+  );
+
   const sortColumn = () => {
     const s = state();
     const p = props();
@@ -125,6 +134,7 @@ export function createTableColumnHeader<T extends object>(
       role: "columnheader",
       id: tableData ? `${tableData.tableId}-${node.key}` : undefined,
       "aria-sort": ariaSort,
+      "aria-describedby": sortDescriptionProps["aria-describedby"],
       tabIndex: isFocused() ? 0 : -1,
       onFocus,
     };

package/src/table/createTableRow.ts

@@ -14,6 +14,7 @@ import type {
 } from "@proyecto-viviana/solid-stately";
 import type { AriaTableRowProps, TableRowAria, ExpandButtonProps } from "./types";
 import { getTableData } from "./createTable";
+import { getRowLabelledBy } from "./utils";
 import { useLocale } from "../i18n";
 import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
 import { mergeProps } from "../utils/mergeProps";
@@ -201,6 +202,15 @@ export function createTableRow<T extends object>(
       "aria-disabled": isDisabled() || undefined,
     };
 
+    // A row is labelled by its row-header cell(s) — mirrors `useTableRow`'s
+    // `'aria-labelledby': getRowLabelledBy(state, node.key)`. Without it the
+    // browser falls back to concatenating every cell (incl. the selection
+    // checkbox), so the row's accessible name reads "Select Foo.pdf PDF …".
+    const labelledBy = getRowLabelledBy(s, node.key);
+    if (labelledBy) {
+      baseProps["aria-labelledby"] = labelledBy;
+    }
+
     // Tree-grid rows expose their nesting depth, position and expansion state.
     if (s.treeColumn != null) {
       const { posinset, setsize } = siblingInfo();