@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/interactions/index.ts

@@ -1,6 +1,6 @@
 // Press interactions
-export { createPress, type CreatePressProps, type PressResult } from './createPress';
-export { PressEvent, type IPressEvent, type PressEventType } from './PressEvent';
+export { createPress, type CreatePressProps, type PressResult } from "./createPress";
+export { PressEvent, type IPressEvent, type PressEventType } from "./PressEvent";
 
 // Long press interactions
 export {
@@ -8,18 +8,30 @@ export {
   type LongPressProps,
   type LongPressResult,
   type LongPressEvent,
-} from './createLongPress';
+} from "./createLongPress";
 
 // Move interactions
-export { createMove, type MoveEvents, type MoveResult, type MoveStartEvent, type MoveMoveEvent, type MoveEndEvent } from './createMove';
+export {
+  createMove,
+  type MoveEvents,
+  type MoveResult,
+  type MoveStartEvent,
+  type MoveMoveEvent,
+  type MoveEndEvent,
+} from "./createMove";
 
 // Focus interactions
-export { createFocus, type CreateFocusProps, type FocusResult, type FocusEvents } from './createFocus';
+export {
+  createFocus,
+  type CreateFocusProps,
+  type FocusResult,
+  type FocusEvents,
+} from "./createFocus";
 export {
   createFocusWithin,
   type FocusWithinProps,
   type FocusWithinResult,
-} from './createFocusWithin';
+} from "./createFocusWithin";
 export {
   createFocusable,
   FocusableContext,
@@ -29,13 +41,9 @@ export {
   type FocusableProviderProps,
   type FocusableProps,
   type FocusableDOMProps,
-} from './createFocusable';
-export { FocusableProvider } from './FocusableProvider';
-export {
-  createFocusRing,
-  type FocusRingProps,
-  type FocusRingResult,
-} from './createFocusRing';
+} from "./createFocusable";
+export { FocusableProvider } from "./FocusableProvider";
+export { createFocusRing, type FocusRingProps, type FocusRingResult } from "./createFocusRing";
 
 // Interaction modality
 export {
@@ -56,7 +64,7 @@ export {
   type FocusVisibleResult,
   type FocusVisibleHandler,
   type InteractionModalityResult,
-} from './createInteractionModality';
+} from "./createInteractionModality";
 
 // Hover interactions
 export {
@@ -66,7 +74,7 @@ export {
   type HoverResult,
   type HoverEvent,
   type HoverEvents,
-} from './createHover';
+} from "./createHover";
 
 // Keyboard interactions
 export {
@@ -75,4 +83,4 @@ export {
   type KeyboardResult,
   type KeyboardEvents,
   type KeyboardEvent,
-} from './createKeyboard';
+} from "./createKeyboard";

package/src/label/createField.ts

@@ -8,15 +8,17 @@
  * This is a 1:1 port of @react-aria/label's useField hook.
  */
 
-import { JSX } from 'solid-js';
-import { createId } from '../ssr';
-import { createLabel, type LabelAriaProps, type LabelAria, type AriaLabelingProps, type DOMProps } from './createLabel';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { JSX } from "solid-js";
+import { createId } from "../ssr";
+import {
+  createLabel,
+  type LabelAriaProps,
+  type LabelAria,
+  type AriaLabelingProps,
+  type DOMProps,
+} from "./createLabel";
+import { mergeProps } from "../utils/mergeProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
 
 export interface HelpTextProps {
   /** A description for the field. Provides a hint such as specific requirements for what to choose. */
@@ -43,7 +45,8 @@ export interface Validation<T> {
   validate?: (value: T) => string | string[] | true | null | undefined;
 }
 
-export interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, 'isRequired'> {}
+export interface AriaFieldProps
+  extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, "isRequired"> {}
 
 export interface FieldAria extends LabelAria {
   /** Props for the description element, if any. */
@@ -52,10 +55,6 @@ export interface FieldAria extends LabelAria {
   errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for input fields.
  * Fields accept user input, gain context from their label, and may display
@@ -72,7 +71,7 @@ export function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {
   const descriptionId = createId();
   const errorMessageId = createId();
 
-  const getDescriptionProps = (): FieldAria['descriptionProps'] => {
+  const getDescriptionProps = (): FieldAria["descriptionProps"] => {
     const { description, errorMessage, isInvalid } = getProps();
 
     // Only include ID if description exists or there's an error message that might be shown
@@ -85,7 +84,7 @@ export function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {
     };
   };
 
-  const getErrorMessageProps = (): FieldAria['errorMessageProps'] => {
+  const getErrorMessageProps = (): FieldAria["errorMessageProps"] => {
     const { errorMessage, isInvalid } = getProps();
 
     // Only include ID if there's an error message and the field is invalid
@@ -116,15 +115,15 @@ export function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {
     }
 
     // Add any existing aria-describedby from props
-    const existingDescribedBy = getProps()['aria-describedby'];
+    const existingDescribedBy = getProps()["aria-describedby"];
     if (existingDescribedBy) {
       describedByIds.push(existingDescribedBy);
     }
 
-    const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+    const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : undefined;
 
     return mergeProps(baseLabelFieldProps, {
-      'aria-describedby': ariaDescribedBy,
+      "aria-describedby": ariaDescribedBy,
     }) as AriaLabelingProps & DOMProps;
   };
 

package/src/label/createLabel.ts

@@ -7,25 +7,21 @@
  * This is a 1:1 port of @react-aria/label's useLabel hook.
  */
 
-import { JSX } from 'solid-js';
-import { createId } from '../ssr';
-import { createLabels } from './createLabels';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { isDevEnv } from '../utils/env';
-
-// ============================================
-// TYPES
-// ============================================
+import { JSX } from "solid-js";
+import { createId } from "../ssr";
+import { createLabels } from "./createLabels";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import { isDevEnv } from "../utils/env";
 
 export interface AriaLabelingProps {
   /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
+  "aria-details"?: string;
 }
 
 export interface LabelableProps {
@@ -43,7 +39,7 @@ export interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingPr
    * The HTML element used to render the label, e.g. 'label', or 'span'.
    * @default 'label'
    */
-  labelElementType?: 'label' | 'span' | 'div';
+  labelElementType?: "label" | "span" | "div";
 }
 
 export interface LabelAria {
@@ -53,10 +49,6 @@ export interface LabelAria {
   fieldProps: AriaLabelingProps & DOMProps;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for labels and their associated elements.
  * Labels provide context for user inputs.
@@ -69,8 +61,8 @@ export function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria {
   const id = createId(getProps().id);
   const labelId = createId();
 
-  const getLabelProps = (): LabelAria['labelProps'] => {
-    const { label, labelElementType = 'label' } = getProps();
+  const getLabelProps = (): LabelAria["labelProps"] => {
+    const { label, labelElementType = "label" } = getProps();
 
     if (!label) {
       return {};
@@ -78,16 +70,12 @@ export function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria {
 
     return {
       id: labelId,
-      ...(labelElementType === 'label' ? { for: id } : {}),
+      ...(labelElementType === "label" ? { for: id } : {}),
     };
   };
 
-  const getFieldProps = (): LabelAria['fieldProps'] => {
-    const {
-      label,
-      'aria-labelledby': ariaLabelledby,
-      'aria-label': ariaLabel,
-    } = getProps();
+  const getFieldProps = (): LabelAria["fieldProps"] => {
+    const { label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel } = getProps();
 
     let labelledBy = ariaLabelledby;
 
@@ -95,14 +83,14 @@ export function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria {
       labelledBy = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
     } else if (!ariaLabelledby && !ariaLabel && isDevEnv()) {
       console.warn(
-        'If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility'
+        "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility",
       );
     }
 
     return createLabels({
       id,
-      'aria-label': ariaLabel,
-      'aria-labelledby': labelledBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
     });
   };
 

package/src/label/createLabels.ts

@@ -6,8 +6,8 @@
  * This is a 1:1 port of @react-aria/utils's useLabels hook.
  */
 
-import { createId } from '../ssr';
-import type { AriaLabelingProps, DOMProps } from './createLabel';
+import { createId } from "../ssr";
+import type { AriaLabelingProps, DOMProps } from "./createLabel";
 
 /**
  * Merges aria-label and aria-labelledby into aria-labelledby when both exist.
@@ -17,13 +17,9 @@ import type { AriaLabelingProps, DOMProps } from './createLabel';
  */
 export function createLabels(
   props: DOMProps & AriaLabelingProps,
-  defaultLabel?: string
+  defaultLabel?: string,
 ): DOMProps & AriaLabelingProps {
-  let {
-    id,
-    'aria-label': label,
-    'aria-labelledby': labelledBy,
-  } = props;
+  let { id, "aria-label": label, "aria-labelledby": labelledBy } = props;
 
   // Generate an ID if not provided
   id = createId(id);
@@ -32,9 +28,9 @@ export function createLabels(
   // combine them by pointing to the element itself.
   if (labelledBy && label) {
     const ids = new Set([id, ...labelledBy.trim().split(/\s+/)]);
-    labelledBy = [...ids].join(' ');
+    labelledBy = [...ids].join(" ");
   } else if (labelledBy) {
-    labelledBy = labelledBy.trim().split(/\s+/).join(' ');
+    labelledBy = labelledBy.trim().split(/\s+/).join(" ");
   }
 
   // If no labels are provided, use the default
@@ -44,7 +40,7 @@ export function createLabels(
 
   return {
     id,
-    'aria-label': label,
-    'aria-labelledby': labelledBy,
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
   };
 }

package/src/label/index.ts

@@ -1,19 +1,19 @@
-export { createLabel } from './createLabel';
+export { createLabel } from "./createLabel";
 export type {
   LabelAriaProps,
   LabelAria,
   AriaLabelingProps,
   LabelableProps,
   DOMProps,
-} from './createLabel';
+} from "./createLabel";
 
-export { createField } from './createField';
+export { createField } from "./createField";
 export type {
   AriaFieldProps,
   FieldAria,
   HelpTextProps,
   ValidationResult,
   Validation,
-} from './createField';
+} from "./createField";
 
-export { createLabels } from './createLabels';
+export { createLabels } from "./createLabels";

package/src/landmark/createLandmark.ts

@@ -8,25 +8,21 @@
  * The F6 key (or Shift+F6) cycles through all registered landmarks.
  */
 
-import type { JSX, Accessor } from 'solid-js';
-import { createEffect, onCleanup } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { filterDOMProps } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import type { JSX, Accessor } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import { filterDOMProps } from "../utils";
 
 /** ARIA landmark roles */
 export type AriaLandmarkRole =
-  | 'main'
-  | 'region'
-  | 'search'
-  | 'navigation'
-  | 'form'
-  | 'banner'
-  | 'contentinfo'
-  | 'complementary';
+  | "main"
+  | "region"
+  | "search"
+  | "navigation"
+  | "form"
+  | "banner"
+  | "contentinfo"
+  | "complementary";
 
 export interface AriaLandmarkProps {
   /** The ARIA landmark role. */
@@ -35,9 +31,9 @@ export interface AriaLandmarkProps {
    * A human-readable label for the landmark.
    * Required when multiple landmarks with the same role exist on a page.
    */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element(s) that labels the landmark. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The element's unique identifier. */
   id?: string;
   /**
@@ -63,10 +59,6 @@ export interface LandmarkController {
   navigate: (role: AriaLandmarkRole) => void;
 }
 
-// ============================================
-// INTERNAL: Landmark Entry
-// ============================================
-
 interface LandmarkEntry {
   ref: HTMLElement;
   role: AriaLandmarkRole;
@@ -75,10 +67,6 @@ interface LandmarkEntry {
   lastFocused?: HTMLElement;
 }
 
-// ============================================
-// LANDMARK MANAGER (Singleton)
-// ============================================
-
 /**
  * Manages all registered landmarks and handles F6 keyboard navigation.
  */
@@ -88,7 +76,7 @@ class LandmarkManager {
   private listening = false;
 
   constructor() {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       this.startListening();
     }
   }
@@ -97,12 +85,12 @@ class LandmarkManager {
     if (this.listening) return;
     this.listening = true;
 
-    window.addEventListener('keydown', this.handleKeyDown.bind(this), true);
+    window.addEventListener("keydown", this.handleKeyDown.bind(this), true);
   }
 
   private handleKeyDown(event: KeyboardEvent) {
     // F6 to navigate landmarks
-    if (event.key === 'F6') {
+    if (event.key === "F6") {
       event.preventDefault();
       if (event.shiftKey) {
         this.focusPrevious();
@@ -168,7 +156,7 @@ class LandmarkManager {
         const uniqueLabels = new Set(labels.filter(Boolean));
         if (uniqueLabels.size < group.length) {
           console.warn(
-            `Multiple landmarks with role "${role}" exist. Each should have a unique aria-label or aria-labelledby.`
+            `Multiple landmarks with role "${role}" exist. Each should have a unique aria-label or aria-labelledby.`,
           );
         }
       }
@@ -195,13 +183,12 @@ class LandmarkManager {
     this.currentIndex = this.findCurrentLandmarkIndex(activeElement);
 
     // Move to previous
-    this.currentIndex =
-      (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;
+    this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;
     this.focusLandmark(this.landmarks[this.currentIndex]);
   }
 
   focusMain(): void {
-    const main = this.landmarks.find((l) => l.role === 'main');
+    const main = this.landmarks.find((l) => l.role === "main");
     if (main) {
       this.focusLandmark(main);
     }
@@ -252,21 +239,21 @@ class LandmarkManager {
     }
 
     // Fallback: make the landmark itself focusable and focus it
-    if (!landmark.ref.hasAttribute('tabindex')) {
-      landmark.ref.setAttribute('tabindex', '-1');
+    if (!landmark.ref.hasAttribute("tabindex")) {
+      landmark.ref.setAttribute("tabindex", "-1");
     }
     landmark.ref.focus();
   }
 
   private findFirstFocusable(container: HTMLElement): HTMLElement | null {
     const focusableSelectors = [
-      'a[href]',
-      'button:not([disabled])',
-      'input:not([disabled])',
-      'select:not([disabled])',
-      'textarea:not([disabled])',
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
       '[tabindex]:not([tabindex="-1"])',
-    ].join(', ');
+    ].join(", ");
 
     return container.querySelector<HTMLElement>(focusableSelectors);
   }
@@ -291,10 +278,6 @@ function getLandmarkManager(): LandmarkManager {
   return landmarkManager;
 }
 
-// ============================================
-// CREATE LANDMARK
-// ============================================
-
 /**
  * Provides landmark navigation in an application.
  * Call this with a role and label to register a landmark navigable with F6.
@@ -318,7 +301,7 @@ function getLandmarkManager(): LandmarkManager {
  */
 export function createLandmark<T extends HTMLElement = HTMLElement>(
   props: MaybeAccessor<AriaLandmarkProps>,
-  ref: Accessor<T | undefined>
+  ref: Accessor<T | undefined>,
 ): LandmarkAria<T> {
   // Register with the landmark manager
   createEffect(() => {
@@ -329,7 +312,7 @@ export function createLandmark<T extends HTMLElement = HTMLElement>(
     const entry: LandmarkEntry = {
       ref: element,
       role: p.role,
-      label: p['aria-label'],
+      label: p["aria-label"],
       focus: p.focus,
     };
 
@@ -358,10 +341,6 @@ export function createLandmark<T extends HTMLElement = HTMLElement>(
   };
 }
 
-// ============================================
-// LANDMARK CONTROLLER
-// ============================================
-
 /**
  * Returns a controller for programmatic landmark navigation.
  *

package/src/landmark/index.ts

@@ -5,4 +5,4 @@ export {
   type AriaLandmarkProps,
   type LandmarkAria,
   type LandmarkController,
-} from './createLandmark';
+} from "./createLandmark";