@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/meter/createMeter.ts

@@ -1,75 +0,0 @@
-/**
- * Meter hook for Solidaria
- *
- * Provides the accessibility implementation for a meter component.
- * Meters represent a quantity within a known range, or a fractional value.
- * Unlike progress bars, meters represent a current value rather than progress toward a goal.
- *
- * This is a port of @react-aria/meter's useMeter hook.
- */
-
-import { createProgressBar, type AriaProgressBarProps } from '../progress/createProgressBar';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaMeterProps extends Omit<AriaProgressBarProps, 'isIndeterminate'> {
-  /** The current value (controlled). */
-  value?: number;
-  /** The smallest value allowed for the input. @default 0 */
-  minValue?: number;
-  /** The largest value allowed for the input. @default 100 */
-  maxValue?: number;
-  /** The content to display as the value's label (e.g. 1 of 4). */
-  valueLabel?: string;
-  /** The display format of the value label. */
-  formatOptions?: Intl.NumberFormatOptions;
-  /** The content to display as the label. */
-  label?: string;
-  /** An accessibility label for this item. */
-  '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 MeterAria {
-  /** Props for the meter container element. */
-  meterProps: Record<string, unknown>;
-  /** Props for the meter's visual label element (if any). */
-  labelProps: Record<string, unknown>;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the accessibility implementation for a meter component.
- * Meters represent a quantity within a known range, or a fractional value.
- */
-export function createMeter(props: AriaMeterProps = {}): MeterAria {
-  // Reuse progress bar implementation
-  const { progressBarProps, labelProps } = createProgressBar(props);
-
-  return {
-    get meterProps() {
-      return {
-        ...progressBarProps,
-        // Use the meter role if available, but fall back to progressbar if not
-        // Chrome currently falls back from meter automatically, and Firefox
-        // does not support meter at all. Safari 13+ seems to support meter properly.
-        // https://bugs.chromium.org/p/chromium/issues/detail?id=944542
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1460378
-        role: 'meter progressbar',
-      };
-    },
-    get labelProps() {
-      return labelProps;
-    },
-  };
-}

package/src/meter/index.ts

@@ -1 +0,0 @@
-export { createMeter, type AriaMeterProps, type MeterAria } from './createMeter';

package/src/numberfield/createNumberField.ts

@@ -1,268 +0,0 @@
-/**
- * Provides the behavior and accessibility implementation for a number field.
- * Based on @react-aria/numberfield useNumberField.
- */
-
-import { type JSX, createMemo } from 'solid-js';
-import { createLabel } from '../label/createLabel';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { NumberFieldState } from '@proyecto-viviana/solid-stately';
-
-export interface AriaNumberFieldProps {
-  /** A label for the number field. */
-  label?: JSX.Element;
-  /** An accessible label for the number field. */
-  'aria-label'?: string;
-  /** The element ID that labels the number field. */
-  'aria-labelledby'?: string;
-  /** The element ID that describes the number field. */
-  'aria-describedby'?: string;
-  /** Whether the number field is disabled. */
-  isDisabled?: boolean;
-  /** Whether the number field is read-only. */
-  isReadOnly?: boolean;
-  /** Whether the number field is required. */
-  isRequired?: boolean;
-  /** Whether the number field is invalid. */
-  isInvalid?: boolean;
-  /** A description for the number field. */
-  description?: JSX.Element;
-  /** An error message for the number field. */
-  errorMessage?: JSX.Element;
-  /** The ID of the number field. */
-  id?: string;
-  /** Whether to auto-focus the input. */
-  autoFocus?: boolean;
-  /** The name for the form input. */
-  name?: string;
-}
-
-export interface NumberFieldAria {
-  /** Props for the label element. */
-  labelProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the input element group. */
-  groupProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the input element. */
-  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  /** Props for the increment button. */
-  incrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-  /** Props for the decrement button. */
-  decrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-  /** Props for the description element. */
-  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the error message element. */
-  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-/**
- * Provides the behavior and accessibility implementation for a number field.
- */
-export function createNumberField(
-  props: MaybeAccessor<AriaNumberFieldProps>,
-  state: NumberFieldState,
-  inputRef?: () => HTMLInputElement | null
-): NumberFieldAria {
-  const getProps = () => access(props);
-  const id = createId(getProps().id);
-
-  // Generate IDs for associated elements
-  const inputId = `${id}-input`;
-  const incrementId = `${id}-increment`;
-  const decrementId = `${id}-decrement`;
-  const descriptionId = `${id}-description`;
-  const errorMessageId = `${id}-error`;
-
-  // Label handling
-  const { labelProps, fieldProps } = createLabel({
-    get id() {
-      return inputId;
-    },
-    get label() {
-      return getProps().label;
-    },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
-    },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
-    },
-    labelElementType: 'span',
-  });
-
-  // Get the label text for button aria-labels
-  const getLabelText = (): string => {
-    const p = getProps();
-    if (p['aria-label']) return p['aria-label'];
-    if (typeof p.label === 'string') return p.label;
-    return 'value';
-  };
-
-  // Filter DOM props
-  const domProps = createMemo(() =>
-    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true })
-  );
-
-  // Handle input change
-  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
-    const value = e.currentTarget.value;
-    if (state.validate(value)) {
-      state.setInputValue(value);
-    }
-  };
-
-  // Handle input blur - commit value
-  const onInputBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = () => {
-    state.commit();
-  };
-
-  // Handle keyboard events
-  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {
-    const p = getProps();
-    if (p.isDisabled || p.isReadOnly) return;
-
-    switch (e.key) {
-      case 'ArrowUp':
-        e.preventDefault();
-        state.increment();
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        state.decrement();
-        break;
-      case 'PageUp':
-        e.preventDefault();
-        state.incrementToMax();
-        break;
-      case 'PageDown':
-        e.preventDefault();
-        state.decrementToMin();
-        break;
-      case 'Home':
-        e.preventDefault();
-        state.decrementToMin();
-        break;
-      case 'End':
-        e.preventDefault();
-        state.incrementToMax();
-        break;
-      case 'Enter':
-        state.commit();
-        break;
-    }
-  };
-
-  // Handle increment button
-  const onIncrementPress = () => {
-    state.increment();
-    // Return focus to input
-    inputRef?.()?.focus();
-  };
-
-  // Handle decrement button
-  const onDecrementPress = () => {
-    state.decrement();
-    // Return focus to input
-    inputRef?.()?.focus();
-  };
-
-  // Build aria-describedby
-  const getAriaDescribedBy = () => {
-    const p = getProps();
-    const parts: string[] = [];
-    if (p['aria-describedby']) parts.push(p['aria-describedby']);
-    if (p.description) parts.push(descriptionId);
-    if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);
-    return parts.length > 0 ? parts.join(' ') : undefined;
-  };
-
-  return {
-    get labelProps() {
-      return labelProps as JSX.HTMLAttributes<HTMLElement>;
-    },
-    get groupProps() {
-      return {
-        role: 'group',
-        'aria-disabled': getProps().isDisabled || undefined,
-      } as JSX.HTMLAttributes<HTMLElement>;
-    },
-    get inputProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled ?? state.isDisabled();
-      const isReadOnly = p.isReadOnly ?? state.isReadOnly();
-
-      return mergeProps(
-        domProps(),
-        fieldProps as Record<string, unknown>,
-        {
-          id: inputId,
-          type: 'text',
-          inputMode: 'decimal' as const,
-          autoComplete: 'off',
-          autoCorrect: 'off',
-          spellcheck: false,
-          role: 'spinbutton',
-          'aria-valuenow': isNaN(state.numberValue()) ? undefined : state.numberValue(),
-          'aria-valuemin': state.minValue(),
-          'aria-valuemax': state.maxValue(),
-          'aria-valuetext': isNaN(state.numberValue()) ? undefined : state.inputValue(),
-          'aria-invalid': p.isInvalid || undefined,
-          'aria-required': p.isRequired || undefined,
-          'aria-describedby': getAriaDescribedBy(),
-          disabled: isDisabled || undefined,
-          readOnly: isReadOnly || undefined,
-          value: state.inputValue(),
-          onChange: onInputChange,
-          onBlur: onInputBlur,
-          onKeyDown,
-          name: p.name,
-          autoFocus: p.autoFocus,
-        } as Record<string, unknown>
-      ) as JSX.InputHTMLAttributes<HTMLInputElement>;
-    },
-    get incrementButtonProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled ?? state.isDisabled();
-      const canIncrement = state.canIncrement();
-
-      return {
-        id: incrementId,
-        type: 'button' as const,
-        tabIndex: -1, // Exclude from tab order
-        'aria-label': `Increase ${getLabelText()}`,
-        'aria-controls': inputId,
-        disabled: isDisabled || !canIncrement,
-        onClick: onIncrementPress,
-        onMouseDown: (e: MouseEvent) => e.preventDefault(), // Prevent focus
-      } as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    },
-    get decrementButtonProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled ?? state.isDisabled();
-      const canDecrement = state.canDecrement();
-
-      return {
-        id: decrementId,
-        type: 'button' as const,
-        tabIndex: -1, // Exclude from tab order
-        'aria-label': `Decrease ${getLabelText()}`,
-        'aria-controls': inputId,
-        disabled: isDisabled || !canDecrement,
-        onClick: onDecrementPress,
-        onMouseDown: (e: MouseEvent) => e.preventDefault(), // Prevent focus
-      } as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    },
-    get descriptionProps() {
-      return {
-        id: descriptionId,
-      } as JSX.HTMLAttributes<HTMLElement>;
-    },
-    get errorMessageProps() {
-      return {
-        id: errorMessageId,
-      } as JSX.HTMLAttributes<HTMLElement>;
-    },
-  };
-}

package/src/numberfield/index.ts

@@ -1,5 +0,0 @@
-export {
-  createNumberField,
-  type AriaNumberFieldProps,
-  type NumberFieldAria,
-} from './createNumberField';

package/src/overlays/ariaHideOutside.ts

@@ -1,219 +0,0 @@
-/**
- * Hides all elements in the DOM outside the given targets from screen readers.
- * Based on @react-aria/overlays ariaHideOutside.
- */
-
-import { getOwnerWindow } from '../utils';
-
-const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
-
-export interface AriaHideOutsideOptions {
-  /** The root element to start hiding from. */
-  root?: Element;
-  /** Whether to use the `inert` attribute instead of `aria-hidden`. */
-  shouldUseInert?: boolean;
-}
-
-// Keeps a ref count of all hidden elements. Added to when hiding an element, and
-// subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
-const refCountMap = new WeakMap<Element, number>();
-
-interface ObserverWrapper {
-  visibleNodes: Set<Element>;
-  hiddenNodes: Set<Element>;
-  observe: () => void;
-  disconnect: () => void;
-}
-
-const observerStack: ObserverWrapper[] = [];
-
-/**
- * Hides all elements in the DOM outside the given targets from screen readers using aria-hidden,
- * and returns a function to revert these changes. In addition, changes to the DOM are watched
- * and new elements outside the targets are automatically hidden.
- * @param targets - The elements that should remain visible.
- * @param options - Options for hiding behavior.
- * @returns - A function to restore all hidden elements.
- */
-export function ariaHideOutside(
-  targets: Element[],
-  options?: AriaHideOutsideOptions | Element
-): () => void {
-  const windowObj = getOwnerWindow(targets?.[0]);
-  const opts = options instanceof windowObj.Element ? { root: options } : options;
-  const root = opts?.root ?? document.body;
-  const shouldUseInert = opts?.shouldUseInert && supportsInert;
-  const visibleNodes = new Set<Element>(targets);
-  const hiddenNodes = new Set<Element>();
-
-  const getHidden = (element: Element): boolean => {
-    return shouldUseInert && element instanceof windowObj.HTMLElement
-      ? element.inert
-      : element.getAttribute('aria-hidden') === 'true';
-  };
-
-  const setHidden = (element: Element, hidden: boolean): void => {
-    if (shouldUseInert && element instanceof windowObj.HTMLElement) {
-      element.inert = hidden;
-    } else if (hidden) {
-      element.setAttribute('aria-hidden', 'true');
-    } else {
-      element.removeAttribute('aria-hidden');
-      if (element instanceof windowObj.HTMLElement) {
-        // We only ever call setHidden with hidden = false when the nodeCount is 1 aka
-        // we are trying to make the element visible to screen readers again, so remove inert as well
-        element.inert = false;
-      }
-    }
-  };
-
-  const hide = (node: Element): void => {
-    let refCount = refCountMap.get(node) ?? 0;
-
-    // If already aria-hidden, and the ref count is zero, then this element
-    // was already hidden and there's nothing for us to do.
-    if (getHidden(node) && refCount === 0) {
-      return;
-    }
-
-    if (refCount === 0) {
-      setHidden(node, true);
-    }
-
-    hiddenNodes.add(node);
-    refCountMap.set(node, refCount + 1);
-  };
-
-  const walk = (walkRoot: Element): void => {
-    // Keep live announcer and top layer elements (e.g. toasts) visible.
-    for (const element of walkRoot.querySelectorAll('[data-live-announcer], [data-solidaria-top-layer]')) {
-      visibleNodes.add(element);
-    }
-
-    const acceptNode = (node: Element): number => {
-      // Skip this node and its children if it is one of the target nodes, or a live announcer.
-      // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
-      // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
-      // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
-      if (
-        hiddenNodes.has(node) ||
-        visibleNodes.has(node) ||
-        (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
-      ) {
-        return NodeFilter.FILTER_REJECT;
-      }
-
-      // Skip this node but continue to children if one of the targets is inside the node.
-      for (const target of visibleNodes) {
-        if (node.contains(target)) {
-          return NodeFilter.FILTER_SKIP;
-        }
-      }
-
-      return NodeFilter.FILTER_ACCEPT;
-    };
-
-    const walker = document.createTreeWalker(walkRoot, NodeFilter.SHOW_ELEMENT, { acceptNode });
-
-    // TreeWalker does not include the root.
-    const acceptRoot = acceptNode(walkRoot);
-    if (acceptRoot === NodeFilter.FILTER_ACCEPT) {
-      hide(walkRoot);
-    }
-
-    if (acceptRoot !== NodeFilter.FILTER_REJECT) {
-      let node = walker.nextNode() as Element;
-      while (node != null) {
-        hide(node);
-        node = walker.nextNode() as Element;
-      }
-    }
-  };
-
-  // If there is already a MutationObserver listening from a previous call,
-  // disconnect it so the new one takes over.
-  if (observerStack.length) {
-    observerStack[observerStack.length - 1].disconnect();
-  }
-
-  walk(root);
-
-  const observer = new MutationObserver((changes) => {
-    for (const change of changes) {
-      if (change.type !== 'childList') {
-        continue;
-      }
-
-      // If the parent element of the added nodes is not within one of the targets,
-      // and not already inside a hidden node, hide all of the new children.
-      if (![...visibleNodes, ...hiddenNodes].some((node) => node.contains(change.target))) {
-        for (const node of change.addedNodes) {
-          if (
-            (node instanceof HTMLElement || node instanceof SVGElement) &&
-            (node.dataset.liveAnnouncer === 'true' || node.dataset.solidariaTopLayer === 'true')
-          ) {
-            visibleNodes.add(node);
-          } else if (node instanceof Element) {
-            walk(node);
-          }
-        }
-      }
-    }
-  });
-
-  observer.observe(root, { childList: true, subtree: true });
-
-  const observerWrapper: ObserverWrapper = {
-    visibleNodes,
-    hiddenNodes,
-    observe() {
-      observer.observe(root, { childList: true, subtree: true });
-    },
-    disconnect() {
-      observer.disconnect();
-    },
-  };
-
-  observerStack.push(observerWrapper);
-
-  return (): void => {
-    observer.disconnect();
-
-    for (const node of hiddenNodes) {
-      const count = refCountMap.get(node);
-      if (count == null) {
-        continue;
-      }
-      if (count === 1) {
-        setHidden(node, false);
-        refCountMap.delete(node);
-      } else {
-        refCountMap.set(node, count - 1);
-      }
-    }
-
-    // Remove this observer from the stack, and start the previous one.
-    if (observerWrapper === observerStack[observerStack.length - 1]) {
-      observerStack.pop();
-      if (observerStack.length) {
-        observerStack[observerStack.length - 1].observe();
-      }
-    } else {
-      observerStack.splice(observerStack.indexOf(observerWrapper), 1);
-    }
-  };
-}
-
-/**
- * Keeps an element visible when aria-hiding is active.
- * Used for elements like live regions that should remain accessible.
- */
-export function keepVisible(element: Element): (() => void) | undefined {
-  const observer = observerStack[observerStack.length - 1];
-  if (observer && !observer.visibleNodes.has(element)) {
-    observer.visibleNodes.add(element);
-    return () => {
-      observer.visibleNodes.delete(element);
-    };
-  }
-}