@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/interactions/index.ts

@@ -0,0 +1,78 @@
+// Press interactions
+export { createPress, type CreatePressProps, type PressResult } from './createPress';
+export { PressEvent, type IPressEvent, type PressEventType } from './PressEvent';
+
+// Long press interactions
+export {
+  createLongPress,
+  type LongPressProps,
+  type LongPressResult,
+  type LongPressEvent,
+} from './createLongPress';
+
+// Move interactions
+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 {
+  createFocusWithin,
+  type FocusWithinProps,
+  type FocusWithinResult,
+} from './createFocusWithin';
+export {
+  createFocusable,
+  FocusableContext,
+  type CreateFocusableProps,
+  type FocusableResult,
+  type FocusableContextValue,
+  type FocusableProviderProps,
+  type FocusableProps,
+  type FocusableDOMProps,
+} from './createFocusable';
+export { FocusableProvider } from './FocusableProvider';
+export {
+  createFocusRing,
+  type FocusRingProps,
+  type FocusRingResult,
+} from './createFocusRing';
+
+// Interaction modality
+export {
+  createInteractionModality,
+  createFocusVisible,
+  createFocusVisibleListener,
+  addWindowFocusTracking,
+  isFocusVisible,
+  getInteractionModality,
+  setInteractionModality,
+  getPointerType,
+  setupGlobalFocusListeners,
+  addModalityListener,
+  useIsKeyboardFocused,
+  type Modality,
+  type PointerType,
+  type FocusVisibleProps,
+  type FocusVisibleResult,
+  type FocusVisibleHandler,
+  type InteractionModalityResult,
+} from './createInteractionModality';
+
+// Hover interactions
+export {
+  createHover,
+  type CreateHoverProps,
+  type HoverProps,
+  type HoverResult,
+  type HoverEvent,
+  type HoverEvents,
+} from './createHover';
+
+// Keyboard interactions
+export {
+  createKeyboard,
+  type CreateKeyboardProps,
+  type KeyboardResult,
+  type KeyboardEvents,
+  type KeyboardEvent,
+} from './createKeyboard';

package/src/label/createField.ts

@@ -0,0 +1,145 @@
+/**
+ * Field hook for Solidaria
+ *
+ * Provides the accessibility implementation for input fields.
+ * Fields accept user input, gain context from their label, and may display
+ * a description or error message.
+ *
+ * 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
+// ============================================
+
+export interface HelpTextProps {
+  /** A description for the field. Provides a hint such as specific requirements for what to choose. */
+  description?: JSX.Element;
+  /** An error message for the field. */
+  errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);
+}
+
+export interface ValidationResult {
+  /** Whether the input value is invalid. */
+  isInvalid: boolean;
+  /** The current error messages for the input if it is invalid, otherwise an empty array. */
+  validationErrors: string[];
+  /** The native validity state for the input. */
+  validationDetails: ValidityState;
+}
+
+export interface Validation<T> {
+  /** Whether the input value is invalid. */
+  isInvalid?: boolean;
+  /** Whether the input is required before form submission. */
+  isRequired?: boolean;
+  /** A function that returns an error message if a given value is invalid. */
+  validate?: (value: T) => string | string[] | true | null | undefined;
+}
+
+export interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, 'isRequired'> {}
+
+export interface FieldAria extends LabelAria {
+  /** Props for the description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the accessibility implementation for input fields.
+ * Fields accept user input, gain context from their label, and may display
+ * a description or error message.
+ *
+ * @param props - Props for the Field.
+ */
+export function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {
+  const getProps = () => access(props);
+
+  const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);
+
+  // Generate IDs for description and error message
+  const descriptionId = createId();
+  const errorMessageId = createId();
+
+  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
+    if (!description && !errorMessage && !isInvalid) {
+      return {};
+    }
+
+    return {
+      id: descriptionId,
+    };
+  };
+
+  const getErrorMessageProps = (): FieldAria['errorMessageProps'] => {
+    const { errorMessage, isInvalid } = getProps();
+
+    // Only include ID if there's an error message and the field is invalid
+    if (!errorMessage && !isInvalid) {
+      return {};
+    }
+
+    return {
+      id: errorMessageId,
+    };
+  };
+
+  const getFieldProps = (): AriaLabelingProps & DOMProps => {
+    const { description, errorMessage, isInvalid } = getProps();
+
+    const describedByIds: string[] = [];
+
+    // Add description ID if description exists
+    if (description) {
+      describedByIds.push(descriptionId);
+    }
+
+    // Add error message ID if field is invalid and error message exists
+    // Use aria-describedby for error message because aria-errormessage is unsupported
+    // using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+    if (isInvalid && errorMessage) {
+      describedByIds.push(errorMessageId);
+    }
+
+    // Add any existing aria-describedby from props
+    const existingDescribedBy = getProps()['aria-describedby'];
+    if (existingDescribedBy) {
+      describedByIds.push(existingDescribedBy);
+    }
+
+    const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+
+    return mergeProps(baseLabelFieldProps, {
+      'aria-describedby': ariaDescribedBy,
+    }) as AriaLabelingProps & DOMProps;
+  };
+
+  return {
+    get labelProps() {
+      return labelProps;
+    },
+    get fieldProps() {
+      return getFieldProps();
+    },
+    get descriptionProps() {
+      return getDescriptionProps();
+    },
+    get errorMessageProps() {
+      return getErrorMessageProps();
+    },
+  };
+}

package/src/label/createLabel.ts

@@ -0,0 +1,117 @@
+/**
+ * Label hook for Solidaria
+ *
+ * Provides the accessibility implementation for labels and their associated elements.
+ * Labels provide context for user inputs.
+ *
+ * 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
+// ============================================
+
+export interface AriaLabelingProps {
+  /** Defines a string value that labels the current element. */
+  'aria-label'?: string;
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby'?: string;
+  /** Identifies the element (or elements) that describes the object. */
+  'aria-describedby'?: string;
+  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
+  'aria-details'?: string;
+}
+
+export interface LabelableProps {
+  /** The content to display as the label. */
+  label?: JSX.Element;
+}
+
+export interface DOMProps {
+  /** The element's unique identifier. */
+  id?: string;
+}
+
+export interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
+  /**
+   * The HTML element used to render the label, e.g. 'label', or 'span'.
+   * @default 'label'
+   */
+  labelElementType?: 'label' | 'span' | 'div';
+}
+
+export interface LabelAria {
+  /** Props to apply to the label container element. */
+  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement> | JSX.HTMLAttributes<HTMLSpanElement>;
+  /** Props to apply to the field container element being labeled. */
+  fieldProps: AriaLabelingProps & DOMProps;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the accessibility implementation for labels and their associated elements.
+ * Labels provide context for user inputs.
+ *
+ * @param props - The props for labels and fields.
+ */
+export function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria {
+  const getProps = () => access(props);
+
+  const id = createId(getProps().id);
+  const labelId = createId();
+
+  const getLabelProps = (): LabelAria['labelProps'] => {
+    const { label, labelElementType = 'label' } = getProps();
+
+    if (!label) {
+      return {};
+    }
+
+    return {
+      id: labelId,
+      ...(labelElementType === 'label' ? { for: id } : {}),
+    };
+  };
+
+  const getFieldProps = (): LabelAria['fieldProps'] => {
+    const {
+      label,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+    } = getProps();
+
+    let labelledBy = ariaLabelledby;
+
+    if (label) {
+      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'
+      );
+    }
+
+    return createLabels({
+      id,
+      'aria-label': ariaLabel,
+      'aria-labelledby': labelledBy,
+    });
+  };
+
+  return {
+    get labelProps() {
+      return getLabelProps();
+    },
+    get fieldProps() {
+      return getFieldProps();
+    },
+  };
+}

package/src/label/createLabels.ts

@@ -0,0 +1,50 @@
+/**
+ * Labels utility for Solidaria
+ *
+ * Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+ *
+ * This is a 1:1 port of @react-aria/utils's useLabels hook.
+ */
+
+import { createId } from '../ssr';
+import type { AriaLabelingProps, DOMProps } from './createLabel';
+
+/**
+ * Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+ *
+ * @param props - Aria label props.
+ * @param defaultLabel - Default value for aria-label when not present.
+ */
+export function createLabels(
+  props: DOMProps & AriaLabelingProps,
+  defaultLabel?: string
+): DOMProps & AriaLabelingProps {
+  let {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy,
+  } = props;
+
+  // Generate an ID if not provided
+  id = createId(id);
+
+  // If there is both an aria-label and aria-labelledby,
+  // combine them by pointing to the element itself.
+  if (labelledBy && label) {
+    const ids = new Set([id, ...labelledBy.trim().split(/\s+/)]);
+    labelledBy = [...ids].join(' ');
+  } else if (labelledBy) {
+    labelledBy = labelledBy.trim().split(/\s+/).join(' ');
+  }
+
+  // If no labels are provided, use the default
+  if (!label && !labelledBy && defaultLabel) {
+    label = defaultLabel;
+  }
+
+  return {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy,
+  };
+}

package/src/label/index.ts

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