@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/utils/createDescription.ts

@@ -23,28 +23,16 @@
  * ```
  */
 
-import { createSignal, createEffect, onCleanup, type Accessor } from 'solid-js';
-import { isServer } from 'solid-js/web';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, createEffect, onCleanup, type Accessor } from "solid-js";
+import { isServer } from "solid-js/web";
 
 export interface DescriptionProps {
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
 }
 
-// ============================================
-// STATE
-// ============================================
-
 let descriptionId = 0;
 const descriptionNodes = new Map<string, { refCount: number; element: Element }>();
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Creates an invisible description element and returns aria-describedby props.
  *
@@ -62,7 +50,6 @@ const descriptionNodes = new Map<string, { refCount: number; element: Element }>
  * ```
  */
 export function createDescription(description: Accessor<string | undefined>): DescriptionProps {
-  // SSR: return empty object
   if (isServer) {
     return {};
   }
@@ -80,26 +67,23 @@ export function createDescription(description: Accessor<string | undefined>): De
     let node = descriptionNodes.get(desc);
 
     if (!node) {
-      // Create new description element
       const newId = `solidaria-description-${descriptionId++}`;
       setId(newId);
 
-      const element = document.createElement('div');
+      const element = document.createElement("div");
       element.id = newId;
-      element.style.display = 'none';
+      element.style.display = "none";
       element.textContent = desc;
       document.body.appendChild(element);
 
       node = { refCount: 0, element };
       descriptionNodes.set(desc, node);
     } else {
-      // Reuse existing element
       setId(node.element.id);
     }
 
     node.refCount++;
 
-    // Cleanup when description changes or component unmounts
     onCleanup(() => {
       if (node && --node.refCount === 0) {
         node.element.remove();
@@ -108,9 +92,8 @@ export function createDescription(description: Accessor<string | undefined>): De
     });
   });
 
-  // Return reactive props object
   return {
-    get 'aria-describedby'() {
+    get "aria-describedby"() {
       const desc = description();
       return desc ? id() : undefined;
     },

package/src/utils/dom.ts

@@ -54,7 +54,7 @@ export function nodeContains(parent: Node | null, child: Node | null): boolean {
  */
 export function getEventTarget<T extends EventTarget>(event: Event): T | null {
   // Use composedPath to get the real target when using Shadow DOM
-  if (typeof event.composedPath === 'function') {
+  if (typeof event.composedPath === "function") {
     const path = event.composedPath();
     if (path.length > 0) {
       return path[0] as T;
@@ -63,34 +63,153 @@ export function getEventTarget<T extends EventTarget>(event: Event): T | null {
   return event.target as T | null;
 }
 
-/**
- * Checks if an element is a valid focusable element.
- */
-export function isFocusable(element: Element): boolean {
-  // Check if element is disabled
-  if ((element as HTMLInputElement).disabled) {
+// Ports @react-aria/utils `isElementVisible`/`isFocusable`/`isTabbable` (v3.34.1,
+// the version paired with our pinned RAC 1.19.0) so focusability matches upstream:
+// a candidate must match the focusable selector AND not be inside an `inert`
+// subtree AND be visible (unless `skipVisibilityCheck`). The previous `isFocusable`
+// was a simplified tagName/tabindex check with no visibility or `inert` filtering.
+// Owner-window lookups go through `getOwnerWindow`, which falls back to the global
+// window, so these stay robust on detached documents (`defaultView === null`).
+
+const supportsCheckVisibility =
+  typeof Element !== "undefined" && "checkVisibility" in Element.prototype;
+
+// Solid clones templates with the document that is global at creation time, so a
+// node portaled into another document (e.g. an iframe) keeps its original realm's
+// prototype even though `getOwnerWindow` now resolves to the other document's
+// window. Upstream React creates portal nodes with the container's `ownerDocument`,
+// so its single `instanceof getOwnerWindow(element)` check suffices; we also accept
+// the global realm's constructors so cross-document focus scopes still recognize
+// real elements. In the common same-realm case this is identical to upstream.
+function isHTMLOrSVGElement(element: Element): element is HTMLElement | SVGElement {
+  const windowObject = getOwnerWindow(element);
+  return (
+    element instanceof windowObject.HTMLElement ||
+    element instanceof windowObject.SVGElement ||
+    (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) ||
+    (typeof SVGElement !== "undefined" && element instanceof SVGElement)
+  );
+}
+
+function isStyleVisible(element: Element): boolean {
+  if (!isHTMLOrSVGElement(element)) {
     return false;
   }
 
-  // Check native focusable elements
-  const tagName = element.tagName.toLowerCase();
-  if (['input', 'select', 'textarea', 'button', 'a', 'area'].includes(tagName)) {
-    // For anchor elements, they must have href to be focusable
-    if (tagName === 'a' || tagName === 'area') {
-      return element.hasAttribute('href');
-    }
-    return true;
+  const { display, visibility } = element.style;
+
+  let isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse";
+
+  if (isVisible) {
+    const { getComputedStyle } = getOwnerWindow(element);
+    const { display: computedDisplay, visibility: computedVisibility } = getComputedStyle(element);
+
+    isVisible =
+      computedDisplay !== "none" &&
+      computedVisibility !== "hidden" &&
+      computedVisibility !== "collapse";
   }
 
-  // Check for tabIndex
-  const tabIndex = element.getAttribute('tabindex');
-  if (tabIndex != null && tabIndex !== '-1') {
-    return true;
+  return isVisible;
+}
+
+function isAttributeVisible(element: Element, childElement?: Element): boolean {
+  return (
+    !element.hasAttribute("hidden") &&
+    // Ignore HiddenSelect when tree walking.
+    !element.hasAttribute("data-react-aria-prevent-focus") &&
+    (element.nodeName === "DETAILS" && childElement && childElement.nodeName !== "SUMMARY"
+      ? element.hasAttribute("open")
+      : true)
+  );
+}
+
+/**
+ * Whether an element is visible, and so eligible for focus. Adapted from
+ * @react-aria/utils, which adapts testing-library/jest-dom and
+ * vue-test-utils-next (MIT): uses `checkVisibility` when supported, otherwise
+ * walks computed style and visibility-affecting attributes up the ancestor chain.
+ */
+export function isElementVisible(element: Element, childElement?: Element): boolean {
+  if (supportsCheckVisibility) {
+    return (
+      element.checkVisibility({ visibilityProperty: true }) &&
+      !element.closest("[data-react-aria-prevent-focus]")
+    );
   }
 
-  // Check for contenteditable
-  if (element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') !== 'false') {
-    return true;
+  return (
+    element.nodeName !== "#comment" &&
+    isStyleVisible(element) &&
+    isAttributeVisible(element, childElement) &&
+    (!element.parentElement || isElementVisible(element.parentElement, element))
+  );
+}
+
+const focusableElements = [
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "a[href]",
+  "area[href]",
+  "summary",
+  "iframe",
+  "object",
+  "embed",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable^="false"])',
+  "permission",
+];
+
+const FOCUSABLE_ELEMENT_SELECTOR =
+  focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
+
+focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
+
+/**
+ * Checks if an element is a valid focusable element: it matches the focusable
+ * selector, is not inside an `inert` subtree, and is visible. A negative tabindex
+ * is programmatically focusable (matched here) but not tabbable. `skipVisibilityCheck`
+ * lets callers (e.g. the press-path `preventFocus` ancestor walk) skip the
+ * `isElementVisible` step, which also avoids touching layout on detached documents.
+ */
+export function isFocusable(
+  element: Element,
+  options?: { skipVisibilityCheck?: boolean },
+): boolean {
+  return (
+    element.matches(FOCUSABLE_ELEMENT_SELECTOR) &&
+    !isInert(element) &&
+    (options?.skipVisibilityCheck || isElementVisible(element))
+  );
+}
+
+/**
+ * Checks if an element is tabbable (reachable via the Tab key): focusable,
+ * visible, not inert, and not `tabindex="-1"`.
+ */
+export function isTabbable(element: Element): boolean {
+  return (
+    element.matches(TABBABLE_ELEMENT_SELECTOR) && isElementVisible(element) && !isInert(element)
+  );
+}
+
+function isInert(element: Element): boolean {
+  let node: Element | null = element;
+  while (node != null) {
+    // Realm-tolerant HTMLElement check (see isHTMLOrSVGElement): Solid-portaled
+    // nodes keep their creating realm's prototype, so also accept the global one.
+    const isHTMLElement =
+      node instanceof getOwnerWindow(node).HTMLElement ||
+      (typeof HTMLElement !== "undefined" && node instanceof HTMLElement);
+    if (isHTMLElement && (node as HTMLElement).inert) {
+      return true;
+    }
+
+    node = node.parentElement;
   }
 
   return false;
@@ -103,16 +222,16 @@ export function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Elemen
   const { key, code } = event;
   const element = currentTarget as HTMLElement;
   const tagName = element.tagName.toLowerCase();
-  const role = element.getAttribute('role');
+  const role = element.getAttribute("role");
 
   // Only accept Enter and Space
-  const isActivationKey = key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space';
+  const isActivationKey = key === "Enter" || key === " " || key === "Spacebar" || code === "Space";
   if (!isActivationKey) {
     return false;
   }
 
   // Text inputs should handle their own keyboard events
-  if (tagName === 'textarea') {
+  if (tagName === "textarea") {
     return false;
   }
 
@@ -122,13 +241,13 @@ export function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Elemen
   }
 
   // Links should only respond to Enter, not Space
-  const isLink = role === 'link' || (!role && isHTMLAnchorLink(element));
-  if (isLink && key !== 'Enter') {
+  const isLink = role === "link" || (!role && isHTMLAnchorLink(element));
+  if (isLink && key !== "Enter") {
     return false;
   }
 
   // Input elements have specific key handling
-  if (tagName === 'input') {
+  if (tagName === "input") {
     return isValidInputKey(element as HTMLInputElement, key);
   }
 
@@ -142,14 +261,24 @@ export function isValidInputKey(target: HTMLInputElement, key: string): boolean
   const type = target.type.toLowerCase();
 
   // Checkbox and radio only respond to Space
-  if (type === 'checkbox' || type === 'radio') {
-    return key === ' ' || key === 'Spacebar';
+  if (type === "checkbox" || type === "radio") {
+    return key === " " || key === "Spacebar";
   }
 
   // Text-like inputs handle their own keyboard events
   const textInputTypes = [
-    'text', 'search', 'url', 'tel', 'email', 'password',
-    'date', 'month', 'week', 'time', 'datetime-local', 'number'
+    "text",
+    "search",
+    "url",
+    "tel",
+    "email",
+    "password",
+    "date",
+    "month",
+    "week",
+    "time",
+    "datetime-local",
+    "number",
   ];
   if (textInputTypes.includes(type)) {
     return false;
@@ -162,34 +291,18 @@ export function isValidInputKey(target: HTMLInputElement, key: string): boolean
  * Checks if an element is an HTML anchor link (has href attribute).
  */
 export function isHTMLAnchorLink(target: Element): boolean {
-  return target.tagName === 'A' && target.hasAttribute('href');
+  return target.tagName === "A" && target.hasAttribute("href");
 }
 
 /**
  * Whether to prevent default on keyboard events for this element.
  */
 export function shouldPreventDefaultKeyboard(target: Element, key: string): boolean {
-  const tagName = target.tagName.toLowerCase();
-
-  // Never prevent default on inputs - they handle their own behavior
-  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
-    return false;
+  if (target instanceof HTMLInputElement) {
+    return !isValidInputKey(target, key);
   }
 
-  // Don't prevent default on links for Enter (native navigation)
-  if ((tagName === 'a' || target.getAttribute('role') === 'link') && key === 'Enter') {
-    return false;
-  }
-
-  // Buttons with submit/reset type should not prevent default
-  if (tagName === 'button') {
-    const type = (target as HTMLButtonElement).type;
-    if (type === 'submit' || type === 'reset') {
-      return false;
-    }
-  }
-
-  return true;
+  return shouldPreventDefaultUp(target);
 }
 
 /**
@@ -199,19 +312,19 @@ export function shouldPreventDefaultUp(target: Element): boolean {
   const tagName = target.tagName.toLowerCase();
 
   // Never prevent default on form elements
-  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
     return false;
   }
 
   // Don't prevent default on links
-  if (tagName === 'a' || target.getAttribute('role') === 'link') {
+  if (tagName === "a" || target.getAttribute("role") === "link") {
     return false;
   }
 
   // Buttons with submit/reset type should not prevent default
-  if (tagName === 'button') {
+  if (tagName === "button") {
     const type = (target as HTMLButtonElement).type;
-    if (type === 'submit' || type === 'reset') {
+    if (type === "submit" || type === "reset") {
       return false;
     }
   }
@@ -230,15 +343,15 @@ export function openLink(target: HTMLAnchorElement, event: Event, allowOpener =
   // Handle modifier keys for open-in-new-tab behavior
   const keyEvent = event as KeyboardEvent;
   const shouldOpenInNewTab =
-    linkTarget === '_blank' ||
+    linkTarget === "_blank" ||
     keyEvent?.metaKey ||
     keyEvent?.ctrlKey ||
     keyEvent?.shiftKey ||
     keyEvent?.altKey;
 
   if (shouldOpenInNewTab) {
-    const features = !allowOpener && rel?.includes('noopener') ? 'noopener' : undefined;
-    window.open(href, linkTarget || '_blank', features);
+    const features = !allowOpener && rel?.includes("noopener") ? "noopener" : undefined;
+    window.open(href, linkTarget || "_blank", features);
   } else {
     window.location.href = href;
   }
@@ -248,10 +361,6 @@ export function openLink(target: HTMLAnchorElement, event: Event, allowOpener =
 
 (openLink as { isOpening?: boolean }).isOpening = false;
 
-// ============================================
-// Scroll utilities
-// ============================================
-
 /**
  * Checks if an element is scrollable based on its overflow style.
  * @param node - The element to check
@@ -291,6 +400,30 @@ export function getScrollParent(node: Element, checkForOverflow?: boolean): Elem
   return scrollableNode || document.scrollingElement || document.documentElement;
 }
 
+/**
+ * Gets every scrollable ancestor of an element, from the nearest up to (and
+ * including) the document scrolling element.
+ * @param node - The starting element
+ * @param checkForOverflow - If true, only include parents that actually overflow
+ */
+export function getScrollParents(node: Element, checkForOverflow?: boolean): Element[] {
+  const parentElements: Element[] = [];
+  const root = document.scrollingElement || document.documentElement;
+  let current: Element | null = node;
+
+  while (current) {
+    if (isScrollable(current, checkForOverflow)) {
+      parentElements.push(current);
+    }
+    if (current === root) {
+      break;
+    }
+    current = current.parentElement;
+  }
+
+  return parentElements;
+}
+
 /**
  * Checks if an element will open a virtual keyboard when focused.
  * Used for iOS Safari scroll handling.
@@ -303,25 +436,89 @@ export function willOpenKeyboard(target: Element | null): boolean {
   const tagName = target.tagName.toLowerCase();
 
   // Inputs that open keyboard (not all input types do)
-  if (tagName === 'input') {
+  if (tagName === "input") {
     const type = (target as HTMLInputElement).type.toLowerCase();
     // These input types open the keyboard
     const keyboardTypes = [
-      'text', 'search', 'url', 'tel', 'email', 'password',
-      'date', 'month', 'week', 'time', 'datetime-local', 'number'
+      "text",
+      "search",
+      "url",
+      "tel",
+      "email",
+      "password",
+      "date",
+      "month",
+      "week",
+      "time",
+      "datetime-local",
+      "number",
     ];
     return keyboardTypes.includes(type);
   }
 
   // Textareas always open keyboard
-  if (tagName === 'textarea') {
+  if (tagName === "textarea") {
     return true;
   }
 
   // Contenteditable elements open keyboard
-  if (target.hasAttribute('contenteditable') && target.getAttribute('contenteditable') !== 'false') {
+  if (
+    target.hasAttribute("contenteditable") &&
+    target.getAttribute("contenteditable") !== "false"
+  ) {
     return true;
   }
 
   return false;
 }
+
+/**
+ * Returns the deepest active element, descending through open shadow roots.
+ * Mirrors @react-aria/utils' `getActiveElement`.
+ */
+export function getActiveElement(doc: Document = document): Element | null {
+  let activeElement = doc.activeElement;
+  while (activeElement?.shadowRoot?.activeElement) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+
+/**
+ * Whether the (deepest) active element is `element` or is contained within it.
+ * Mirrors @react-aria/utils' `isFocusWithin`.
+ */
+export function isFocusWithin(element: Element): boolean {
+  const activeElement = getActiveElement(getOwnerDocument(element));
+  return !!activeElement && nodeContains(element, activeElement);
+}
+
+/**
+ * Creates a `TreeWalker` that visits the focusable (or, when `tabbable`, the
+ * tabbable) descendants of `root`, skipping invisible and inert elements.
+ * Mirrors @react-aria/focus's `getFocusableTreeWalker`, minus the focus-scope
+ * containment filter (we don't model nested scopes here). Used to treat a
+ * selectable collection as a single tab stop.
+ */
+export function getFocusableTreeWalker(
+  root: Element,
+  opts?: { tabbable?: boolean; from?: Node },
+): TreeWalker {
+  const accept = (node: Element) => (opts?.tabbable ? isTabbable(node) : isFocusable(node));
+  const walker = getOwnerDocument(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(node) {
+      // Skip nodes inside the optional starting node.
+      if (opts?.from?.contains(node)) {
+        return NodeFilter.FILTER_REJECT;
+      }
+      if (accept(node as Element)) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      return NodeFilter.FILTER_SKIP;
+    },
+  });
+  if (opts?.from) {
+    walker.currentNode = opts.from;
+  }
+  return walker;
+}

package/src/utils/env.ts

@@ -4,17 +4,17 @@
  * Compatible with Node.js and Vite environments.
  */
 
-// Type-safe access to import.meta.env (Vite) and process.env
-type ImportMetaWithEnv = ImportMeta & { env?: Record<string, unknown> & { DEV?: boolean; PROD?: boolean } };
+type ImportMetaWithEnv = ImportMeta & {
+  env?: Record<string, unknown> & { DEV?: boolean; PROD?: boolean };
+};
 type ProcessLike = { env?: Record<string, string | undefined> };
 
 function getEnvVar(key: string): string | undefined {
-  // Check Vite's import.meta.env
   const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
-  if (importMetaEnv && typeof importMetaEnv[key] === 'string') {
+  if (importMetaEnv && typeof importMetaEnv[key] === "string") {
     return importMetaEnv[key] as string;
   }
-  // Check Node.js process.env via globalThis
+
   const processEnv = (globalThis as typeof globalThis & { process?: ProcessLike }).process?.env;
   if (processEnv) {
     return processEnv[key];
@@ -26,30 +26,28 @@ function getEnvVar(key: string): string | undefined {
  * Check if we're running in a test environment.
  */
 export function isTestEnv(): boolean {
-  return getEnvVar('NODE_ENV') === 'test';
+  return getEnvVar("NODE_ENV") === "test";
 }
 
 /**
  * Check if we're running in a development environment (not production).
  */
 export function isDevEnv(): boolean {
-  // Check Vite's DEV flag
   const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
   if (importMetaEnv?.DEV === true) {
     return true;
   }
-  const nodeEnv = getEnvVar('NODE_ENV');
-  return nodeEnv !== 'production';
+  const nodeEnv = getEnvVar("NODE_ENV");
+  return nodeEnv !== "production";
 }
 
 /**
  * Check if we're running in production.
  */
 export function isProdEnv(): boolean {
-  // Check Vite's PROD flag
   const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
   if (importMetaEnv?.PROD === true) {
     return true;
   }
-  return getEnvVar('NODE_ENV') === 'production';
+  return getEnvVar("NODE_ENV") === "production";
 }

package/src/utils/events.ts

@@ -3,7 +3,7 @@
  * Based on @react-aria/utils event utilities.
  */
 
-import { isAndroid } from './platform';
+import { isAndroid } from "./platform";
 
 /**
  * Checks if a click event was generated from a virtual source like a screen reader.
@@ -11,14 +11,14 @@ import { isAndroid } from './platform';
  */
 export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
   // JAWS/NVDA with Firefox.
-  if ((event as PointerEvent).pointerType === '' && event.isTrusted) {
+  if ((event as PointerEvent).pointerType === "" && event.isTrusted) {
     return true;
   }
 
   // Android TalkBack's detail value varies depending on the event listener providing the event.
   // If pointerType is defined, event is from a click listener.
   if (isAndroid() && (event as PointerEvent).pointerType) {
-    return event.type === 'click' && (event as MouseEvent).buttons === 1;
+    return event.type === "click" && (event as MouseEvent).buttons === 1;
   }
 
   return event.detail === 0 && !(event as PointerEvent).pointerType;
@@ -40,7 +40,7 @@ export function isVirtualPointerEvent(event: PointerEvent): boolean {
       event.height === 1 &&
       event.pressure === 0 &&
       event.detail === 0 &&
-      event.pointerType === 'mouse')
+      event.pointerType === "mouse")
   );
 }
 
@@ -81,7 +81,7 @@ export function chain<T extends (...args: any[]) => any>(
 ): T {
   return ((...args: Parameters<T>) => {
     for (const callback of callbacks) {
-      if (typeof callback === 'function') {
+      if (typeof callback === "function") {
         callback(...args);
       }
     }
@@ -93,12 +93,12 @@ export function chain<T extends (...args: any[]) => any>(
  * Used for synthetic events where target needs to be modified.
  */
 export function setEventTarget<T extends Event>(event: T, target: EventTarget): void {
-  Object.defineProperty(event, 'target', {
+  Object.defineProperty(event, "target", {
     value: target,
     writable: false,
     configurable: true,
   });
-  Object.defineProperty(event, 'currentTarget', {
+  Object.defineProperty(event, "currentTarget", {
     value: target,
     writable: false,
     configurable: true,