@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/table/createTable.ts

@@ -504,7 +504,9 @@ export function createTable<T extends object>(
       'aria-labelledby': p['aria-labelledby'],
       'aria-describedby': p['aria-describedby'],
       'aria-multiselectable': s.selectionMode === 'multiple' ? 'true' : undefined,
-      tabIndex: s.collection.size === 0 ? 0 : -1,
+      // Keep the grid itself tabbable so keyboard users can enter
+      // row/cell navigation without requiring a prior pointer interaction.
+      tabIndex: 0,
       onKeyDown,
       onFocus,
       onBlur,

package/src/table/createTableColumnHeader.ts

@@ -39,7 +39,7 @@ export function createTableColumnHeader<T extends object>(
     const p = props();
     const s = state();
 
-    if (p.allowsSorting && (e.key === 'Enter' || e.key === ' ')) {
+    if (p.allowsSorting && (e.key === 'Enter' || e.key === ' ' || e.key === 'Space' || e.key === 'Spacebar')) {
       e.preventDefault();
       s.sort(p.node.key);
     }

package/src/table/createTableRow.ts

@@ -76,7 +76,7 @@ export function createTableRow<T extends object>(
 
     if (isDisabled()) return;
 
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Space' || e.key === 'Spacebar') {
       e.preventDefault();
 
       // Get table metadata for actions

package/src/tabs/createTabs.ts

@@ -3,11 +3,12 @@
  * Based on @react-aria/tabs.
  */
 
-import { type Accessor, createMemo, onMount } from 'solid-js';
+import { type Accessor, createEffect, createMemo } from 'solid-js';
 import { createFocusRing } from '../interactions';
 import { createPress } from '../interactions';
 import { createHover } from '../interactions';
 import { createId } from '../ssr';
+import { useLocale } from '../i18n';
 import type { Key, Collection, CollectionNode } from '@proyecto-viviana/solid-stately';
 
 // ============================================
@@ -117,7 +118,7 @@ export interface TabPanelAria {
   tabPanelProps: {
     id: string;
     role: 'tabpanel';
-    'aria-labelledby': string;
+    'aria-labelledby'?: string;
     'aria-label'?: string;
     'aria-describedby'?: string;
     tabIndex: number;
@@ -227,6 +228,7 @@ export function createTabList<T>(
   props: AriaTabListProps,
   state: TabListState<T>
 ): TabListAria {
+  const locale = useLocale();
   const orientation = () => props.orientation ?? state.orientation() ?? 'horizontal';
   const keyboardActivation = () => props.keyboardActivation ?? state.keyboardActivation() ?? 'automatic';
 
@@ -238,17 +240,17 @@ export function createTabList<T>(
 
     let nextKey: Key | null = null;
     const isHorizontal = orientation() === 'horizontal';
+    const isRTL = locale().direction === 'rtl';
 
     switch (e.key) {
       case 'ArrowLeft':
         if (isHorizontal) {
-          // TODO: RTL support
-          nextKey = getPreviousKey(state, currentKey);
+          nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
         }
         break;
       case 'ArrowRight':
         if (isHorizontal) {
-          nextKey = getNextKey(state, currentKey);
+          nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);
         }
         break;
       case 'ArrowUp':
@@ -282,11 +284,6 @@ export function createTabList<T>(
     if (nextKey !== null) {
       e.preventDefault();
       state.setFocusedKey(nextKey);
-
-      // In automatic mode, selection follows focus
-      if (keyboardActivation() === 'automatic') {
-        state.setSelectedKey(nextKey);
-      }
     }
   };
 
@@ -348,8 +345,14 @@ export function createTab<T>(
       return isDisabled();
     },
     onPress: () => {
-      state.setSelectedKey(key());
-      state.setFocusedKey(key());
+      const tabKey = key();
+      const wasSelected = state.selectedKey() === tabKey;
+
+      state.setFocusedKey(tabKey);
+
+      if (state.keyboardActivation() === 'manual' || wasSelected) {
+        state.setSelectedKey(tabKey);
+      }
     },
   });
 
@@ -365,60 +368,71 @@ export function createTab<T>(
   const tabPanelId = generateTabPanelId(state, key());
 
   // Helper to safely call event handlers that may be bound tuples
-  const callHandler = <E extends Event>(
-    handler: ((e: E) => void) | [object, (e: E) => void] | undefined,
-    event: E
-  ) => {
-    if (!handler) return;
-    if (Array.isArray(handler)) {
-      handler[1].call(handler[0], event);
-    } else {
-      handler(event);
+  const callHandler = <E extends Event>(handler: unknown, event: E) => {
+    if (typeof handler === 'function') {
+      (handler as (e: E) => void)(event);
+      return;
+    }
+    if (
+      Array.isArray(handler) &&
+      handler.length >= 2 &&
+      typeof handler[1] === 'function'
+    ) {
+      (handler[1] as (this: unknown, e: E) => void).call(handler[0], event);
     }
   };
 
   // Focus management
   const handleFocus = (e: FocusEvent) => {
     state.setFocusedKey(key());
-    callHandler(focusProps.onFocus as any, e);
+    callHandler(focusProps.onFocus, e);
   };
 
   // Combine all handlers
   const handleKeyDown = (e: KeyboardEvent) => {
-    callHandler(pressProps.onKeyDown as any, e);
+    callHandler(pressProps.onKeyDown, e);
   };
 
   const handleMouseDown = (e: MouseEvent) => {
-    callHandler(pressProps.onMouseDown as any, e);
+    callHandler(pressProps.onMouseDown, e);
   };
 
   const handlePointerDown = (e: PointerEvent) => {
-    callHandler(pressProps.onPointerDown as any, e);
+    callHandler(pressProps.onPointerDown, e);
   };
 
   const handleClick = (e: MouseEvent) => {
-    callHandler(pressProps.onClick as any, e);
+    callHandler(pressProps.onClick, e);
   };
 
-  // Focus this tab when it becomes selected and focused
-  onMount(() => {
-    const cleanup = createMemo(() => {
-      if (isFocused() && ref?.()) {
-        ref()?.focus();
-      }
-    });
-    return cleanup;
+  // Keep DOM focus aligned with focusedKey updates from keyboard delegate.
+  createEffect(() => {
+    const element = ref?.();
+    if (!isFocused() || !element) return;
+
+    const activeElement = element.ownerDocument?.activeElement;
+    if (activeElement !== element) {
+      element.focus();
+    }
   });
 
   return {
     tabProps: {
       id: tabId,
       role: 'tab',
-      'aria-selected': isSelected(),
-      'aria-disabled': isDisabled() || undefined,
-      'aria-controls': isSelected() ? tabPanelId : undefined,
+      get 'aria-selected'() {
+        return isSelected();
+      },
+      get 'aria-disabled'() {
+        return isDisabled() || undefined;
+      },
+      get 'aria-controls'() {
+        return isSelected() ? tabPanelId : undefined;
+      },
       'aria-label': props['aria-label'],
-      tabIndex: isSelected() && !isDisabled() ? 0 : -1,
+      get tabIndex() {
+        return isSelected() && !isDisabled() ? 0 : -1;
+      },
       onKeyDown: handleKeyDown,
       onMouseDown: handleMouseDown,
       onPointerDown: handlePointerDown,
@@ -441,27 +455,42 @@ export function createTabPanel<T>(
   props: AriaTabPanelProps,
   state: TabListState<T> | null
 ): TabPanelAria {
-  // If state is null, the panel is always visible (for SSR scenarios)
+  const fallbackId = createId();
+
+  // Shared panel pattern: if no explicit id is provided, associate the panel
+  // with the currently selected tab.
+  const associatedKey = createMemo<Key | null>(() => {
+    if (state === null) return null;
+    return props.id ?? state.selectedKey();
+  });
+
+  // If state is null, the panel is always visible (SSR fallback).
   const isSelected = createMemo(() => {
     if (state === null) return true;
-    if (props.id === undefined) return false;
+    if (props.id === undefined) {
+      return state.selectedKey() !== null;
+    }
     return state.selectedKey() === props.id;
   });
 
-  // Generate IDs based on the associated tab key
-  const tabPanelId = state && props.id !== undefined
-    ? generateTabPanelId(state, props.id)
-    : createId();
-
-  const tabId = state && props.id !== undefined
-    ? generateTabId(state, props.id)
-    : '';
-
   return {
     tabPanelProps: {
-      id: tabPanelId,
+      get id() {
+        const key = associatedKey();
+        if (state && key !== null) {
+          return generateTabPanelId(state, key);
+        }
+        return fallbackId;
+      },
       role: 'tabpanel',
-      'aria-labelledby': props['aria-labelledby'] ?? tabId,
+      get 'aria-labelledby'() {
+        if (props['aria-labelledby']) return props['aria-labelledby'];
+        const key = associatedKey();
+        if (state && key !== null) {
+          return generateTabId(state, key);
+        }
+        return undefined;
+      },
       'aria-label': props['aria-label'],
       'aria-describedby': props['aria-describedby'],
       // Make panel focusable if no tabbable children

package/src/tag/createTag.ts

@@ -83,15 +83,92 @@ export function createTag<T>(
     return state.isSelected(key());
   });
 
+  const isSelectable = createMemo(() => state.selectionMode() !== 'none');
+
   const isFocused = createMemo(() => {
     return state.focusedKey() === key();
   });
 
+  const getFirstFocusableKey = (): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getFirstKey();
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyAfter(candidate);
+    }
+    return candidate;
+  };
+
+  const getLastFocusableKey = (): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getLastKey();
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyBefore(candidate);
+    }
+    return candidate;
+  };
+
+  const getNextFocusableKey = (fromKey: Key): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getKeyAfter(fromKey);
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyAfter(candidate);
+    }
+
+    if (candidate != null) {
+      return candidate;
+    }
+
+    return getFirstFocusableKey();
+  };
+
+  const getPreviousFocusableKey = (fromKey: Key): Key | null => {
+    const collection = state.collection();
+    let candidate = collection.getKeyBefore(fromKey);
+    while (candidate != null && state.isDisabled(candidate)) {
+      candidate = collection.getKeyBefore(candidate);
+    }
+
+    if (candidate != null) {
+      return candidate;
+    }
+
+    return getLastFocusableKey();
+  };
+
+  const focusKey = (nextKey: Key | null) => {
+    if (nextKey == null) {
+      return;
+    }
+
+    state.setFocusedKey(nextKey);
+    const currentElement = ref();
+
+    if (!currentElement) {
+      return;
+    }
+
+    if (nextKey === key()) {
+      currentElement.focus();
+      return;
+    }
+
+    const tagList = currentElement.parentElement;
+    if (!tagList) {
+      return;
+    }
+
+    const nextTag = Array.from(tagList.querySelectorAll<HTMLElement>('[role="option"]'))
+      .find((el) => el.getAttribute('data-key') === String(nextKey));
+
+    nextTag?.focus();
+  };
+
   // Handle press for selection
   const { pressProps, isPressed } = createPress({
     isDisabled,
     onPress: () => {
       if (!isDisabled()) {
+        state.setFocusedKey(key());
         state.toggleSelection(key());
       }
     },
@@ -100,12 +177,38 @@ export function createTag<T>(
   // Handle focusable
   const { focusableProps } = createFocusable({
     isDisabled,
+    onFocus: () => {
+      state.setFocusedKey(key());
+    },
   }, ref);
 
-  // Handle keyboard for removal
+  // Handle keyboard for navigation and removal
   const handleKeyDown = (e: KeyboardEvent) => {
     if (isDisabled()) return;
 
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        e.preventDefault();
+        focusKey(getNextFocusableKey(key()));
+        return;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        e.preventDefault();
+        focusKey(getPreviousFocusableKey(key()));
+        return;
+      case 'Home':
+        e.preventDefault();
+        focusKey(getFirstFocusableKey());
+        return;
+      case 'End':
+        e.preventDefault();
+        focusKey(getLastFocusableKey());
+        return;
+      default:
+        break;
+    }
+
     if (e.key === 'Delete' || e.key === 'Backspace') {
       e.preventDefault();
       const data = getData();
@@ -127,10 +230,35 @@ export function createTag<T>(
   // Compute tabIndex
   const tabIndex = createMemo(() => {
     if (isDisabled()) return -1;
-    // If this is the focused item, or if nothing is focused yet
-    if (isFocused() || state.focusedKey() === null) {
+
+    if (isFocused()) {
+      return 0;
+    }
+
+    if (state.focusedKey() !== null) {
+      return -1;
+    }
+
+    const collection = state.collection();
+    let defaultTabStop: Key | null = null;
+
+    if (state.selectionMode() !== 'none') {
+      for (const item of collection) {
+        if (!state.isDisabled(item.key) && state.isSelected(item.key)) {
+          defaultTabStop = item.key;
+          break;
+        }
+      }
+    }
+
+    if (defaultTabStop == null) {
+      defaultTabStop = getFirstFocusableKey();
+    }
+
+    if (key() === defaultTabStop) {
       return 0;
     }
+
     return -1;
   });
 
@@ -147,9 +275,10 @@ export function createTag<T>(
     get rowProps() {
       return mergeProps(domProps(), focusableProps as Record<string, unknown>, pressProps as Record<string, unknown>, {
         id: rowId,
-        role: 'row',
+        role: 'option',
         tabIndex: tabIndex(),
-        'aria-selected': isSelected(),
+        'data-key': String(key()),
+        'aria-selected': isSelectable() ? isSelected() : undefined,
         'aria-disabled': isDisabled() || undefined,
         onKeyDown: handleKeyDown,
       });
@@ -157,7 +286,7 @@ export function createTag<T>(
     get gridCellProps() {
       return {
         id: cellId,
-        role: 'gridcell',
+        role: 'presentation',
         'aria-describedby': allowsRemoving() ? removeButtonId : undefined,
       };
     },

package/src/tag/createTagGroup.ts

@@ -82,6 +82,10 @@ export function createTagGroup<T>(
   const id = createId(getProps().id);
   const descriptionId = createId();
   const errorMessageId = createId();
+  const getFallbackAriaLabel = () => {
+    const p = getProps();
+    return !p.label && !p['aria-label'] && !p['aria-labelledby'] ? 'Tag list' : undefined;
+  };
 
   // Filter DOM props
   const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
@@ -89,7 +93,7 @@ export function createTagGroup<T>(
   // Create label handling
   const { labelProps, fieldProps } = createLabel({
     get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
+    get 'aria-label'() { return getProps()['aria-label'] ?? getFallbackAriaLabel(); },
     get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
     labelElementType: 'span',
   });
@@ -130,7 +134,8 @@ export function createTagGroup<T>(
 
       return mergeProps(domProps(), fieldProps as Record<string, unknown>, {
         id,
-        role: hasItems ? 'grid' : 'group',
+        role: hasItems ? 'listbox' : 'group',
+        'aria-multiselectable': hasItems && state.selectionMode() === 'multiple' ? true : undefined,
         'aria-atomic': false,
         'aria-relevant': 'additions',
         'aria-describedby': getAriaDescribedBy(),

package/src/toast/createToast.ts

@@ -19,6 +19,10 @@ export interface AriaToastProps<T> {
   toast: QueuedToast<T>;
   /** The toast state from createToastState. */
   state: ToastState<T>;
+  /** Whether the rendered toast includes a title element. */
+  hasTitle?: boolean;
+  /** Whether the rendered toast includes a description element. */
+  hasDescription?: boolean;
 }
 
 export interface ToastAria {
@@ -70,6 +74,8 @@ export interface ToastAria {
 export function createToast<T>(props: AriaToastProps<T>): ToastAria {
   const titleId = createId();
   const descriptionId = createId();
+  const hasTitle = props.hasTitle ?? true;
+  const hasDescription = props.hasDescription ?? true;
 
   const close = () => {
     props.state.close(props.toast.key);
@@ -79,8 +85,8 @@ export function createToast<T>(props: AriaToastProps<T>): ToastAria {
   const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
     role: 'alertdialog',
     'aria-modal': 'false',
-    'aria-labelledby': titleId,
-    'aria-describedby': descriptionId,
+    'aria-labelledby': hasTitle ? titleId : undefined,
+    'aria-describedby': hasDescription ? descriptionId : undefined,
     'data-animation': props.toast.animation,
     'data-key': props.toast.key,
   }));

package/src/toast/createToastRegion.ts

@@ -9,7 +9,6 @@
 
 import { type JSX, createMemo } from 'solid-js';
 import { type ToastState } from '@proyecto-viviana/solid-stately';
-import { mergeProps } from '../utils';
 import { createHover } from '../interactions/createHover';
 
 // ============================================

package/src/toolbar/createToolbar.ts

@@ -7,7 +7,6 @@
 
 import {
   createSignal,
-  createEffect,
   onMount,
   onCleanup,
   type Accessor,
@@ -104,6 +103,47 @@ function getActiveElement(doc: Document): Element | null {
   return activeElement
 }
 
+const TEXT_INPUT_TYPES = new Set([
+  '',
+  'text',
+  'search',
+  'url',
+  'tel',
+  'password',
+  'email',
+  'number',
+  'date',
+  'datetime-local',
+  'month',
+  'time',
+  'week',
+])
+
+function isTextInputLikeElement(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  if (target.isContentEditable || !!target.closest('[contenteditable="true"]')) {
+    return true
+  }
+
+  if (target.getAttribute('role') === 'textbox') {
+    return true
+  }
+
+  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+    return true
+  }
+
+  if (target instanceof HTMLInputElement) {
+    const type = target.type.toLowerCase()
+    return TEXT_INPUT_TYPES.has(type)
+  }
+
+  return false
+}
+
 function createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {
   return {
     focusNext(opts: FocusManagerOptions = {}) {
@@ -258,9 +298,35 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
 
   // Keyboard event handler
   const onKeyDown = (e: KeyboardEvent) => {
+    const root = toolbarRef
+    if (!root) return
+
     // Don't handle if nested toolbar (parent handles navigation)
     if (isInToolbar()) return
 
+    const target = e.target
+    if (!(target instanceof Element) || !root.contains(target)) {
+      return
+    }
+
+    // Let modified shortcuts pass through.
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+      return
+    }
+
+    // Text entry controls should keep arrow/home/end for caret/value navigation.
+    if (isTextInputLikeElement(target)) {
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowLeft':
+        case 'ArrowDown':
+        case 'ArrowUp':
+        case 'Home':
+        case 'End':
+          return
+      }
+    }
+
     const dir = locale().direction
     const isRTL = dir === 'rtl'
     const isHorizontal = orientation() === 'horizontal'
@@ -300,6 +366,14 @@ 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