@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/src/tabs/createTabs.ts

@@ -54,8 +54,10 @@ export interface TabListAria {
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
     onKeyDown: (e: KeyboardEvent) => void;
-    onFocus: (e: FocusEvent) => void;
-    onBlur: (e: FocusEvent) => void;
+    // React's bubbling onFocus/onBlur map to focusin/focusout in Solid; the
+    // tab list must observe focus entering/leaving its child tabs.
+    onFocusIn: (e: FocusEvent) => void;
+    onFocusOut: (e: FocusEvent) => void;
   };
 }
 
@@ -80,12 +82,13 @@ export interface TabAria {
     "aria-controls": string | undefined;
     "aria-label"?: string;
     "aria-labelledby"?: string;
-    tabIndex: number;
+    tabIndex: number | undefined;
     onKeyDown: (e: KeyboardEvent) => void;
     onMouseDown: (e: MouseEvent) => void;
     onPointerDown: (e: PointerEvent) => void;
     onClick: (e: MouseEvent) => void;
     onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
   };
   /** Whether the tab is selected. */
   isSelected: Accessor<boolean>;
@@ -269,6 +272,11 @@ 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);
+      }
     }
   };
 
@@ -297,8 +305,8 @@ export function createTabList<T>(props: AriaTabListProps, state: TabListState<T>
       "aria-labelledby": props["aria-labelledby"],
       "aria-describedby": props["aria-describedby"],
       onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
+      onFocusIn: handleFocus,
+      onFocusOut: handleBlur,
     },
   };
 }
@@ -319,24 +327,35 @@ export function createTab<T>(
     return state.isKeyDisabled(key());
   });
 
-  const isFocused = createMemo(() => state.focusedKey() === key());
+  // Whether this tab is the roving-focus target (state layer), used for the
+  // roving tabIndex and DOM focus alignment. The returned isFocused is the
+  // DOM-focus-based ring state, matching upstream's useFocusRing semantics.
+  const isKeyFocused = createMemo(() => state.focusedKey() === key());
 
   // Focus ring
-  const { isFocusVisible, focusProps } = createFocusRing();
-
-  // Press handling
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  // Press handling. Selection timing mirrors useSelectableItem's default
+  // (non-shouldSelectOnPressUp) path: mouse selects on press start and
+  // 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);
+  };
   const { isPressed, pressProps } = createPress({
     get isDisabled() {
       return isDisabled();
     },
-    onPress: () => {
-      const tabKey = key();
-      const wasSelected = state.selectedKey() === tabKey;
-
-      state.setFocusedKey(tabKey);
-
-      if (state.keyboardActivation() === "manual" || wasSelected) {
-        state.setSelectedKey(tabKey);
+    onPressStart: (e) => {
+      if (e.pointerType === "mouse" || e.pointerType === "keyboard") {
+        selectTab();
+      }
+    },
+    onPress: (e) => {
+      if (e.pointerType === "touch" || e.pointerType === "pen" || e.pointerType === "virtual") {
+        selectTab();
       }
     },
   });
@@ -369,6 +388,10 @@ export function createTab<T>(
     callHandler(focusProps.onFocus, e);
   };
 
+  const handleBlur = (e: FocusEvent) => {
+    callHandler(focusProps.onBlur, e);
+  };
+
   // Combine all handlers
   const handleKeyDown = (e: KeyboardEvent) => {
     callHandler(pressProps.onKeyDown, e);
@@ -386,10 +409,13 @@ export function createTab<T>(
     callHandler(pressProps.onClick, e);
   };
 
-  // Keep DOM focus aligned with focusedKey updates from keyboard delegate.
+  // Keep DOM focus aligned with focusedKey updates from keyboard navigation.
+  // Only while the tab list itself is focused (mirrors useSelectableItem's
+  // manager.isFocused guard), so programmatic selection changes don't steal
+  // focus from elsewhere in the document.
   createEffect(() => {
     const element = ref?.();
-    if (!isFocused() || !element) return;
+    if (!state.isFocused() || !isKeyFocused() || !element) return;
 
     const activeElement = element.ownerDocument?.activeElement;
     if (activeElement !== element) {
@@ -413,13 +439,17 @@ export function createTab<T>(
       "aria-label": props["aria-label"],
       "aria-labelledby": props["aria-labelledby"],
       get tabIndex() {
-        return isSelected() && !isDisabled() ? 0 : -1;
+        // Roving tabIndex follows the focused key (mirrors useSelectableItem);
+        // disabled tabs get no tabIndex at all (mirrors useTab).
+        if (isDisabled()) return undefined;
+        return isKeyFocused() ? 0 : -1;
       },
       onKeyDown: handleKeyDown,
       onMouseDown: handleMouseDown,
       onPointerDown: handlePointerDown,
       onClick: handleClick,
       onFocus: handleFocus,
+      onBlur: handleBlur,
     },
     isSelected,
     isDisabled,

package/src/tag/createTag.ts

@@ -20,6 +20,8 @@ import type { ListState, Key } from "@proyecto-viviana/solid-stately";
 export interface AriaTagProps {
   /** The unique key for this tag. */
   key: Key;
+  /** The role for the tag root. Components use row semantics inside a grid. */
+  role?: "option" | "row";
   /** Whether the tag is disabled. */
   isDisabled?: boolean;
   /** A text value for the tag used for accessibility. */
@@ -149,9 +151,9 @@ export function createTag<T>(
       return;
     }
 
-    const nextTag = Array.from(tagList.querySelectorAll<HTMLElement>('[role="row"]')).find(
-      (el) => el.getAttribute("data-key") === String(nextKey),
-    );
+    const nextTag = Array.from(
+      tagList.querySelectorAll<HTMLElement>('[role="option"], [role="row"]'),
+    ).find((el) => el.getAttribute("data-key") === String(nextKey));
 
     nextTag?.focus();
   };
@@ -268,6 +270,8 @@ export function createTag<T>(
     return !!data?.onRemove;
   });
 
+  const rootRole = createMemo(() => getProps().role ?? "option");
+
   return {
     get rowProps() {
       return mergeProps(
@@ -276,9 +280,10 @@ export function createTag<T>(
         pressProps as Record<string, unknown>,
         {
           id: rowId,
-          role: "row",
+          role: rootRole(),
           tabIndex: tabIndex(),
           "data-key": String(key()),
+          "aria-label": getProps().textValue,
           "aria-selected": isSelectable() ? isSelected() : undefined,
           "aria-disabled": isDisabled() || undefined,
           onKeyDown: handleKeyDown,

package/src/toast/createToast.ts

@@ -79,6 +79,7 @@ export function createToast<T>(props: AriaToastProps<T>): ToastAria {
     "aria-modal": "false",
     "aria-labelledby": hasTitle ? titleId : undefined,
     "aria-describedby": hasDescription ? descriptionId : undefined,
+    tabIndex: 0,
     "data-animation": props.toast.animation,
     "data-key": props.toast.key,
   }));

package/src/toggle/createToggle.ts

@@ -13,6 +13,7 @@ import { mergeProps } from "../utils/mergeProps";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { type MaybeAccessor, access } from "../utils/reactivity";
 import { isDevEnv } from "../utils/env";
+import { createSlotId } from "../ssr";
 import { type ToggleState } from "@proyecto-viviana/solid-stately";
 import { type PressEvent } from "../interactions/PressEvent";
 
@@ -84,6 +85,10 @@ export interface ToggleAria {
   labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
   /** Props to be spread on the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the toggle is selected. */
   isSelected: Accessor<boolean>;
   /** Whether the toggle is in a pressed state. */
@@ -233,6 +238,12 @@ export function createToggle(
   // Combined pressed state
   const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();
 
+  // Mint ids for the description and error message slots. Copied from createField
+  // because we don't want the label behavior that provides — the id resolves only
+  // once an element with that id is actually rendered (e.g. via TextContext slots).
+  const descriptionId = createSlotId();
+  const errorMessageId = createSlotId();
+
   return {
     labelProps: mergeProps(labelPressProps, {
       onClick: (e: MouseEvent) => e.preventDefault(),
@@ -244,6 +255,9 @@ export function createToggle(
         "aria-errormessage": p["aria-errormessage"],
         "aria-controls": p["aria-controls"],
         "aria-readonly": isReadOnly() || undefined,
+        "aria-describedby":
+          [descriptionId(), errorMessageId(), p["aria-describedby"]].filter(Boolean).join(" ") ||
+          undefined,
         onChange,
         disabled: isDisabled(),
         ...(p.value == null ? {} : { value: p.value }),
@@ -256,6 +270,12 @@ export function createToggle(
         onClick: (e: MouseEvent) => e.stopPropagation(),
       }) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
+    get descriptionProps() {
+      return { id: descriptionId() };
+    },
+    get errorMessageProps() {
+      return { id: errorMessageId() };
+    },
     isSelected: state.isSelected,
     isPressed: combinedIsPressed,
     isDisabled: isDisabled(),

package/src/toolbar/createToolbar.ts

@@ -8,7 +8,7 @@
 import { createSignal, onMount, onCleanup, type Accessor } from "solid-js";
 import { type MaybeAccessor, access } from "../utils";
 import { useLocale } from "../i18n";
-import { getOwnerDocument, isFocusable } from "../utils";
+import { getOwnerDocument, isFocusable, isTabbable } from "../utils";
 import { focusSafely } from "../utils/focus";
 
 export type Orientation = "horizontal" | "vertical";
@@ -26,7 +26,7 @@ export interface ToolbarAria {
   /** Props for the toolbar container element. */
   toolbarProps: {
     role: "toolbar" | "group";
-    "aria-orientation": Orientation;
+    "aria-orientation"?: Orientation;
     "aria-label"?: string;
     "aria-labelledby"?: string;
     tabIndex?: number;
@@ -50,17 +50,6 @@ interface FocusManager {
   focusLast(opts?: FocusManagerOptions): HTMLElement | null;
 }
 
-function isTabbable(element: Element): boolean {
-  if (!isFocusable(element)) {
-    return false;
-  }
-  const tabIndex = element.getAttribute("tabindex");
-  if (tabIndex != null) {
-    return parseInt(tabIndex, 10) >= 0;
-  }
-  return true;
-}
-
 function getFocusableElements(root: Element, tabbable = false): HTMLElement[] {
   const elements: HTMLElement[] = [];
   const filter = tabbable ? isTabbable : isFocusable;
@@ -292,20 +281,18 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
       return;
     }
 
-    // Let modified shortcuts pass through.
-    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
-      return;
-    }
+    const doc = getOwnerDocument(root);
 
-    // Text entry controls should keep arrow/home/end for caret/value navigation.
+    // 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":
-        case "Home":
-        case "End":
           return;
       }
     }
@@ -349,18 +336,18 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
           handled = true;
         }
         break;
-      case "Home":
-        focusManager.focusFirst({ tabbable: true });
-        handled = true;
-        break;
-      case "End":
-        focusManager.focusLast({ tabbable: true });
-        handled = true;
-        break;
       case "Tab":
-        // Store the last focused element for re-entry
-        lastFocusedElement = e.target as Element;
-        break;
+        // Move focus to the first/last child so the browser's own Tab handling
+        // then carries focus OUT of the whole toolbar. Faithful to upstream
+        // useToolbar: there is no roving tabindex — every item stays tabbable,
+        // so a bare Tab would otherwise step to the next item instead of leaving.
+        lastFocusedElement = getActiveElement(doc);
+        if (e.shiftKey) {
+          focusManager.focusFirst({ tabbable: true });
+        } else {
+          focusManager.focusLast({ tabbable: true });
+        }
+        return;
     }
 
     if (handled) {
@@ -369,24 +356,36 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
     }
   };
 
-  // Focus handler - restore last focused element when re-entering
-  const onFocus = (e: FocusEvent) => {
+  // Record the last focused child when focus moves out of the toolbar.
+  const onBlur = (e: FocusEvent) => {
+    const root = toolbarRef;
+    if (!root) return;
     if (isInToolbar()) return;
 
-    // Only restore if focus is coming from outside the toolbar
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {
+      lastFocusedElement = e.target as Element;
+    }
+  };
+
+  // Restore focus to the last focused child when focus returns into the toolbar.
+  // If that element was removed, focus() is a no-op and the browser lands on the
+  // first/last child per direction — matching upstream useToolbar.
+  const onFocus = (e: FocusEvent) => {
     const root = toolbarRef;
     if (!root) return;
+    if (isInToolbar()) return;
 
-    const relatedTarget = e.relatedTarget as Element | null;
-
-    // If focus came from outside and we have a last focused element
+    const relatedTarget = e.relatedTarget as Node | null;
+    const target = e.target;
     if (
       lastFocusedElement &&
-      root.contains(lastFocusedElement) &&
-      (!relatedTarget || !root.contains(relatedTarget))
+      !(relatedTarget && root.contains(relatedTarget)) &&
+      target instanceof Node &&
+      root.contains(target)
     ) {
-      // Restore focus to the last focused element
       focusSafely(lastFocusedElement as HTMLElement);
+      lastFocusedElement = null;
     }
   };
 
@@ -394,13 +393,15 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
   const setRef = (el: HTMLElement) => {
     toolbarRef = el;
 
-    // Use capture phase for keyboard events
+    // Use capture phase so container handlers run before the focused child's.
     el.addEventListener("keydown", onKeyDown, true);
     el.addEventListener("focus", onFocus, true);
+    el.addEventListener("blur", onBlur, true);
 
     onCleanup(() => {
       el.removeEventListener("keydown", onKeyDown, true);
       el.removeEventListener("focus", onFocus, true);
+      el.removeEventListener("blur", onBlur, true);
     });
   };
 
@@ -410,7 +411,7 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
         return isInToolbar() ? "group" : "toolbar";
       },
       get "aria-orientation"() {
-        return orientation();
+        return isInToolbar() ? undefined : orientation();
       },
       get "aria-label"() {
         return ariaLabel();

package/src/tree/createTree.ts

@@ -3,11 +3,13 @@
  * Based on @react-aria/tree/useTree.
  */
 
-import { createMemo, type Accessor } from "solid-js";
+import { createEffect, createMemo, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
 import { createId } from "@proyecto-viviana/solid-stately";
 import type { TreeState, TreeCollection, Key } from "@proyecto-viviana/solid-stately";
 import type { AriaTreeProps, TreeAria } from "./types";
+import { scrollIntoViewport } from "../utils";
+import { getInteractionModality } from "../interactions/createInteractionModality";
 
 /**
  * Metadata stored for a tree instance.
@@ -15,6 +17,10 @@ import type { AriaTreeProps, TreeAria } from "./types";
 interface TreeData {
   /** The generated ID for the tree. */
   treeId: string;
+  /** How keyboard navigation behaves within row children. */
+  keyboardNavigationBehavior: "arrow" | "tab";
+  /** Text direction for row-child arrow navigation and tree expansion keys. */
+  direction: "ltr" | "rtl";
   /** Actions registered for the tree. */
   actions: {
     onAction?: (key: Key) => void;
@@ -35,13 +41,45 @@ export function getTreeData<T extends object, C extends TreeCollection<T>>(
   return treeDataMap.get(state);
 }
 
+/**
+ * Whether a key should be skipped during keyboard navigation. Disabled keys only
+ * block navigation under `disabledBehavior: "all"` (the default); under
+ * `"selection"` they remain focusable (selection is still blocked elsewhere).
+ * Mirrors `ListKeyboardDelegate.isDisabled` in React Aria.
+ */
+function isNavigationDisabled<T extends object, C extends TreeCollection<T>>(
+  state: TreeState<T, C>,
+  key: Key,
+): boolean {
+  return state.isDisabled(key) && state.disabledBehavior === "all";
+}
+
+/**
+ * Walks from `startKey` via `step` until reaching a key that is navigable (not
+ * disabled for navigation), mirroring React Aria's
+ * `ListKeyboardDelegate.findNextNonDisabled`. `getFirstKey`/`getLastKey` and the
+ * next/previous lookups all funnel through this so arrow keys, Home and End land
+ * on enabled rows only.
+ */
+function findNextNavigableKey<T extends object, C extends TreeCollection<T>>(
+  state: TreeState<T, C>,
+  startKey: Key | null,
+  step: (key: Key) => Key | null,
+): Key | null {
+  let key = startKey;
+  while (key != null && isNavigationDisabled(state, key)) {
+    key = step(key);
+  }
+  return key;
+}
+
 /**
  * Creates accessibility props for a tree.
  */
 export function createTree<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
   props: Accessor<AriaTreeProps>,
   state: Accessor<TreeState<T, C>>,
-  _ref: Accessor<HTMLDivElement | null>,
+  ref: Accessor<HTMLDivElement | null>,
 ): TreeAria {
   // Generate a unique ID for the tree
   const treeId = props().id ?? createId();
@@ -49,6 +87,12 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
   // Store tree data for child components
   const treeData: TreeData = {
     treeId,
+    get keyboardNavigationBehavior() {
+      return props().keyboardNavigationBehavior ?? "arrow";
+    },
+    get direction() {
+      return props().direction ?? "ltr";
+    },
     actions: {
       get onAction() {
         return props().onAction;
@@ -75,31 +119,27 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        if (focusedKey != null) {
-          const nextKey = collection.getKeyAfter(focusedKey);
-          if (nextKey != null) {
-            s.setFocusedKey(nextKey);
-          }
-        } else {
-          const firstKey = collection.getFirstKey();
-          if (firstKey != null) {
-            s.setFocusedKey(firstKey);
-          }
+        const nextKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyAfter(focusedKey), (k) =>
+                collection.getKeyAfter(k),
+              )
+            : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+        if (nextKey != null) {
+          s.setFocusedKey(nextKey);
         }
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        if (focusedKey != null) {
-          const prevKey = collection.getKeyBefore(focusedKey);
-          if (prevKey != null) {
-            s.setFocusedKey(prevKey);
-          }
-        } else {
-          const lastKey = collection.getLastKey();
-          if (lastKey != null) {
-            s.setFocusedKey(lastKey);
-          }
+        const prevKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyBefore(focusedKey), (k) =>
+                collection.getKeyBefore(k),
+              )
+            : findNextNavigableKey(s, collection.getLastKey(), (k) => collection.getKeyBefore(k));
+        if (prevKey != null) {
+          s.setFocusedKey(prevKey);
         }
         break;
       }
@@ -133,7 +173,9 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
       }
       case "Home": {
         e.preventDefault();
-        const firstKey = collection.getFirstKey();
+        const firstKey = findNextNavigableKey(s, collection.getFirstKey(), (k) =>
+          collection.getKeyAfter(k),
+        );
         if (firstKey != null) {
           s.setFocusedKey(firstKey);
         }
@@ -141,7 +183,9 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
       }
       case "End": {
         e.preventDefault();
-        const lastKey = collection.getLastKey();
+        const lastKey = findNextNavigableKey(s, collection.getLastKey(), (k) =>
+          collection.getKeyBefore(k),
+        );
         if (lastKey != null) {
           s.setFocusedKey(lastKey);
         }
@@ -155,22 +199,11 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case " ":
-      case "Space":
-      case "Spacebar": {
-        if (focusedKey != null && s.selectionMode !== "none" && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          s.toggleSelection(focusedKey);
-        }
-        break;
-      }
-      case "Enter": {
-        if (focusedKey != null && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          p.onAction?.(focusedKey);
-        }
-        break;
-      }
+      // Space (selection) and Enter (action) are intentionally absent here.
+      // Upstream's useSelectableCollection leaves activation to useSelectableItem.
+      // The focus effect below moves DOM focus onto the focused row, so the row's
+      // own createSelectableItem handlers receive those keys without duplicating
+      // work in the bubbling tree handler.
       case "Escape": {
         if (s.selectionMode !== "none") {
           e.preventDefault();
@@ -211,9 +244,11 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     const s = state();
     s.setFocused(true);
 
-    // If nothing is focused, focus the first item
+    // If nothing is focused, focus the first navigable item
     if (s.focusedKey == null) {
-      const firstKey = s.collection.getFirstKey();
+      const firstKey = findNextNavigableKey(s, s.collection.getFirstKey(), (k) =>
+        s.collection.getKeyAfter(k),
+      );
       if (firstKey != null) {
         s.setFocusedKey(firstKey);
       }
@@ -225,6 +260,29 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     s.setFocused(false);
   };
 
+  createEffect(() => {
+    const s = state();
+    const key = s.focusedKey;
+    const el = ref();
+    if (!el || key == null) {
+      return;
+    }
+
+    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();
+
+      if (getInteractionModality() !== "pointer") {
+        scrollIntoViewport(target, { containingElement: el });
+      }
+    }
+  });
+
   const treeProps = createMemo(() => {
     const p = props();
     const s = state();