@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/autocomplete/createAutocomplete.ts

@@ -7,100 +7,103 @@
  * Based on @react-aria/autocomplete useAutocomplete.
  */
 
-import {
-  createSignal,
-  createEffect,
-  onCleanup,
-  type Accessor,
-} from 'solid-js'
-import { createId, getOwnerDocument } from '../ssr'
-import { type AutocompleteState } from '@proyecto-viviana/solid-stately'
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, createEffect, onCleanup, type Accessor } from "solid-js";
+import { createId, getOwnerDocument } from "../ssr";
+import { type AutocompleteState } from "@proyecto-viviana/solid-stately";
 
 export interface CollectionOptions {
   /** The id of the collection element. */
-  id?: string
+  id?: string;
   /** Accessible label for the collection. */
-  'aria-label'?: string
+  "aria-label"?: string;
   /** Whether the collection items should use virtual focus instead of being focused directly. */
-  shouldUseVirtualFocus: boolean
+  shouldUseVirtualFocus: boolean;
   /** Whether typeahead is disabled. */
-  disallowTypeAhead: boolean
+  disallowTypeAhead: boolean;
 }
 
 export interface AutocompleteInputProps {
   /** Current input value. */
-  value: Accessor<string>
+  value: Accessor<string>;
   /** Handler for input value changes. */
-  onChange: (value: string) => void
+  onChange: (value: string) => void;
   /** Handler for key events. */
-  onKeyDown: (e: KeyboardEvent) => void
+  onKeyDown: (e: KeyboardEvent) => void;
   /** Handler for focus events. */
-  onFocus: (e: FocusEvent) => void
+  onFocus: (e: FocusEvent) => void;
   /** Handler for blur events. */
-  onBlur: (e: FocusEvent) => void
+  onBlur: (e: FocusEvent) => void;
   /** The id of the currently focused item for aria-activedescendant. */
-  'aria-activedescendant': Accessor<string | undefined>
+  "aria-activedescendant": Accessor<string | undefined>;
   /** The id of the controlled collection. */
-  'aria-controls': string
+  "aria-controls": string;
   /** Autocomplete type. */
-  'aria-autocomplete': 'list' | 'none' | 'inline' | 'both'
+  "aria-autocomplete": "list" | "none" | "inline" | "both";
   /** Enter key hint for mobile keyboards. */
-  enterKeyHint: 'go'
+  enterKeyHint: "go";
   /** Disable autocorrect. */
-  autoCorrect: 'off'
+  autoCorrect: "off";
   /** Disable spell check. */
-  spellCheck: 'false'
+  spellCheck: "false";
   /** Disable browser autocomplete. */
-  autoComplete: 'off'
+  autoComplete: "off";
 }
 
-export interface AriaAutocompleteOptions<T = unknown> {
+export interface AriaAutocompleteOptions<_T = unknown> {
   /** Ref accessor for the input element. */
-  inputRef: Accessor<HTMLInputElement | undefined>
+  inputRef: Accessor<HTMLInputElement | undefined>;
   /** Ref accessor for the collection element. */
-  collectionRef: Accessor<HTMLElement | undefined>
+  collectionRef: Accessor<HTMLElement | undefined>;
+  /** Optional id override for the controlled collection element. */
+  collectionId?: string;
+  /** Optional accessible name for the controlled collection element. */
+  collectionAriaLabel?: string;
   /**
    * An optional filter function used to determine if an option should be included.
    * @param textValue - The text value of the item
    * @param inputValue - The current input value
    */
-  filter?: (textValue: string, inputValue: string) => boolean
+  filter?: (textValue: string, inputValue: string) => boolean;
   /**
    * Whether to focus the first item after filtering.
    * @default false
    */
-  disableAutoFocusFirst?: boolean
+  disableAutoFocusFirst?: boolean;
   /**
    * Whether to disable virtual focus (aria-activedescendant).
    * @default false
    */
-  disableVirtualFocus?: boolean
+  disableVirtualFocus?: boolean;
 }
 
-export interface AutocompleteAria<T = unknown> {
+export interface AutocompleteAria<_T = unknown> {
   /** Props for the autocomplete input element. */
-  inputProps: AutocompleteInputProps
+  inputProps: AutocompleteInputProps;
   /** Props for the collection (ListBox/Menu). */
-  collectionProps: CollectionOptions
+  collectionProps: CollectionOptions;
   /** A filter function that returns if the item should be shown. */
-  filter?: (textValue: string) => boolean
+  filter?: (textValue: string) => boolean;
 }
 
-// ============================================
-// CONSTANTS
-// ============================================
+function toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {
+  return {
+    key: e.key,
+    code: e.code,
+    location: e.location,
+    repeat: e.repeat,
+    isComposing: e.isComposing,
+    ctrlKey: e.ctrlKey,
+    shiftKey: e.shiftKey,
+    altKey: e.altKey,
+    metaKey: e.metaKey,
+    bubbles: e.bubbles,
+    cancelable: e.cancelable,
+  };
+}
 
 // Custom event names for collection communication
-export const AUTOCOMPLETE_FOCUS_EVENT = 'autocomplete:focus'
-export const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = 'autocomplete:clearfocus'
-
-// ============================================
-// CREATE AUTOCOMPLETE HOOK
-// ============================================
+export const AUTOCOMPLETE_FOCUS_EVENT = "autocomplete:focus";
+export const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = "autocomplete:clearfocus";
 
 /**
  * Provides the behavior and accessibility implementation for an autocomplete component.
@@ -133,116 +136,119 @@ export const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = 'autocomplete:clearfocus'
  */
 export function createAutocomplete<T = unknown>(
   props: AriaAutocompleteOptions<T>,
-  state: AutocompleteState
+  state: AutocompleteState,
 ): AutocompleteAria<T> {
   const {
     inputRef,
     collectionRef,
     filter,
+    collectionId: collectionIdProp,
+    collectionAriaLabel,
     disableAutoFocusFirst = false,
     disableVirtualFocus = false,
-  } = props
+  } = props;
 
-  const collectionId = createId()
-  const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus)
-  let lastInputType = ''
+  const collectionId = collectionIdProp ?? createId();
+  const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);
+  let lastInputType = "";
 
   // Track the input type for determining focus behavior
   const handleInput = (e: Event) => {
-    const inputEvent = e as InputEvent
-    lastInputType = inputEvent.inputType || ''
-  }
+    const inputEvent = e as InputEvent;
+    lastInputType = inputEvent.inputType || "";
+  };
 
   // Set up input event listener
   createEffect(() => {
-    const input = inputRef()
+    const input = inputRef();
     if (input) {
-      input.addEventListener('input', handleInput)
+      input.addEventListener("input", handleInput);
       onCleanup(() => {
-        input.removeEventListener('input', handleInput)
-      })
+        input.removeEventListener("input", handleInput);
+      });
     }
-  })
+  });
 
   // Focus first item in collection
   const focusFirstItem = () => {
-    const collection = collectionRef()
+    const collection = collectionRef();
     if (collection) {
       collection.dispatchEvent(
         new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
           cancelable: true,
           bubbles: true,
-          detail: { focusStrategy: 'first' },
-        })
-      )
+          detail: { focusStrategy: "first" },
+        }),
+      );
     }
-  }
+  };
 
   // Clear virtual focus
   const clearVirtualFocus = (clearFocusKey = false) => {
-    state.setFocusedNodeId(null)
-    const collection = collectionRef()
+    state.setFocusedNodeId(null);
+    const collection = collectionRef();
     if (collection) {
       collection.dispatchEvent(
         new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {
           cancelable: true,
           bubbles: true,
           detail: { clearFocusKey },
-        })
-      )
+        }),
+      );
     }
-  }
+  };
 
   // Handle input value changes
   const onChange = (value: string) => {
     // Focus first item when typing forward, clear when backspacing/pasting
-    if (lastInputType === 'insertText' && !disableAutoFocusFirst) {
-      focusFirstItem()
+    if (lastInputType === "insertText" && !disableAutoFocusFirst) {
+      focusFirstItem();
     } else if (
       lastInputType &&
-      (lastInputType.includes('insert') ||
-        lastInputType.includes('delete') ||
-        lastInputType.includes('history'))
+      (lastInputType.includes("insert") ||
+        lastInputType.includes("delete") ||
+        lastInputType.includes("history"))
     ) {
-      clearVirtualFocus(true)
+      clearVirtualFocus(true);
     }
 
-    state.setInputValue(value)
-  }
+    state.setInputValue(value);
+  };
 
   // Handle keyboard navigation
   const onKeyDown = (e: KeyboardEvent) => {
-    if ((e as any).isComposing) {
-      return
+    if ("isComposing" in e && e.isComposing) {
+      return;
     }
 
-    const focusedNodeId = state.focusedNodeId()
-    const collection = collectionRef()
+    const focusedNodeId = state.focusedNodeId();
+    const collection = collectionRef();
+    const ownerDocument = getOwnerDocument(inputRef() ?? collection);
 
     switch (e.key) {
-      case 'Escape':
+      case "Escape":
         // Let the input handle Escape (e.g., clear value)
         if (e.defaultPrevented) {
-          return
+          return;
         }
-        break
+        break;
 
-      case ' ':
+      case " ":
         // Space shouldn't trigger item action
-        return
+        return;
 
-      case 'Tab':
+      case "Tab":
         // Let Tab propagate normally for focus management
-        return
-
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'Home':
-      case 'End':
-      case 'PageUp':
-      case 'PageDown': {
+        return;
+
+      case "ArrowUp":
+      case "ArrowDown":
+      case "Home":
+      case "End":
+      case "PageUp":
+      case "PageDown": {
         // Prevent cursor movement in input
-        e.preventDefault()
+        e.preventDefault();
 
         // Dispatch focus event to collection
         if (collection) {
@@ -250,68 +256,68 @@ export function createAutocomplete<T = unknown>(
             new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
               cancelable: true,
               bubbles: true,
-            })
-          )
+            }),
+          );
         }
-        break
+        break;
       }
 
-      case 'ArrowLeft':
-      case 'ArrowRight':
+      case "ArrowLeft":
+      case "ArrowRight":
         // Clear activedescendant so screen reader announces cursor movement
-        clearVirtualFocus()
-        return
+        clearVirtualFocus();
+        return;
 
-      case 'Enter':
+      case "Enter":
         // Trigger click on focused item
         if (focusedNodeId) {
-          const item = document.getElementById(focusedNodeId)
+          const item = ownerDocument?.getElementById(focusedNodeId);
           if (item) {
-            item.click()
-            e.preventDefault()
+            item.click();
+            e.preventDefault();
           }
         }
-        return
+        return;
     }
 
     // Forward keyboard events to collection/focused item
     if (!e.defaultPrevented && collection) {
-      e.stopPropagation()
+      e.stopPropagation();
 
       if (focusedNodeId) {
-        const item = document.getElementById(focusedNodeId)
+        const item = ownerDocument?.getElementById(focusedNodeId);
         if (item) {
-          item.dispatchEvent(new KeyboardEvent(e.type, e))
+          item.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)));
         }
       } else {
-        collection.dispatchEvent(new KeyboardEvent(e.type, e))
+        collection.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)));
       }
     }
-  }
+  };
 
   // Handle focus events
   const onFocus = (e: FocusEvent) => {
-    if (!e.isTrusted) return
+    if (!e.isTrusted) return;
 
     // Restore virtual focus when refocusing input
-    const focusedNodeId = state.focusedNodeId()
+    const focusedNodeId = state.focusedNodeId();
     if (focusedNodeId) {
-      const item = document.getElementById(focusedNodeId)
+      const item = document.getElementById(focusedNodeId);
       if (item) {
         // Item still exists, keep focus on it
       }
     }
-  }
+  };
 
   const onBlur = (e: FocusEvent) => {
-    if (!e.isTrusted) return
+    if (!e.isTrusted) return;
     // Virtual focus blur handling would go here
-  }
+  };
 
   // Create filter function
   const filterFn = filter
     ? (textValue: string) => filter(textValue, state.inputValue())
-    : undefined
+    : undefined;
 
   return {
     inputProps: {
@@ -320,22 +326,22 @@ export function createAutocomplete<T = unknown>(
       onKeyDown,
       onFocus,
       onBlur,
-      get 'aria-activedescendant'() {
-        return () => (shouldUseVirtualFocus() ? state.focusedNodeId() ?? undefined : undefined)
+      get "aria-activedescendant"() {
+        return () => (shouldUseVirtualFocus() ? (state.focusedNodeId() ?? undefined) : undefined);
       },
-      'aria-controls': collectionId,
-      'aria-autocomplete': 'list',
-      enterKeyHint: 'go',
-      autoCorrect: 'off',
-      spellCheck: 'false',
-      autoComplete: 'off',
+      "aria-controls": collectionId,
+      "aria-autocomplete": "list",
+      enterKeyHint: "go",
+      autoCorrect: "off",
+      spellCheck: "false",
+      autoComplete: "off",
     },
     collectionProps: {
       id: collectionId,
-      'aria-label': 'Suggestions',
+      "aria-label": collectionAriaLabel,
       shouldUseVirtualFocus: shouldUseVirtualFocus(),
       disallowTypeAhead: shouldUseVirtualFocus(),
     },
     filter: filterFn,
-  }
+  };
 }

package/src/autocomplete/index.ts

@@ -6,4 +6,4 @@ export {
   type AutocompleteAria,
   type AutocompleteInputProps,
   type CollectionOptions,
-} from './createAutocomplete'
+} from "./createAutocomplete";

package/src/breadcrumbs/createBreadcrumbs.ts

@@ -5,22 +5,20 @@
  * Port of @react-aria/breadcrumbs.
  */
 
-import { createLink, type AriaLinkProps, type LinkAria } from '../link';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { createLink, type AriaLinkProps, type LinkAria } from "../link";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { mergeProps } from "../utils/mergeProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
 
 export interface AriaBreadcrumbsProps {
   /** Provides a label for the breadcrumbs navigation. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the breadcrumbs. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the breadcrumbs. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** Identifies the element (or elements) that provide a detailed description. */
+  "aria-details"?: string;
   /** Whether the breadcrumbs are disabled. */
   isDisabled?: boolean;
 }
@@ -30,11 +28,13 @@ export interface BreadcrumbsAria {
   navProps: Record<string, unknown>;
 }
 
-export interface AriaBreadcrumbItemProps extends Omit<AriaLinkProps, 'aria-current'> {
+export interface AriaBreadcrumbItemProps extends Omit<AriaLinkProps, "aria-current"> {
+  /** The DOM id for the breadcrumb item. */
+  id?: string;
   /** Whether this is the current/last item in the breadcrumb trail. */
   isCurrent?: boolean;
   /** The type of current location for aria-current. @default 'page' */
-  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;
+  "aria-current"?: "page" | "step" | "location" | "date" | "time" | boolean;
   /** The HTML element type. @default 'a' */
   elementType?: string;
 }
@@ -44,30 +44,24 @@ export interface BreadcrumbItemAria extends LinkAria {
   itemProps: Record<string, unknown>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides accessibility implementation for the breadcrumbs navigation container.
  */
 export function createBreadcrumbs(
-  props: MaybeAccessor<AriaBreadcrumbsProps> = {}
+  props: MaybeAccessor<AriaBreadcrumbsProps> = {},
 ): BreadcrumbsAria {
   const getProps = () => access(props);
 
   const getNavProps = (): Record<string, unknown> => {
     const p = getProps();
 
-    // Default aria-label to "Breadcrumbs" if not provided
-    const ariaLabel = p['aria-label'] ?? 'Breadcrumbs';
+    // Only apply a default label when no other label source exists.
+    const ariaLabel = p["aria-label"] ?? (p["aria-labelledby"] ? undefined : "Breadcrumbs");
 
-    return mergeProps(
-      filterDOMProps(p as Record<string, unknown>, { labelable: true }),
-      {
-        'aria-label': ariaLabel,
-      }
-    );
+    return mergeProps(filterDOMProps(p as Record<string, unknown>, { labelable: true }), {
+      "aria-label": ariaLabel,
+      "aria-details": p["aria-details"],
+    });
   };
 
   return {
@@ -81,16 +75,13 @@ export function createBreadcrumbs(
  * Provides accessibility implementation for an individual breadcrumb item.
  */
 export function createBreadcrumbItem(
-  props: MaybeAccessor<AriaBreadcrumbItemProps> = {}
+  props: MaybeAccessor<AriaBreadcrumbItemProps> = {},
 ): BreadcrumbItemAria {
   const getProps = () => access(props);
 
   const isCurrent = () => getProps().isCurrent ?? false;
   const isDisabled = () => getProps().isDisabled ?? false;
-  const elementType = () => getProps().elementType ?? 'a';
-
-  // Check if element is a heading
-  const isHeading = () => /^h[1-6]$/.test(elementType());
+  const elementType = () => getProps().elementType ?? "a";
 
   // Use createLink for base link behavior
   // Current items are treated as disabled (can't navigate to current page)
@@ -102,7 +93,7 @@ export function createBreadcrumbItem(
       return elementType();
     },
     get href() {
-      return getProps().href;
+      return isCurrent() ? undefined : getProps().href;
     },
     get target() {
       return getProps().target;
@@ -140,14 +131,17 @@ export function createBreadcrumbItem(
     get autoFocus() {
       return getProps().autoFocus;
     },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
+    get "aria-label"() {
+      return getProps()["aria-label"];
     },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
     },
-    get 'aria-describedby'() {
-      return getProps()['aria-describedby'];
+    get "aria-describedby"() {
+      return getProps()["aria-describedby"];
+    },
+    get "aria-details"() {
+      return getProps()["aria-details"];
     },
   });
 
@@ -155,29 +149,21 @@ export function createBreadcrumbItem(
     const p = getProps();
     const current = isCurrent();
 
-    // Start with link props (unless it's a heading)
-    let baseProps: Record<string, unknown> = isHeading() ? {} : linkProps;
+    // Start with link props, forwarding id if provided
+    let baseProps: Record<string, unknown> = p.id ? mergeProps(linkProps, { id: p.id }) : linkProps;
 
     // Add aria-current for current page
     if (current) {
-      const ariaCurrent = p['aria-current'] ?? 'page';
+      const ariaCurrent = p["aria-current"] ?? "page";
       baseProps = mergeProps(baseProps, {
-        'aria-current': ariaCurrent,
+        "aria-current": ariaCurrent,
       });
-
-      // Adjust tabIndex for current item
-      // If autoFocus is true, we want the item focusable
-      if (p.autoFocus) {
-        baseProps = mergeProps(baseProps, {
-          tabIndex: -1,
-        });
-      }
     }
 
     // Add aria-disabled for disabled items
     if (isDisabled()) {
       baseProps = mergeProps(baseProps, {
-        'aria-disabled': true,
+        "aria-disabled": true,
       });
     }
 

package/src/breadcrumbs/index.ts

@@ -5,4 +5,4 @@ export {
   type BreadcrumbsAria,
   type AriaBreadcrumbItemProps,
   type BreadcrumbItemAria,
-} from './createBreadcrumbs';
+} from "./createBreadcrumbs";