@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/steplist/createStepList.ts

@@ -0,0 +1,106 @@
+/**
+ * ARIA hooks for StepList components.
+ * Provides accessible step list and step item props.
+ */
+
+import type { JSX } from "solid-js";
+import type { StepListState } from "@proyecto-viviana/solid-stately";
+import type { Key } from "@proyecto-viviana/solid-stately";
+
+export interface AriaStepListProps {
+  /** Accessible label for the step list. */
+  "aria-label"?: string;
+  /** ID of element that labels the step list. */
+  "aria-labelledby"?: string;
+}
+
+export interface StepListAria {
+  /** Props for the step list container element. */
+  stepListProps: JSX.HTMLAttributes<HTMLOListElement>;
+}
+
+/**
+ * Creates ARIA props for a step list container.
+ */
+export function createStepList(props: AriaStepListProps, _state: StepListState): StepListAria {
+  return {
+    stepListProps: {
+      get "aria-label"() {
+        return props["aria-label"] ?? "Step List";
+      },
+      get "aria-labelledby"() {
+        return props["aria-labelledby"];
+      },
+    },
+  };
+}
+
+export interface AriaStepProps {
+  /** The key of this step. */
+  key: Key;
+}
+
+export interface StepAria {
+  /** Props for the step element (anchor/link). */
+  stepProps: JSX.HTMLAttributes<HTMLAnchorElement>;
+  /** Accessible text describing the step state. */
+  stepStateText: string;
+}
+
+/**
+ * Creates ARIA props for an individual step within a step list.
+ */
+export function createStep(props: AriaStepProps, state: StepListState): StepAria {
+  const isSelected = () => state.selectedKey() === props.key;
+  const isCompleted = () => state.isCompleted(props.key);
+  const selectable = () => state.isSelectable(props.key);
+
+  const getStepStateText = (): string => {
+    if (isSelected()) return "Current";
+    if (isCompleted()) return "Completed";
+    return "Not completed";
+  };
+
+  const handleClick: JSX.EventHandler<HTMLAnchorElement, MouseEvent> = (e) => {
+    e.preventDefault();
+    if (selectable()) {
+      state.setSelectedKey(props.key);
+    }
+  };
+
+  const handleKeyDown: JSX.EventHandler<HTMLAnchorElement, KeyboardEvent> = (e) => {
+    // Prevent arrow key scrolling — tab order handles navigation
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (selectable()) {
+        state.setSelectedKey(props.key);
+      }
+    }
+  };
+
+  return {
+    get stepProps() {
+      return {
+        role: "link" as const,
+        get "aria-current"() {
+          return isSelected() ? ("step" as const) : undefined;
+        },
+        get "aria-disabled"() {
+          return !selectable() ? true : undefined;
+        },
+        get tabIndex() {
+          return selectable() ? 0 : undefined;
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+      };
+    },
+    get stepStateText() {
+      return getStepStateText();
+    },
+  };
+}

package/src/steplist/index.ts

@@ -0,0 +1,8 @@
+export {
+  createStepList,
+  createStep,
+  type AriaStepListProps,
+  type StepListAria,
+  type AriaStepProps,
+  type StepAria,
+} from "./createStepList";

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
@@ -33,12 +29,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 +40,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,7 +52,7 @@ export function createSwitch(
       const baseProps = toggle.inputProps;
       return {
         ...baseProps,
-        role: 'switch' as const,
+        role: "switch" as const,
         checked: toggle.isSelected(),
       };
     },
@@ -66,5 +60,6 @@ export function createSwitch(
     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,13 @@
  * 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";
 
 // Global map to store table metadata for child components
 const tableMap = new WeakMap<
@@ -18,7 +18,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 +34,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 +53,21 @@ 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";
+}
+
+function focusCurrentElement(el: HTMLElement | null | undefined) {
+  const target = el?.querySelector<HTMLElement>(
+    '[role="row"][tabindex="0"], [role="rowheader"][tabindex="0"], [role="gridcell"][tabindex="0"], [role="columnheader"][tabindex="0"]',
+  );
+  target?.focus();
 }
 
 /**
@@ -65,14 +76,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 +108,83 @@ 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);
+      queueMicrotask(() => focusCurrentElement(ref()));
+    };
+    const runTypeahead = (focusedKey: Key, focusedItem: GridNode<T>) => {
+      if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) {
+        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 +193,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 +209,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 +226,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 +243,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowRight': {
+      case "ArrowRight": {
         e.preventDefault();
         const goNext = !isRTL;
 
@@ -203,7 +261,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 +272,7 @@ export function createTable<T extends object>(
         break;
       }
 
-      case 'ArrowLeft': {
+      case "ArrowLeft": {
         e.preventDefault();
         const goNext = isRTL;
 
@@ -232,7 +290,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 +301,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 +325,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 +349,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 +387,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 +407,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 +443,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,30 +463,33 @@ 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':
+      case " ":
+      case "Enter":
         e.preventDefault();
         // Toggle selection or trigger action
-        if (s.selectionMode !== 'none') {
+        if (s.selectionMode !== "none") {
           // For cells, select the parent row
-          const keyToSelect = isCell(focusedItem) && focusedItem.parentKey != null
-            ? focusedItem.parentKey
-            : focusedKey;
+          const keyToSelect =
+            isCell(focusedItem) && focusedItem.parentKey != null
+              ? focusedItem.parentKey
+              : focusedKey;
 
-          if (e.shiftKey && s.selectionMode === 'multiple') {
+          if (e.shiftKey && s.selectionMode === "multiple") {
             s.extendSelection(keyToSelect);
           } else {
             s.toggleSelection(keyToSelect);
@@ -435,19 +498,23 @@ export function createTable<T extends object>(
         return;
 
       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);
       }
     }
@@ -488,8 +555,8 @@ export function createTable<T extends object>(
   // 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,21 +565,23 @@ 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,
-      tabIndex: s.collection.size === 0 ? 0 : -1,
+      "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,
       onKeyDown,
       onFocus,
       onBlur,
     };
 
     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>;