@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/switch/createSwitch.ts

@@ -7,14 +7,10 @@
  * This is a 1:1 port of @react-aria/switch's useSwitch hook.
  */
 
-import { JSX, Accessor } from 'solid-js';
-import { createToggle, type AriaToggleProps } from '../toggle/createToggle';
-import { type ToggleState } from '@proyecto-viviana/solid-stately';
-import { type MaybeAccessor } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { JSX, Accessor } from "solid-js";
+import { createToggle, type AriaToggleProps } from "../toggle/createToggle";
+import { type ToggleState } from "@proyecto-viviana/solid-stately";
+import { type MaybeAccessor } from "../utils/reactivity";
 
 export interface AriaSwitchProps extends AriaToggleProps {
   // Switch uses the same props as toggle
@@ -25,6 +21,10 @@ export interface SwitchAria {
   labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the switch description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the switch error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the switch is selected. */
   isSelected: Accessor<boolean>;
   /** Whether the switch is in a pressed state. */
@@ -33,12 +33,10 @@ export interface SwitchAria {
   isDisabled: boolean;
   /** Whether the switch is read only. */
   isReadOnly: boolean;
+  /** Whether the switch is invalid. */
+  isInvalid: boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a switch component.
  * A switch is similar to a checkbox, but represents on/off values as opposed to selection.
@@ -46,7 +44,7 @@ export interface SwitchAria {
 export function createSwitch(
   props: MaybeAccessor<AriaSwitchProps>,
   state: ToggleState,
-  ref: () => HTMLInputElement | null
+  ref: () => HTMLInputElement | null,
 ): SwitchAria {
   // Don't destructure inputProps - it's a getter that needs to be evaluated each time
   const toggle = createToggle(props, state, ref);
@@ -58,13 +56,20 @@ export function createSwitch(
       const baseProps = toggle.inputProps;
       return {
         ...baseProps,
-        role: 'switch' as const,
+        role: "switch" as const,
         checked: toggle.isSelected(),
       };
     },
+    get descriptionProps() {
+      return toggle.descriptionProps;
+    },
+    get errorMessageProps() {
+      return toggle.errorMessageProps;
+    },
     isSelected: toggle.isSelected,
     isPressed: toggle.isPressed,
     isDisabled: toggle.isDisabled,
     isReadOnly: toggle.isReadOnly,
+    isInvalid: toggle.isInvalid,
   };
 }

package/src/switch/index.ts

@@ -1 +1 @@
-export { createSwitch, type AriaSwitchProps, type SwitchAria } from './createSwitch';
+export { createSwitch, type AriaSwitchProps, type SwitchAria } from "./createSwitch";

package/src/table/createTable.ts

@@ -3,13 +3,15 @@
  * Based on @react-aria/table/useTable.
  */
 
-import { createMemo, createEffect, on, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { TableState, TableCollection, Key, GridNode } from '@proyecto-viviana/solid-stately';
-import type { AriaTableProps, TableAria } from './types';
-import { useLocale } from '../i18n';
-import { announce } from '../live-announcer';
+import { createMemo, createEffect, on, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { TableState, TableCollection, Key, GridNode } from "@proyecto-viviana/solid-stately";
+import type { AriaTableProps, TableAria } from "./types";
+import { useLocale } from "../i18n";
+import { announce } from "../live-announcer";
+import { scrollIntoViewport } from "../utils";
+import { getInteractionModality } from "../interactions/createInteractionModality";
 
 // Global map to store table metadata for child components
 const tableMap = new WeakMap<
@@ -18,7 +20,7 @@ const tableMap = new WeakMap<
     tableId: string;
     actions: { onRowAction?: (key: Key) => void; onCellAction?: (key: Key) => void };
     shouldSelectOnPressUp?: boolean;
-    focusMode?: 'row' | 'cell';
+    focusMode?: "row" | "cell";
   }
 >();
 
@@ -34,13 +36,17 @@ export function getTableData<T>(state: TableState<T, TableCollection<T>>) {
  */
 function getChildCells<T>(collection: TableCollection<T>, rowKey: Key): GridNode<T>[] {
   const children = collection.getChildren(rowKey);
-  return [...children].filter(node => node.type === 'cell' || node.type === 'rowheader');
+  return [...children].filter((node) => node.type === "cell" || node.type === "rowheader");
 }
 
 /**
  * Helper to get cell at specific index in a row
  */
-function getCellAtIndex<T>(collection: TableCollection<T>, rowKey: Key, index: number): GridNode<T> | null {
+function getCellAtIndex<T>(
+  collection: TableCollection<T>,
+  rowKey: Key,
+  index: number,
+): GridNode<T> | null {
   const cells = getChildCells(collection, rowKey);
   return cells[index] ?? null;
 }
@@ -49,14 +55,14 @@ function getCellAtIndex<T>(collection: TableCollection<T>, rowKey: Key, index: n
  * Helper to check if a node is a cell
  */
 function isCell<T>(node: GridNode<T> | null): boolean {
-  return node?.type === 'cell' || node?.type === 'rowheader';
+  return node?.type === "cell" || node?.type === "rowheader";
 }
 
 /**
  * Helper to check if a node is a row
  */
 function isRow<T>(node: GridNode<T> | null): boolean {
-  return node?.type === 'item';
+  return node?.type === "item";
 }
 
 /**
@@ -65,14 +71,16 @@ function isRow<T>(node: GridNode<T> | null): boolean {
 export function createTable<T extends object>(
   props: Accessor<AriaTableProps>,
   state: Accessor<TableState<T, TableCollection<T>>>,
-  ref: Accessor<HTMLTableElement | null>
+  ref: Accessor<HTMLTableElement | null>,
 ): TableAria {
   const id = createId(props().id);
   const locale = useLocale();
 
   // Track previous sort descriptor for announcements
-  let prevSortDescriptor: { column: Key; direction: 'ascending' | 'descending' } | null = null;
+  let prevSortDescriptor: { column: Key; direction: "ascending" | "descending" } | null = null;
   let isFirstRender = true;
+  let typeaheadBuffer = "";
+  let typeaheadTimeout: ReturnType<typeof setTimeout> | undefined;
 
   // Store metadata for child components
   const storeTableData = () => {
@@ -95,38 +103,90 @@ export function createTable<T extends object>(
   });
 
   // Announce sort changes (only after initial render)
-  createEffect(on(
-    () => state().sortDescriptor,
-    (sortDescriptor) => {
-      if (isFirstRender) {
-        isFirstRender = false;
-        prevSortDescriptor = sortDescriptor;
-        return;
-      }
-
-      if (sortDescriptor && (
-        sortDescriptor.column !== prevSortDescriptor?.column ||
-        sortDescriptor.direction !== prevSortDescriptor?.direction
-      )) {
-        const collection = state().collection;
-        const column = collection.columns.find(c => c.key === sortDescriptor.column);
-        const columnName = column?.textValue ?? String(sortDescriptor.column);
-        const directionText = sortDescriptor.direction === 'ascending' ? 'ascending' : 'descending';
+  createEffect(
+    on(
+      () => state().sortDescriptor,
+      (sortDescriptor) => {
+        if (isFirstRender) {
+          isFirstRender = false;
+          prevSortDescriptor = sortDescriptor;
+          return;
+        }
 
-        announce(`Sorted by ${columnName}, ${directionText}`, 'assertive', 500);
-      }
+        if (
+          sortDescriptor &&
+          (sortDescriptor.column !== prevSortDescriptor?.column ||
+            sortDescriptor.direction !== prevSortDescriptor?.direction)
+        ) {
+          const collection = state().collection;
+          const column = collection.columns.find((c) => c.key === sortDescriptor.column);
+          const columnName = column?.textValue ?? String(sortDescriptor.column);
+          const directionText =
+            sortDescriptor.direction === "ascending" ? "ascending" : "descending";
+
+          announce(`Sorted by ${columnName}, ${directionText}`, "assertive", 500);
+        }
 
-      prevSortDescriptor = sortDescriptor;
-    }
-  ));
+        prevSortDescriptor = sortDescriptor;
+      },
+    ),
+  );
 
   // Keyboard navigation handler with full 2D navigation
   const onKeyDown = (e: KeyboardEvent) => {
     const s = state();
     const collection = s.collection;
     const p = props();
-    const focusMode = p.focusMode ?? 'row';
-    const isRTL = locale().direction === 'rtl';
+    const focusMode = p.focusMode ?? "row";
+    const isRTL = locale().direction === "rtl";
+    const setFocusedKey = (key: Key) => {
+      s.setFocusedKey(key);
+    };
+    const runTypeahead = (focusedKey: Key, focusedItem: GridNode<T>) => {
+      if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) {
+        return false;
+      }
+
+      // A leading Spacebar is a selection/action key, not the start of a type-ahead
+      // search. Mirror upstream useTypeSelect (`search.length === 0 && character === ' '`)
+      // and let it fall through so the focused row's own Space handler toggles selection.
+      // Once a search is active, Space continues the query as normal.
+      if (e.key === " " && typeaheadBuffer.length === 0) {
+        return false;
+      }
+
+      typeaheadBuffer += e.key.toLocaleLowerCase();
+      if (typeaheadTimeout) {
+        clearTimeout(typeaheadTimeout);
+      }
+      typeaheadTimeout = setTimeout(() => {
+        typeaheadBuffer = "";
+        typeaheadTimeout = undefined;
+      }, 500);
+
+      const rows = Array.from(collection).filter((node) => !s.isDisabled(node.key));
+      if (rows.length === 0) {
+        return true;
+      }
+
+      const currentRowKey =
+        isCell(focusedItem) && focusedItem.parentKey != null ? focusedItem.parentKey : focusedKey;
+      const currentIndex = rows.findIndex((node) => node.key === currentRowKey);
+      const orderedRows =
+        currentIndex >= 0
+          ? [...rows.slice(currentIndex + 1), ...rows.slice(0, currentIndex + 1)]
+          : rows;
+      const match = orderedRows.find((node) =>
+        collection.getTextValue(node.key).toLocaleLowerCase().startsWith(typeaheadBuffer),
+      );
+
+      if (match) {
+        e.preventDefault();
+        setFocusedKey(match.key);
+      }
+
+      return true;
+    };
 
     if (s.isKeyboardNavigationDisabled) {
       return;
@@ -135,11 +195,11 @@ export function createTable<T extends object>(
     const focusedKey = s.focusedKey;
     if (focusedKey == null) {
       // If nothing is focused, focus the first item
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
         const firstKey = collection.getFirstKey();
         if (firstKey != null) {
           e.preventDefault();
-          s.setFocusedKey(firstKey);
+          setFocusedKey(firstKey);
         }
       }
       return;
@@ -151,7 +211,7 @@ export function createTable<T extends object>(
     let nextKey: Key | null = null;
 
     switch (e.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
         e.preventDefault();
         // If focused on a cell, move to the same column in the next row
         if (isCell(focusedItem) && focusedItem.parentKey != null) {
@@ -168,7 +228,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowUp': {
+      case "ArrowUp": {
         e.preventDefault();
         // If focused on a cell, move to the same column in the previous row
         if (isCell(focusedItem) && focusedItem.parentKey != null) {
@@ -185,7 +245,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowRight': {
+      case "ArrowRight": {
         e.preventDefault();
         const goNext = !isRTL;
 
@@ -203,7 +263,7 @@ export function createTable<T extends object>(
 
           if (targetIndex >= 0 && targetIndex < cells.length) {
             nextKey = cells[targetIndex].key;
-          } else if (focusMode === 'row') {
+          } else if (focusMode === "row") {
             // Wrap to row
             nextKey = focusedItem.parentKey;
           } else {
@@ -214,7 +274,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowLeft': {
+      case "ArrowLeft": {
         e.preventDefault();
         const goNext = isRTL;
 
@@ -232,7 +292,7 @@ export function createTable<T extends object>(
 
           if (targetIndex >= 0 && targetIndex < cells.length) {
             nextKey = cells[targetIndex].key;
-          } else if (focusMode === 'row') {
+          } else if (focusMode === "row") {
             // Wrap to row
             nextKey = focusedItem.parentKey;
           } else {
@@ -243,13 +303,13 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
         if (e.ctrlKey) {
           // Ctrl+Home: Go to first row/cell
           const firstRowKey = collection.getFirstKey();
           if (firstRowKey != null) {
-            if (isCell(focusedItem) || focusMode === 'cell') {
+            if (isCell(focusedItem) || focusMode === "cell") {
               const cells = getChildCells(collection, firstRowKey);
               nextKey = cells[0]?.key ?? firstRowKey;
             } else {
@@ -267,13 +327,13 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'End': {
+      case "End": {
         e.preventDefault();
         if (e.ctrlKey) {
           // Ctrl+End: Go to last row/cell
           const lastRowKey = collection.getLastKey();
           if (lastRowKey != null) {
-            if (isCell(focusedItem) || focusMode === 'cell') {
+            if (isCell(focusedItem) || focusMode === "cell") {
               const cells = getChildCells(collection, lastRowKey);
               nextKey = cells[cells.length - 1]?.key ?? lastRowKey;
             } else {
@@ -291,11 +351,11 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'PageDown': {
+      case "PageDown": {
         e.preventDefault();
         // Move down by roughly a page (using DOM measurements if available)
         const el = ref();
-        if (el) {
+        if (el && el.clientHeight > 0) {
           const visibleHeight = el.clientHeight;
           let currentKey: Key | null = focusedKey;
           let traveled = 0;
@@ -329,9 +389,10 @@ export function createTable<T extends object>(
         } else {
           // Fallback: move 10 rows
           let count = 10;
-          let current: Key | null = isCell(focusedItem) && focusedItem.parentKey != null
-            ? focusedItem.parentKey
-            : focusedKey;
+          let current: Key | null =
+            isCell(focusedItem) && focusedItem.parentKey != null
+              ? focusedItem.parentKey
+              : focusedKey;
           while (count > 0 && current != null) {
             const next = collection.getKeyAfter(current);
             if (next == null) break;
@@ -348,11 +409,11 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'PageUp': {
+      case "PageUp": {
         e.preventDefault();
         // Move up by roughly a page
         const el = ref();
-        if (el) {
+        if (el && el.clientHeight > 0) {
           const visibleHeight = el.clientHeight;
           let currentKey: Key | null = focusedKey;
           let traveled = 0;
@@ -384,9 +445,10 @@ export function createTable<T extends object>(
         } else {
           // Fallback: move 10 rows
           let count = 10;
-          let current: Key | null = isCell(focusedItem) && focusedItem.parentKey != null
-            ? focusedItem.parentKey
-            : focusedKey;
+          let current: Key | null =
+            isCell(focusedItem) && focusedItem.parentKey != null
+              ? focusedItem.parentKey
+              : focusedKey;
           while (count > 0 && current != null) {
             const prev = collection.getKeyBefore(current);
             if (prev == null) break;
@@ -403,51 +465,46 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'Escape':
-        s.clearSelection();
+      case "Escape":
+        if (p.escapeKeyBehavior !== "none") {
+          s.clearSelection();
+        }
         return;
 
-      case 'a':
+      case "a":
         if (e.ctrlKey || e.metaKey) {
           e.preventDefault();
-          if (s.selectionMode === 'multiple') {
+          if (s.selectionMode === "multiple") {
             s.selectAll();
           }
         }
         return;
 
-      case ' ':
-      case 'Enter':
-        e.preventDefault();
-        // Toggle selection or trigger action
-        if (s.selectionMode !== 'none') {
-          // For cells, select the parent row
-          const keyToSelect = isCell(focusedItem) && focusedItem.parentKey != null
-            ? focusedItem.parentKey
-            : focusedKey;
-
-          if (e.shiftKey && s.selectionMode === 'multiple') {
-            s.extendSelection(keyToSelect);
-          } else {
-            s.toggleSelection(keyToSelect);
-          }
-        }
-        return;
+      // NOTE: Space/Enter selection is intentionally NOT handled here. Upstream
+      // useSelectableCollection has no ' '/Enter case — keyboard selection is owned
+      // by the row (useSelectableItem, ported in createTableRow). Handling it here too
+      // double-toggled the selection (row toggles on, grid toggles back off → no-op),
+      // since the row handler does not stop propagation. Space/Enter fall through to
+      // the type-ahead path below, which ignores a leading Space and bails on Enter.
 
       default:
+        if (runTypeahead(focusedKey, focusedItem)) {
+          return;
+        }
         return;
     }
 
     if (nextKey != null) {
-      s.setFocusedKey(nextKey);
+      setFocusedKey(nextKey);
 
       // Handle shift+arrow for range selection
-      if (e.shiftKey && s.selectionMode === 'multiple') {
+      if (e.shiftKey && s.selectionMode === "multiple") {
         // For cells, select the parent row
         const focusedNode = collection.getItem(nextKey);
-        const keyToSelect = focusedNode && isCell(focusedNode) && focusedNode.parentKey != null
-          ? focusedNode.parentKey
-          : nextKey;
+        const keyToSelect =
+          focusedNode && isCell(focusedNode) && focusedNode.parentKey != null
+            ? focusedNode.parentKey
+            : nextKey;
         s.extendSelection(keyToSelect);
       }
     }
@@ -485,11 +542,51 @@ export function createTable<T extends object>(
     }
   };
 
+  // Mirror React Aria's useSelectableCollection: once the roving tabindex for
+  // the focused key has been committed to the DOM, move browser focus onto that
+  // element from a post-commit effect — looking it up by its stable data-key
+  // rather than by transient tabindex. Doing this imperatively during the key
+  // handler (in a microtask) raced Solid's reconciliation and dropped focus to
+  // <body>, so Space/Enter never reached the grid's selection handler.
+  createEffect(() => {
+    const s = state();
+    const key = s.focusedKey;
+    const el = ref();
+    if (!el || key == null) {
+      return;
+    }
+
+    // Only manage focus while it already lives inside the table — i.e. the user
+    // is navigating with the keyboard. We gate on the *physical* position of
+    // browser focus rather than the grid's logical `isFocused` signal: focus can
+    // land directly on a row (a pointer click, or programmatic row focus) without
+    // ever firing the grid's own non-bubbling focus handler, so `isFocused` stays
+    // false even though the table genuinely holds focus. The contains() check is
+    // also what keeps us from pulling focus back from elsewhere on the page when
+    // the focused key changes from a background interaction.
+    const active = document.activeElement;
+    if (!active || (active !== el && !el.contains(active))) {
+      return;
+    }
+
+    const target = el.querySelector<HTMLElement>(`[data-key="${key}"]`);
+    if (target && target !== active) {
+      target.focus();
+
+      // Reveal the newly focused row/cell when navigating with the keyboard,
+      // mirroring useSelectableCollection. Pointer-driven focus changes should
+      // not shift the scroll position under the user's finger.
+      if (getInteractionModality() !== "pointer") {
+        scrollIntoViewport(target, { containingElement: el });
+      }
+    }
+  });
+
   // Warn if no label is provided
   createMemo(() => {
     const p = props();
-    if (!p['aria-label'] && !p['aria-labelledby']) {
-      console.warn('Table: An aria-label or aria-labelledby prop is required for accessibility.');
+    if (!p["aria-label"] && !p["aria-labelledby"]) {
+      console.warn("Table: An aria-label or aria-labelledby prop is required for accessibility.");
     }
   });
 
@@ -498,12 +595,12 @@ export function createTable<T extends object>(
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      role: 'grid',
+      role: "grid",
       id,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-multiselectable': s.selectionMode === 'multiple' ? 'true' : undefined,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-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.
       tabIndex: 0,
@@ -513,8 +610,8 @@ export function createTable<T extends object>(
     };
 
     if (p.isVirtualized) {
-      baseProps['aria-rowcount'] = s.collection.rowCount;
-      baseProps['aria-colcount'] = s.collection.columnCount;
+      baseProps["aria-rowcount"] = s.collection.rowCount;
+      baseProps["aria-colcount"] = s.collection.columnCount;
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLTableElement>;

package/src/table/createTableCell.ts

@@ -3,11 +3,11 @@
  * Based on @react-aria/table/useTableCell.
  */
 
-import { createMemo, createSignal, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import type { TableState, TableCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaTableCellProps, TableCellAria } from './types';
-import { getTableData } from './createTable';
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import type { TableState, TableCollection } from "@proyecto-viviana/solid-stately";
+import type { AriaTableCellProps, TableCellAria } from "./types";
+import { getTableData } from "./createTable";
 
 /**
  * Creates accessibility props for a table cell.
@@ -15,7 +15,7 @@ import { getTableData } from './createTable';
 export function createTableCell<T extends object>(
   props: Accessor<AriaTableCellProps>,
   state: Accessor<TableState<T, TableCollection<T>>>,
-  _ref: Accessor<HTMLTableCellElement | null>
+  _ref: Accessor<HTMLTableCellElement | null>,
 ): TableCellAria {
   const [isPressed, setIsPressed] = createSignal(false);
 
@@ -64,7 +64,7 @@ export function createTableCell<T extends object>(
     if (isDisabled()) return;
 
     // Enter triggers cell action
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       const tableData = getTableData(s);
       const onCellAction = tableData?.actions.onCellAction;
 
@@ -103,17 +103,18 @@ export function createTableCell<T extends object>(
     const tableData = getTableData(s);
 
     // Determine the role based on node type
-    let role: string = 'gridcell';
-    if (node.type === 'rowheader') {
-      role = 'rowheader';
+    let role: string = "gridcell";
+    if (node.type === "rowheader") {
+      role = "rowheader";
     }
 
     const baseProps: Record<string, unknown> = {
       role,
-      id: tableData && node.parentKey != null
-        ? `${tableData.tableId}-${node.parentKey}-${node.key}`
-        : undefined,
-      'aria-disabled': isDisabled() || undefined,
+      id:
+        tableData && node.parentKey != null
+          ? `${tableData.tableId}-${node.parentKey}-${node.key}`
+          : undefined,
+      "aria-disabled": isDisabled() || undefined,
       tabIndex: isFocused() ? 0 : -1,
       onClick,
       onKeyDown,
@@ -124,12 +125,12 @@ export function createTableCell<T extends object>(
 
     // Add aria-colindex for virtualized tables
     if (p.isVirtualized && node.column != null) {
-      baseProps['aria-colindex'] = node.column + 1; // 1-based
+      baseProps["aria-colindex"] = node.column + 1; // 1-based
     }
 
     // Add colspan if present
     if (node.colspan != null && node.colspan > 1) {
-      baseProps['aria-colspan'] = node.colspan;
+      baseProps["aria-colspan"] = node.colspan;
       baseProps.colSpan = node.colspan;
     }