@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/toolbar/createToolbar.ts

@@ -8,7 +8,7 @@
 import { createSignal, onMount, onCleanup, type Accessor } from "solid-js";
 import { type MaybeAccessor, access } from "../utils";
 import { useLocale } from "../i18n";
-import { getOwnerDocument, isFocusable } from "../utils";
+import { getOwnerDocument, isFocusable, isTabbable } from "../utils";
 import { focusSafely } from "../utils/focus";
 
 export type Orientation = "horizontal" | "vertical";
@@ -26,7 +26,7 @@ export interface ToolbarAria {
   /** Props for the toolbar container element. */
   toolbarProps: {
     role: "toolbar" | "group";
-    "aria-orientation": Orientation;
+    "aria-orientation"?: Orientation;
     "aria-label"?: string;
     "aria-labelledby"?: string;
     tabIndex?: number;
@@ -50,17 +50,6 @@ interface FocusManager {
   focusLast(opts?: FocusManagerOptions): HTMLElement | null;
 }
 
-function isTabbable(element: Element): boolean {
-  if (!isFocusable(element)) {
-    return false;
-  }
-  const tabIndex = element.getAttribute("tabindex");
-  if (tabIndex != null) {
-    return parseInt(tabIndex, 10) >= 0;
-  }
-  return true;
-}
-
 function getFocusableElements(root: Element, tabbable = false): HTMLElement[] {
   const elements: HTMLElement[] = [];
   const filter = tabbable ? isTabbable : isFocusable;
@@ -90,47 +79,6 @@ function getActiveElement(doc: Document): Element | null {
   return activeElement;
 }
 
-const TEXT_INPUT_TYPES = new Set([
-  "",
-  "text",
-  "search",
-  "url",
-  "tel",
-  "password",
-  "email",
-  "number",
-  "date",
-  "datetime-local",
-  "month",
-  "time",
-  "week",
-]);
-
-function isTextInputLikeElement(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) {
-    return false;
-  }
-
-  if (target.isContentEditable || !!target.closest('[contenteditable="true"]')) {
-    return true;
-  }
-
-  if (target.getAttribute("role") === "textbox") {
-    return true;
-  }
-
-  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
-    return true;
-  }
-
-  if (target instanceof HTMLInputElement) {
-    const type = target.type.toLowerCase();
-    return TEXT_INPUT_TYPES.has(type);
-  }
-
-  return false;
-}
-
 function createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {
   return {
     focusNext(opts: FocusManagerOptions = {}) {
@@ -292,23 +240,7 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
       return;
     }
 
-    // Let modified shortcuts pass through.
-    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
-      return;
-    }
-
-    // Text entry controls should keep arrow/home/end for caret/value navigation.
-    if (isTextInputLikeElement(target)) {
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowLeft":
-        case "ArrowDown":
-        case "ArrowUp":
-        case "Home":
-        case "End":
-          return;
-      }
-    }
+    const doc = getOwnerDocument(root);
 
     const dir = locale().direction;
     const isRTL = dir === "rtl";
@@ -349,18 +281,18 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
           handled = true;
         }
         break;
-      case "Home":
-        focusManager.focusFirst({ tabbable: true });
-        handled = true;
-        break;
-      case "End":
-        focusManager.focusLast({ tabbable: true });
-        handled = true;
-        break;
       case "Tab":
-        // Store the last focused element for re-entry
-        lastFocusedElement = e.target as Element;
-        break;
+        // Move focus to the first/last child so the browser's own Tab handling
+        // then carries focus OUT of the whole toolbar. Faithful to upstream
+        // useToolbar: there is no roving tabindex — every item stays tabbable,
+        // so a bare Tab would otherwise step to the next item instead of leaving.
+        lastFocusedElement = getActiveElement(doc);
+        if (e.shiftKey) {
+          focusManager.focusFirst({ tabbable: true });
+        } else {
+          focusManager.focusLast({ tabbable: true });
+        }
+        return;
     }
 
     if (handled) {
@@ -369,24 +301,36 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
     }
   };
 
-  // Focus handler - restore last focused element when re-entering
-  const onFocus = (e: FocusEvent) => {
+  // Record the last focused child when focus moves out of the toolbar.
+  const onBlur = (e: FocusEvent) => {
+    const root = toolbarRef;
+    if (!root) return;
     if (isInToolbar()) return;
 
-    // Only restore if focus is coming from outside the toolbar
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {
+      lastFocusedElement = e.target as Element;
+    }
+  };
+
+  // Restore focus to the last focused child when focus returns into the toolbar.
+  // If that element was removed, focus() is a no-op and the browser lands on the
+  // first/last child per direction — matching upstream useToolbar.
+  const onFocus = (e: FocusEvent) => {
     const root = toolbarRef;
     if (!root) return;
+    if (isInToolbar()) return;
 
-    const relatedTarget = e.relatedTarget as Element | null;
-
-    // If focus came from outside and we have a last focused element
+    const relatedTarget = e.relatedTarget as Node | null;
+    const target = e.target;
     if (
       lastFocusedElement &&
-      root.contains(lastFocusedElement) &&
-      (!relatedTarget || !root.contains(relatedTarget))
+      !(relatedTarget && root.contains(relatedTarget)) &&
+      target instanceof Node &&
+      root.contains(target)
     ) {
-      // Restore focus to the last focused element
       focusSafely(lastFocusedElement as HTMLElement);
+      lastFocusedElement = null;
     }
   };
 
@@ -394,13 +338,15 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
   const setRef = (el: HTMLElement) => {
     toolbarRef = el;
 
-    // Use capture phase for keyboard events
+    // Use capture phase so container handlers run before the focused child's.
     el.addEventListener("keydown", onKeyDown, true);
     el.addEventListener("focus", onFocus, true);
+    el.addEventListener("blur", onBlur, true);
 
     onCleanup(() => {
       el.removeEventListener("keydown", onKeyDown, true);
       el.removeEventListener("focus", onFocus, true);
+      el.removeEventListener("blur", onBlur, true);
     });
   };
 
@@ -410,14 +356,17 @@ export function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {
         return isInToolbar() ? "group" : "toolbar";
       },
       get "aria-orientation"() {
+        // Upstream useToolbar emits aria-orientation unconditionally, on the
+        // nested role="group" too — not only on the root role="toolbar".
         return orientation();
       },
       get "aria-label"() {
         return ariaLabel();
       },
       get "aria-labelledby"() {
-        // Only use aria-labelledby if no aria-label is provided
-        return ariaLabel() ? undefined : ariaLabelledby();
+        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.
+        // An explicit empty-string aria-label still suppresses labelledby.
+        return ariaLabel() == null ? ariaLabelledby() : undefined;
       },
       ref: setRef,
     },

package/src/tree/createTree.ts

@@ -3,11 +3,13 @@
  * Based on @react-aria/tree/useTree.
  */
 
-import { createMemo, type Accessor } from "solid-js";
+import { createEffect, createMemo, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
 import { createId } from "@proyecto-viviana/solid-stately";
 import type { TreeState, TreeCollection, Key } from "@proyecto-viviana/solid-stately";
 import type { AriaTreeProps, TreeAria } from "./types";
+import { scrollIntoViewport } from "../utils";
+import { getInteractionModality } from "../interactions/createInteractionModality";
 
 /**
  * Metadata stored for a tree instance.
@@ -15,6 +17,10 @@ import type { AriaTreeProps, TreeAria } from "./types";
 interface TreeData {
   /** The generated ID for the tree. */
   treeId: string;
+  /** How keyboard navigation behaves within row children. */
+  keyboardNavigationBehavior: "arrow" | "tab";
+  /** Text direction for row-child arrow navigation and tree expansion keys. */
+  direction: "ltr" | "rtl";
   /** Actions registered for the tree. */
   actions: {
     onAction?: (key: Key) => void;
@@ -35,13 +41,45 @@ export function getTreeData<T extends object, C extends TreeCollection<T>>(
   return treeDataMap.get(state);
 }
 
+/**
+ * Whether a key should be skipped during keyboard navigation. Disabled keys only
+ * block navigation under `disabledBehavior: "all"` (the default); under
+ * `"selection"` they remain focusable (selection is still blocked elsewhere).
+ * Mirrors `ListKeyboardDelegate.isDisabled` in React Aria.
+ */
+function isNavigationDisabled<T extends object, C extends TreeCollection<T>>(
+  state: TreeState<T, C>,
+  key: Key,
+): boolean {
+  return state.isDisabled(key) && state.disabledBehavior === "all";
+}
+
+/**
+ * Walks from `startKey` via `step` until reaching a key that is navigable (not
+ * disabled for navigation), mirroring React Aria's
+ * `ListKeyboardDelegate.findNextNonDisabled`. `getFirstKey`/`getLastKey` and the
+ * next/previous lookups all funnel through this so arrow keys, Home and End land
+ * on enabled rows only.
+ */
+function findNextNavigableKey<T extends object, C extends TreeCollection<T>>(
+  state: TreeState<T, C>,
+  startKey: Key | null,
+  step: (key: Key) => Key | null,
+): Key | null {
+  let key = startKey;
+  while (key != null && isNavigationDisabled(state, key)) {
+    key = step(key);
+  }
+  return key;
+}
+
 /**
  * Creates accessibility props for a tree.
  */
 export function createTree<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
   props: Accessor<AriaTreeProps>,
   state: Accessor<TreeState<T, C>>,
-  _ref: Accessor<HTMLDivElement | null>,
+  ref: Accessor<HTMLDivElement | null>,
 ): TreeAria {
   // Generate a unique ID for the tree
   const treeId = props().id ?? createId();
@@ -49,6 +87,12 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
   // Store tree data for child components
   const treeData: TreeData = {
     treeId,
+    get keyboardNavigationBehavior() {
+      return props().keyboardNavigationBehavior ?? "arrow";
+    },
+    get direction() {
+      return props().direction ?? "ltr";
+    },
     actions: {
       get onAction() {
         return props().onAction;
@@ -75,31 +119,27 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        if (focusedKey != null) {
-          const nextKey = collection.getKeyAfter(focusedKey);
-          if (nextKey != null) {
-            s.setFocusedKey(nextKey);
-          }
-        } else {
-          const firstKey = collection.getFirstKey();
-          if (firstKey != null) {
-            s.setFocusedKey(firstKey);
-          }
+        const nextKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyAfter(focusedKey), (k) =>
+                collection.getKeyAfter(k),
+              )
+            : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+        if (nextKey != null) {
+          s.setFocusedKey(nextKey);
         }
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        if (focusedKey != null) {
-          const prevKey = collection.getKeyBefore(focusedKey);
-          if (prevKey != null) {
-            s.setFocusedKey(prevKey);
-          }
-        } else {
-          const lastKey = collection.getLastKey();
-          if (lastKey != null) {
-            s.setFocusedKey(lastKey);
-          }
+        const prevKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyBefore(focusedKey), (k) =>
+                collection.getKeyBefore(k),
+              )
+            : findNextNavigableKey(s, collection.getLastKey(), (k) => collection.getKeyBefore(k));
+        if (prevKey != null) {
+          s.setFocusedKey(prevKey);
         }
         break;
       }
@@ -133,7 +173,9 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
       }
       case "Home": {
         e.preventDefault();
-        const firstKey = collection.getFirstKey();
+        const firstKey = findNextNavigableKey(s, collection.getFirstKey(), (k) =>
+          collection.getKeyAfter(k),
+        );
         if (firstKey != null) {
           s.setFocusedKey(firstKey);
         }
@@ -141,7 +183,9 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
       }
       case "End": {
         e.preventDefault();
-        const lastKey = collection.getLastKey();
+        const lastKey = findNextNavigableKey(s, collection.getLastKey(), (k) =>
+          collection.getKeyBefore(k),
+        );
         if (lastKey != null) {
           s.setFocusedKey(lastKey);
         }
@@ -155,22 +199,11 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case " ":
-      case "Space":
-      case "Spacebar": {
-        if (focusedKey != null && s.selectionMode !== "none" && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          s.toggleSelection(focusedKey);
-        }
-        break;
-      }
-      case "Enter": {
-        if (focusedKey != null && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          p.onAction?.(focusedKey);
-        }
-        break;
-      }
+      // Space (selection) and Enter (action) are intentionally absent here.
+      // Upstream's useSelectableCollection leaves activation to useSelectableItem.
+      // The focus effect below moves DOM focus onto the focused row, so the row's
+      // own createSelectableItem handlers receive those keys without duplicating
+      // work in the bubbling tree handler.
       case "Escape": {
         if (s.selectionMode !== "none") {
           e.preventDefault();
@@ -207,24 +240,101 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     }
   };
 
-  const onFocus = () => {
+  // The first / last SELECTED key in flattened (visible) order — mirrors React
+  // Aria's `SelectionManager.firstSelectedKey`/`lastSelectedKey`, which entry
+  // focus prefers over the first/last row.
+  const firstSelectedKey = (s: TreeState<T, C>): Key | null => {
+    let key = s.collection.getFirstKey();
+    while (key != null) {
+      if (s.isSelected(key)) return key;
+      key = s.collection.getKeyAfter(key);
+    }
+    return null;
+  };
+  const lastSelectedKey = (s: TreeState<T, C>): Key | null => {
+    let key = s.collection.getLastKey();
+    while (key != null) {
+      if (s.isSelected(key)) return key;
+      key = s.collection.getKeyBefore(key);
+    }
+    return null;
+  };
+
+  // Entry focus is handled on `focusin` (BUBBLING) rather than `focus`
+  // (non-bubbling): React Aria's `useSelectableCollection.onFocus` bubbles, so a
+  // Shift+Tab that the browser parks on a tabbable descendant (e.g. a selection
+  // checkbox, which is `tabIndex=0` like upstream) still reaches the collection
+  // and is redirected to the focused/selected row. A Solid non-bubbling `focus`
+  // handler on the treegrid only fires for forward Tab (the container is the first
+  // tab stop) and would strand backward entry on the last checkbox — the same
+  // trampoline gotcha the TagGroup port hit. See `createListBox.onListBoxFocus`.
+  const onFocusIn = (e: FocusEvent) => {
     const s = state();
     s.setFocused(true);
 
-    // If nothing is focused, focus the first item
-    if (s.focusedKey == null) {
-      const firstKey = s.collection.getFirstKey();
-      if (firstKey != null) {
-        s.setFocusedKey(firstKey);
-      }
+    const currentTarget = e.currentTarget as Element | null;
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Internal roving moves (focus already inside the tree) are driven by
+    // `onKeyDown`; only seed focus when it enters from OUTSIDE the treegrid.
+    if (!currentTarget || (relatedTarget && currentTarget.contains(relatedTarget))) {
+      return;
+    }
+
+    let key = s.focusedKey;
+    if (key == null) {
+      // Shift+Tab backward into the tree (focus arrived from a FOLLOWING element)
+      // enters at the last selected row, else the last navigable row; forward Tab
+      // enters at the first selected row, else the first navigable row.
+      const backward =
+        !!relatedTarget &&
+        !!(
+          currentTarget.compareDocumentPosition(relatedTarget) &
+          Node.DOCUMENT_POSITION_FOLLOWING
+        );
+      key = backward
+        ? (lastSelectedKey(s) ??
+          findNextNavigableKey(s, s.collection.getLastKey(), (k) => s.collection.getKeyBefore(k)))
+        : (firstSelectedKey(s) ??
+          findNextNavigableKey(s, s.collection.getFirstKey(), (k) => s.collection.getKeyAfter(k)));
+    }
+    if (key != null) {
+      s.setFocusedKey(key);
     }
   };
 
-  const onBlur = () => {
+  const onFocusOut = (e: FocusEvent) => {
     const s = state();
-    s.setFocused(false);
+    const currentTarget = e.currentTarget as Element | null;
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Only clear the focused flag once focus has left the treegrid entirely.
+    if (!currentTarget || !relatedTarget || !currentTarget.contains(relatedTarget)) {
+      s.setFocused(false);
+    }
   };
 
+  createEffect(() => {
+    const s = state();
+    const key = s.focusedKey;
+    const el = ref();
+    if (!el || key == null) {
+      return;
+    }
+
+    const active = document.activeElement;
+    if (!active || (active !== el && !el.contains(active))) {
+      return;
+    }
+
+    const target = el.querySelector<HTMLElement>(`[data-key="${key}"]`);
+    if (target && target !== active) {
+      target.focus();
+
+      if (getInteractionModality() !== "pointer") {
+        scrollIntoViewport(target, { containingElement: el });
+      }
+    }
+  });
+
   const treeProps = createMemo(() => {
     const p = props();
     const s = state();
@@ -237,10 +347,13 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
       "aria-describedby": p["aria-describedby"],
       "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
       "aria-disabled": p.isDisabled || undefined,
-      tabIndex: p.isDisabled ? undefined : 0,
+      // Roving container tab stop: `0` while no row is focused (Tab enters the
+      // tree), `-1` once a row takes focus (the row holds the tab stop). Mirrors
+      // `useSelectableCollection` `tabIndex = focusedKey == null ? 0 : -1`.
+      tabIndex: p.isDisabled ? undefined : s.focusedKey == null ? 0 : -1,
       onKeyDown,
-      onFocus,
-      onBlur,
+      onFocusIn,
+      onFocusOut,
     };
 
     // Add row count for virtualized trees