@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/numberfield/createNumberField.ts

@@ -3,23 +3,25 @@
  * 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';
+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";
+import type { AriaButtonProps } from "../button/types";
+import type { PressEvent } from "../interactions";
 
 export interface AriaNumberFieldProps {
   /** A label for the number field. */
   label?: JSX.Element;
   /** An accessible label for the number field. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The element ID that labels the number field. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The element ID that describes the number field. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the number field is disabled. */
   isDisabled?: boolean;
   /** Whether the number field is read-only. */
@@ -66,9 +68,9 @@ export interface NumberFieldAria {
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
   /** Props for the increment button. */
-  incrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  incrementButtonProps: AriaButtonProps;
   /** Props for the decrement button. */
-  decrementButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  decrementButtonProps: AriaButtonProps;
   /** Props for the description element. */
   descriptionProps: JSX.HTMLAttributes<HTMLElement>;
   /** Props for the error message element. */
@@ -81,7 +83,7 @@ export interface NumberFieldAria {
 export function createNumberField(
   props: MaybeAccessor<AriaNumberFieldProps>,
   state: NumberFieldState,
-  inputRef?: () => HTMLInputElement | null
+  inputRef?: () => HTMLInputElement | null,
 ): NumberFieldAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -101,26 +103,42 @@ export function createNumberField(
     get label() {
       return getProps().label;
     },
-    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"];
     },
-    labelElementType: 'span',
+    // Upstream react-aria `useNumberField` → `useField` → `useLabel` with the DEFAULT
+    // `labelElementType: 'label'`: the S2 NumberField label is a native `<label htmlFor>`
+    // (verified against the shipped React DOM: `<label id for=inputId>`). This hardcoded
+    // `"span"` was a self-inflicted divergence — it dropped the `for` association and made
+    // `NumberFieldLabel` render a `<span>`. Reverted to `"label"` so `createLabel` emits
+    // `for: inputId` (the input still also carries `aria-labelledby`, exactly as upstream).
+    labelElementType: "label",
   });
 
-  // 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';
+  // Increment/decrement button labels — a 1:1 port of upstream `useNumberField`'s
+  // four-case logic. Upstream RAC's `NumberField` component feeds `useNumberField` a
+  // BOOLEAN slot for `label` (from `useSlot`), never the label string, so a visible
+  // label is NEVER concatenated into the button `aria-label`. Instead: with a visible
+  // label the button reads `aria-label: "Increase"` PLUS `aria-labelledby: "<selfId>
+  // <labelId>"`; only an explicit `aria-label` (and no visible label) changes the text
+  // (`"Increase <aria-label>"`). The prior `Increase ${getLabelText()}` was a
+  // self-inflicted divergence that produced "Increase Quantity" where S2 ships
+  // "Increase". `fieldLabel` mirrors upstream: `props['aria-label'] || ''` — the visible
+  // label string is intentionally excluded (it arrives as a boolean slot in RAC).
+  const fieldLabel = (): string => getProps()["aria-label"] ?? "";
+  const buttonLabelledBy = (): string | undefined => {
+    if (fieldLabel()) return undefined;
+    return getProps().label != null
+      ? (labelProps.id as string | undefined)
+      : getProps()["aria-labelledby"];
   };
 
   // Filter DOM props
   const domProps = createMemo(() =>
-    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true })
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true }),
   );
 
   // Handle input change
@@ -154,31 +172,31 @@ export function createNumberField(
     }
 
     switch (e.key) {
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
         state.increment();
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
         state.decrement();
         break;
-      case 'PageUp':
+      case "PageUp":
         e.preventDefault();
         state.incrementToMax();
         break;
-      case 'PageDown':
+      case "PageDown":
         e.preventDefault();
         state.decrementToMin();
         break;
-      case 'Home':
+      case "Home":
         e.preventDefault();
         state.decrementToMin();
         break;
-      case 'End':
+      case "End":
         e.preventDefault();
         state.incrementToMax();
         break;
-      case 'Enter':
+      case "Enter":
         state.commit();
         break;
     }
@@ -190,17 +208,88 @@ export function createNumberField(
     getProps().onKeyUp?.(e);
   };
 
-  // Handle increment button
-  const onIncrementPress = () => {
+  const onButtonPressStart = (e: PressEvent) => {
+    const input = inputRef?.();
+
+    // Keep existing input focus in place. This avoids hiding software keyboards
+    // and prevents a blur/refocus flicker when mouse pressing the steppers.
+    if (input && input.ownerDocument.activeElement === input) {
+      return;
+    }
+
+    if (e.pointerType === "mouse") {
+      input?.focus();
+    } else if (e.target instanceof HTMLElement) {
+      e.target.focus();
+    }
+  };
+
+  let incrementTouchPressUp = false;
+  let decrementTouchPressUp = false;
+
+  const onIncrementPressStart = (e: PressEvent) => {
+    if (e.pointerType !== "touch") {
+      state.increment();
+    } else {
+      incrementTouchPressUp = false;
+    }
+
+    onButtonPressStart(e);
+  };
+
+  const onIncrementPressUp = (e: PressEvent) => {
+    if (e.pointerType === "touch") {
+      incrementTouchPressUp = true;
+    }
+  };
+
+  const onIncrementPressEnd = (e: PressEvent) => {
+    if (e.pointerType === "touch" && incrementTouchPressUp) {
+      state.increment();
+    }
+
+    incrementTouchPressUp = false;
+  };
+  const onIncrementClick = (e: MouseEvent) => {
+    if (!state.canIncrement()) {
+      e.preventDefault();
+      return;
+    }
+
     state.increment();
-    // Return focus to input
     inputRef?.()?.focus();
   };
 
-  // Handle decrement button
-  const onDecrementPress = () => {
+  const onDecrementPressStart = (e: PressEvent) => {
+    if (e.pointerType !== "touch") {
+      state.decrement();
+    } else {
+      decrementTouchPressUp = false;
+    }
+
+    onButtonPressStart(e);
+  };
+
+  const onDecrementPressUp = (e: PressEvent) => {
+    if (e.pointerType === "touch") {
+      decrementTouchPressUp = true;
+    }
+  };
+
+  const onDecrementPressEnd = (e: PressEvent) => {
+    if (e.pointerType === "touch" && decrementTouchPressUp) {
+      state.decrement();
+    }
+
+    decrementTouchPressUp = false;
+  };
+  const onDecrementClick = (e: MouseEvent) => {
+    if (!state.canDecrement()) {
+      e.preventDefault();
+      return;
+    }
+
     state.decrement();
-    // Return focus to input
     inputRef?.()?.focus();
   };
 
@@ -208,10 +297,10 @@ export function createNumberField(
   const getAriaDescribedBy = () => {
     const p = getProps();
     const parts: string[] = [];
-    if (p['aria-describedby']) parts.push(p['aria-describedby']);
+    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 parts.length > 0 ? parts.join(" ") : undefined;
   };
 
   return {
@@ -220,9 +309,9 @@ export function createNumberField(
     },
     get groupProps() {
       return {
-        role: 'group',
-        'aria-disabled': getProps().isDisabled || undefined,
-        'aria-invalid': getProps().isInvalid || undefined,
+        role: "group",
+        "aria-disabled": getProps().isDisabled || undefined,
+        "aria-invalid": getProps().isInvalid || undefined,
       } as JSX.HTMLAttributes<HTMLElement>;
     },
     get inputProps() {
@@ -235,22 +324,42 @@ export function createNumberField(
         fieldProps as Record<string, unknown>,
         {
           id: inputId,
-          type: 'text',
-          inputMode: 'decimal' as const,
-          autoComplete: 'off',
-          autoCorrect: 'off',
+          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(),
+          // Upstream routes the input through useFormattedTextField → useTextField →
+          // useFocusable, which "always set[s] a tabIndex so that Safari allows
+          // focusing native buttons and inputs": `excludeFromTabOrder ? -1 : 0`, then
+          // `undefined` when disabled. The input is never excluded, so the rendered
+          // DOM carries `tabindex="0"` (absent only when disabled). We hand-roll
+          // inputProps (see the spinbutton-override note below) so we must replay that
+          // one focusable prop here to stay byte-identical to React's tab order.
+          tabIndex: isDisabled ? undefined : 0,
+          // Upstream useNumberField wraps useSpinButton but deliberately
+          // overrides its output: role=spinbutton can't be focused with
+          // VoiceOver, so the input is a plain textbox (inside the role=group
+          // wrapper above) and every aria-value* is dropped in favour of
+          // aria-roledescription. The formatted value is still announced via the
+          // input's own value. Mirror that contract instead of leaking the raw
+          // spinbutton semantics.
+          //
+          // The string MUST match upstream's `stringFormatter.format('numberField')`,
+          // whose en-US value is `Number field` (capitalised) — not a lowercase
+          // hand-roll. Full locale routing via `createStringFormatter` (as
+          // `createDateField` does) is tracked as `intl-roledescription-hardcodes`
+          // (also covers the ColorArea/ColorSwatch English hardcodes); this keeps the
+          // en-US roledescription byte-identical to React Spectrum in the meantime.
+          "aria-roledescription": "Number field",
+          "aria-invalid": p.isInvalid || undefined,
+          "aria-required": p.isRequired || undefined,
+          "aria-describedby": getAriaDescribedBy(),
           disabled: isDisabled || undefined,
           readOnly: isReadOnly || undefined,
+          required: p.isRequired || undefined,
           value: state.inputValue(),
+          onInput: onInputChange,
           onChange: onInputChange,
           onFocus: onInputFocus,
           onBlur: onInputBlur,
@@ -262,40 +371,56 @@ export function createNumberField(
           name: p.name,
           form: p.form,
           autoFocus: p.autoFocus,
-        } as Record<string, unknown>
+        } as Record<string, unknown>,
       ) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
     get incrementButtonProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled ?? state.isDisabled();
-      const canIncrement = state.canIncrement();
-
+      const labelledBy = buttonLabelledBy();
       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>;
+        type: "button",
+        "aria-label": `Increase ${fieldLabel()}`.trim(),
+        "aria-labelledby": labelledBy ? `${incrementId} ${labelledBy}` : undefined,
+        "aria-controls": inputId,
+        excludeFromTabOrder: true,
+        preventFocusOnPress: true,
+        allowFocusWhenDisabled: true,
+        get disabled() {
+          return !state.canIncrement();
+        },
+        tabIndex: -1,
+        get isDisabled() {
+          return !state.canIncrement();
+        },
+        onClick: onIncrementClick,
+        onPressStart: onIncrementPressStart,
+        onPressUp: onIncrementPressUp,
+        onPressEnd: onIncrementPressEnd,
+      } as AriaButtonProps;
     },
     get decrementButtonProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled ?? state.isDisabled();
-      const canDecrement = state.canDecrement();
-
+      const labelledBy = buttonLabelledBy();
       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>;
+        type: "button",
+        "aria-label": `Decrease ${fieldLabel()}`.trim(),
+        "aria-labelledby": labelledBy ? `${decrementId} ${labelledBy}` : undefined,
+        "aria-controls": inputId,
+        excludeFromTabOrder: true,
+        preventFocusOnPress: true,
+        allowFocusWhenDisabled: true,
+        get disabled() {
+          return !state.canDecrement();
+        },
+        tabIndex: -1,
+        get isDisabled() {
+          return !state.canDecrement();
+        },
+        onClick: onDecrementClick,
+        onPressStart: onDecrementPressStart,
+        onPressUp: onDecrementPressUp,
+        onPressEnd: onDecrementPressEnd,
+      } as AriaButtonProps;
     },
     get descriptionProps() {
       return {

package/src/numberfield/index.ts

@@ -2,4 +2,4 @@ export {
   createNumberField,
   type AriaNumberFieldProps,
   type NumberFieldAria,
-} from './createNumberField';
+} from "./createNumberField";

package/src/overlays/ariaHideOutside.ts

@@ -3,9 +3,9 @@
  * Based on @react-aria/overlays ariaHideOutside.
  */
 
-import { getOwnerWindow } from '../utils';
+import { getOwnerWindow } from "../utils";
 
-const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
+const supportsInert = typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
 
 export interface AriaHideOutsideOptions {
   /** The root element to start hiding from. */
@@ -37,7 +37,7 @@ const observerStack: ObserverWrapper[] = [];
  */
 export function ariaHideOutside(
   targets: Element[],
-  options?: AriaHideOutsideOptions | Element
+  options?: AriaHideOutsideOptions | Element,
 ): () => void {
   const windowObj = getOwnerWindow(targets?.[0]);
   const opts = options instanceof windowObj.Element ? { root: options } : options;
@@ -49,16 +49,16 @@ export function ariaHideOutside(
   const getHidden = (element: Element): boolean => {
     return shouldUseInert && element instanceof windowObj.HTMLElement
       ? element.inert
-      : element.getAttribute('aria-hidden') === 'true';
+      : 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');
+      element.setAttribute("aria-hidden", "true");
     } else {
-      element.removeAttribute('aria-hidden');
+      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
@@ -86,7 +86,9 @@ export function ariaHideOutside(
 
   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]')) {
+    for (const element of walkRoot.querySelectorAll(
+      "[data-live-announcer], [data-solidaria-top-layer]",
+    )) {
       visibleNodes.add(element);
     }
 
@@ -98,7 +100,9 @@ export function ariaHideOutside(
       if (
         hiddenNodes.has(node) ||
         visibleNodes.has(node) ||
-        (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
+        (node.parentElement &&
+          hiddenNodes.has(node.parentElement) &&
+          node.parentElement.getAttribute("role") !== "row")
       ) {
         return NodeFilter.FILTER_REJECT;
       }
@@ -140,7 +144,7 @@ export function ariaHideOutside(
 
   const observer = new MutationObserver((changes) => {
     for (const change of changes) {
-      if (change.type !== 'childList') {
+      if (change.type !== "childList") {
         continue;
       }
 
@@ -150,7 +154,7 @@ export function ariaHideOutside(
         for (const node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&
-            (node.dataset.liveAnnouncer === 'true' || node.dataset.solidariaTopLayer === 'true')
+            (node.dataset.liveAnnouncer === "true" || node.dataset.solidariaTopLayer === "true")
           ) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {

package/src/overlays/createInteractOutside.ts

@@ -3,8 +3,8 @@
  * Based on @react-aria/interactions useInteractOutside.
  */
 
-import { createEffect, onCleanup } from 'solid-js';
-import { getOwnerDocument } from '../utils';
+import { createEffect, onCleanup } from "solid-js";
+import { getOwnerDocument } from "../utils";
 
 export interface InteractOutsideProps {
   /** Reference to the element to detect interactions outside of. */
@@ -51,7 +51,7 @@ export function createInteractOutside(props: InteractOutsideProps): void {
     };
 
     // Use pointer events if available. Otherwise, fall back to mouse and touch events.
-    if (typeof PointerEvent !== 'undefined') {
+    if (typeof PointerEvent !== "undefined") {
       const onClick = (e: PointerEvent) => {
         if (isPointerDown && isValidEvent(e, ref)) {
           triggerInteractOutside(e);
@@ -61,12 +61,12 @@ export function createInteractOutside(props: InteractOutsideProps): void {
 
       // Use click instead of pointerup to avoid Android Chrome issue
       // https://issues.chromium.org/issues/40732224
-      documentObject.addEventListener('pointerdown', onPointerDown as EventListener, true);
-      documentObject.addEventListener('click', onClick as EventListener, true);
+      documentObject.addEventListener("pointerdown", onPointerDown as EventListener, true);
+      documentObject.addEventListener("click", onClick as EventListener, true);
 
       onCleanup(() => {
-        documentObject.removeEventListener('pointerdown', onPointerDown as EventListener, true);
-        documentObject.removeEventListener('click', onClick as EventListener, true);
+        documentObject.removeEventListener("pointerdown", onPointerDown as EventListener, true);
+        documentObject.removeEventListener("click", onClick as EventListener, true);
       });
     } else {
       // Fallback for environments without PointerEvent (mainly tests)
@@ -105,24 +105,27 @@ export function createInteractOutside(props: InteractOutsideProps): void {
         }
       };
 
-      documentObject.addEventListener('mousedown', onMouseDown as EventListener, true);
-      documentObject.addEventListener('mouseup', onMouseUp as EventListener, true);
-      documentObject.addEventListener('touchstart', onTouchStart as EventListener, true);
-      documentObject.addEventListener('touchend', onTouchEnd as EventListener, true);
+      documentObject.addEventListener("mousedown", onMouseDown as EventListener, true);
+      documentObject.addEventListener("mouseup", onMouseUp as EventListener, true);
+      documentObject.addEventListener("touchstart", onTouchStart as EventListener, true);
+      documentObject.addEventListener("touchend", onTouchEnd as EventListener, true);
 
       onCleanup(() => {
-        documentObject.removeEventListener('mousedown', onMouseDown as EventListener, true);
-        documentObject.removeEventListener('mouseup', onMouseUp as EventListener, true);
-        documentObject.removeEventListener('touchstart', onTouchStart as EventListener, true);
-        documentObject.removeEventListener('touchend', onTouchEnd as EventListener, true);
+        documentObject.removeEventListener("mousedown", onMouseDown as EventListener, true);
+        documentObject.removeEventListener("mouseup", onMouseUp as EventListener, true);
+        documentObject.removeEventListener("touchstart", onTouchStart as EventListener, true);
+        documentObject.removeEventListener("touchend", onTouchEnd as EventListener, true);
       });
     }
   });
 }
 
-function isValidEvent(event: PointerEvent | MouseEvent | TouchEvent, ref: () => Element | null): boolean {
+function isValidEvent(
+  event: PointerEvent | MouseEvent | TouchEvent,
+  ref: () => Element | null,
+): boolean {
   // Only handle primary button clicks
-  if ('button' in event && event.button > 0) {
+  if ("button" in event && event.button > 0) {
     return false;
   }
 
@@ -133,7 +136,7 @@ function isValidEvent(event: PointerEvent | MouseEvent | TouchEvent, ref: () =>
       return false;
     }
     // If the target is within a top layer element (e.g. toasts), ignore
-    if ((event.target as Element).closest?.('[data-solidaria-top-layer]')) {
+    if ((event.target as Element).closest?.("[data-solidaria-top-layer]")) {
       return false;
     }
   }