@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/listbox/createListBox.ts

@@ -1,13 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/listbox/useListBox.ts
+
 /**
  * Provides the behavior and accessibility implementation for a listbox component.
  * A listbox displays a list of options and allows a user to select one or more of them.
  * Based on @react-aria/listbox useListBox.
  */
 
-import { createEffect, onCleanup, type JSX } from "solid-js";
+import { createTrackedEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createFocusWithin } from "../interactions/createFocusWithin";
 import { createLabel } from "../label/createLabel";
-import { createTypeSelect } from "../selection/createTypeSelect";
+import { createSelectableList } from "../selection/createSelectableList";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { mergeProps } from "../utils/mergeProps";
 import { createId } from "../ssr";
@@ -82,6 +97,12 @@ export interface AriaListBoxProps {
    * @default "clearSelection"
    */
   escapeKeyBehavior?: "clearSelection" | "none";
+  /**
+   * Whether Escape and other collection-level interactions may clear the
+   * selection. This is an ARIA behavior override and does not change whether
+   * an option press may toggle the final selected item.
+   */
+  disallowEmptySelection?: boolean;
 }
 
 export interface ListBoxAria {
@@ -110,46 +131,6 @@ export function getListBoxData(state: ListState): ListBoxData | undefined {
   return listBoxData.get(state);
 }
 
-/**
- * Whether a key should be skipped during keyboard navigation. Disabled keys only
- * block navigation under `disabledBehavior: "all"` (the default); under
- * `"selection"` they stay focusable (selection is still blocked elsewhere).
- * Mirrors `ListKeyboardDelegate.isDisabled` in React Aria, which gates the skip
- * on the resolved `disabledBehavior` from the selection manager.
- */
-function isNavigationDisabled<T>(state: ListState<T>, key: Key): boolean {
-  return state.isDisabled(key) && state.disabledBehavior() === "all";
-}
-
-function findNextEnabledKey<T>(
-  state: ListState<T>,
-  currentKey: Key | null,
-  direction: "next" | "prev",
-  wrap: boolean,
-): Key | null {
-  const collection = state.collection();
-  const getAdjacentKey =
-    direction === "next"
-      ? (key: Key) => collection.getKeyAfter(key)
-      : (key: Key) => collection.getKeyBefore(key);
-  const getBoundaryKey =
-    direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey();
-
-  let key = currentKey != null ? getAdjacentKey(currentKey) : getBoundaryKey();
-  while (key != null && isNavigationDisabled(state, key)) {
-    key = getAdjacentKey(key);
-  }
-
-  if (key == null && wrap) {
-    key = getBoundaryKey();
-    while (key != null && isNavigationDisabled(state, key)) {
-      key = getAdjacentKey(key);
-    }
-  }
-
-  return key;
-}
-
 /**
  * Provides the behavior and accessibility implementation for a listbox component.
  * A listbox displays a list of options and allows a user to select one or more of them.
@@ -157,10 +138,11 @@ function findNextEnabledKey<T>(
 export function createListBox<T>(
   props: MaybeAccessor<AriaListBoxProps>,
   state: ListState<T>,
-  _ref?: () => HTMLElement | null,
+  ref: () => HTMLElement | null = () => null,
 ): ListBoxAria {
   const getProps = () => access(props);
-  const id = createId(getProps().id);
+  const fallbackId = createId();
+  const id = () => getProps().id ?? fallbackId;
 
   // Development-time warning for missing accessibility labels
   if (isDevEnv()) {
@@ -185,7 +167,7 @@ export function createListBox<T>(
     }
 
     listBoxData.set(state, {
-      id,
+      id: id(),
       onAction: p.onAction,
       shouldSelectOnPressUp: p.shouldSelectOnPressUp,
       shouldFocusOnHover: p.shouldFocusOnHover,
@@ -201,31 +183,31 @@ export function createListBox<T>(
   updateSharedData();
 
   // Share data with child options
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     updateSharedData();
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       listBoxData.delete(state);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   // Handle focus within
   const { focusWithinProps } = createFocusWithin({
     onFocusWithin: (e) => getProps().onFocus?.(e),
     onBlurWithin: (e) => getProps().onBlur?.(e),
-    onFocusWithinChange: (isFocused) => {
-      getProps().onFocusChange?.(isFocused);
-      // Collection focus lives on the selection manager (upstream tracks it in
-      // useSelectableCollection); the ListState-level setFocused may be a
-      // widget-level focus state (e.g. Select's trigger focus).
-      state.selectionManager.setFocused(isFocused);
-    },
+    onFocusWithinChange: (isFocused) => getProps().onFocusChange?.(isFocused),
   });
 
   // Label handling
-  const { labelProps, fieldProps } = createLabel({
+  const labelAria = createLabel({
     get id() {
-      return id;
+      return id();
     },
     get label() {
       return getProps().label;
@@ -239,274 +221,68 @@ export function createListBox<T>(
     labelElementType: "span",
   });
 
-  // Type-to-select
-  const { typeSelectProps } = createTypeSelect({
-    collection: () => state.collection(),
-    focusedKey: () => state.focusedKey(),
-    onFocusedKeyChange: (key) => state.setFocusedKey(key),
-    isKeyDisabled: (key) => state.isDisabled(key),
-    get isDisabled() {
-      return getProps().disallowTypeAhead ?? false;
+  const selectableList = createSelectableList<T>({
+    selectionManager: state.selectionManager,
+    ref,
+    get shouldFocusWrap() {
+      return getProps().shouldFocusWrap;
     },
-  });
-
-  // Focus marshalling — the container is a trampoline. When a standalone
-  // listbox receives DOM focus with nothing focused yet (e.g. Tab lands on the
-  // container, whose roving tabIndex is 0 only while `focusedKey == null`), move
-  // the focused key to the first/last option; `createSelectableItem`'s focus
-  // effect then pulls REAL DOM focus onto that option and the container rolls to
-  // tabIndex -1. This mirrors `useSelectableCollection`'s `onFocus`
-  // (useSelectableCollection.ts:409-454) and is why upstream never needs
-  // `aria-activedescendant` on a standalone listbox — real focus IS the AT
-  // channel. Skipped under `shouldUseVirtualFocus` (ComboBox/Autocomplete keep
-  // DOM focus on the input and drive an activedescendant via the virtual-focus
-  // channel instead).
-  //
-  // NOTE on the guard: unlike upstream (whose selectable `onFocus` sets
-  // `manager.setFocused(true)` itself and guards on `manager.isFocused`), our
-  // `createFocusWithin` already flips `setFocused(true)` via `onFocusWithinChange`
-  // — and mergeProps chains it BEFORE this handler — so `manager.isFocused` is
-  // already true here. Guard on `focusedKey() == null` instead (only marshal when
-  // no option is focused yet). `onFocus` is non-bubbling in Solid, so this fires
-  // only when the container element itself receives focus, not on child focus.
-  const onListBoxFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
-    const p = getProps();
-    if (p.isDisabled || p.shouldUseVirtualFocus) return;
-    // Ignore focus events that bubbled through a portal.
-    if (!e.currentTarget.contains(e.target as Node)) return;
-    if (state.focusedKey() != null) return;
-
-    const manager = state.selectionManager;
-    const selectOnFocus = state.selectionBehavior() === "replace";
-    const navigateToKey = (key: Key | null | undefined) => {
-      if (key == null) return;
-      state.setFocusedKey(key);
-      if (selectOnFocus && !manager.isSelected(key)) {
-        state.replaceSelection(key);
-      }
-    };
-
-    const collection = state.collection();
-    const relatedTarget = e.relatedTarget as Element | null;
-    // Detect tab direction: if focus came from an element that FOLLOWS the
-    // listbox in the document, the user is shift-tabbing backward into it, so
-    // enter at the last item; otherwise enter at the first.
-    if (
-      relatedTarget &&
-      e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING
-    ) {
-      navigateToKey(manager.lastSelectedKey ?? collection.getLastKey());
-    } else {
-      navigateToKey(manager.firstSelectedKey ?? collection.getFirstKey());
-    }
-  };
-
-  // Keyboard navigation
-  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {
-    const p = getProps();
-    if (p.isDisabled) return;
-
-    const collection = state.collection();
-    const shouldWrap = p.shouldFocusWrap ?? false;
-    const shouldSelectOnFocus = p.shouldSelectOnFocus ?? true;
-
-    switch (e.key) {
-      case "ArrowDown": {
-        // Only consume the key once a target exists. Mirrors
-        // useSelectableCollection (ArrowDown, 211-225): preventDefault is called
-        // inside `if (nextKey != null)`, so at the last item without wrap the
-        // arrow is left alone to bubble (e.g. to scroll an enclosing region).
-        const nextKey = findNextEnabledKey(state, state.focusedKey(), "next", shouldWrap);
-        if (nextKey != null) {
-          e.preventDefault();
-          state.setFocusedKey(nextKey);
-          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
-            state.replaceSelection(nextKey);
-          } else if (e.shiftKey && state.selectionMode() === "multiple") {
-            state.extendSelection(nextKey, collection);
-          }
-        }
-        break;
-      }
-      case "ArrowUp": {
-        const prevKey = findNextEnabledKey(state, state.focusedKey(), "prev", shouldWrap);
-        if (prevKey != null) {
-          e.preventDefault();
-          state.setFocusedKey(prevKey);
-          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
-            state.replaceSelection(prevKey);
-          } else if (e.shiftKey && state.selectionMode() === "multiple") {
-            state.extendSelection(prevKey, collection);
-          }
-        }
-        break;
-      }
-      case "ArrowRight":
-      case "ArrowLeft": {
-        // Horizontal orientation promotes the inline axis to the primary
-        // navigation axis. Upstream's ListKeyboardDelegate strips
-        // getKeyLeftOf/getKeyRightOf for a vertical stack, so Left/Right stay
-        // no-ops there; in a horizontal stack they move prev/next, flipped
-        // under RTL (Right=next, Left=prev in LTR).
-        if (p.orientation !== "horizontal") break;
-        const isRtl = p.direction === "rtl";
-        const forward = e.key === "ArrowRight" ? !isRtl : isRtl;
-        const focusedKey = state.focusedKey();
-        // With nothing focused, both directions enter at the first item,
-        // mirroring upstream's getFirstKey() fallback for Left and Right.
-        const nextKey =
-          focusedKey != null
-            ? findNextEnabledKey(state, focusedKey, forward ? "next" : "prev", shouldWrap)
-            : findNextEnabledKey(state, null, "next", false);
-        // As with the block axis, only swallow the key when it moves focus
-        // (useSelectableCollection ArrowLeft/Right, 243-280).
-        if (nextKey != null) {
-          e.preventDefault();
-          state.setFocusedKey(nextKey);
-          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
-            state.replaceSelection(nextKey);
-          } else if (e.shiftKey && state.selectionMode() === "multiple") {
-            state.extendSelection(nextKey, collection);
-          }
-        }
-        break;
-      }
-      case "Home": {
-        // Mirror useSelectableCollection (Home, 283-285): with nothing focused,
-        // Shift+Home has no anchor to extend a selection from, so leave the
-        // event alone (no focus move, no preventDefault).
-        if (state.focusedKey() == null && e.shiftKey) break;
-        e.preventDefault();
-        const firstKey = findNextEnabledKey(state, null, "next", false);
-        if (firstKey != null) {
-          state.setFocusedKey(firstKey);
-          if (e.ctrlKey && e.shiftKey && state.selectionMode() === "multiple") {
-            // Select from current to first
-            state.extendSelection(firstKey, collection);
-          } else if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
-            state.replaceSelection(firstKey);
-          }
-        }
-        break;
-      }
-      case "End": {
-        // Mirror useSelectableCollection (End, 300-302): same anchor guard as Home.
-        if (state.focusedKey() == null && e.shiftKey) break;
-        e.preventDefault();
-        const lastKey = findNextEnabledKey(state, null, "prev", false);
-        if (lastKey != null) {
-          state.setFocusedKey(lastKey);
-          if (e.ctrlKey && e.shiftKey && state.selectionMode() === "multiple") {
-            // Select from current to last
-            state.extendSelection(lastKey, collection);
-          } else if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
-            state.replaceSelection(lastKey);
-          }
-        }
-        break;
-      }
-      case " ":
-      case "Enter": {
-        if (e.target !== e.currentTarget) {
-          break;
-        }
-
-        e.preventDefault();
-        const focusedKey = state.focusedKey();
-        // Activation is gated on the navigation-disabled check, not the raw
-        // one: under disabledBehavior "selection" a focusable disabled option
-        // still fires onAction, mirroring useSelectableItem's allowsActions
-        // (manager.isDisabled is gated on "all"). Selection stays blocked —
-        // toggleSelection self-guards on the raw disabled check.
-        if (focusedKey != null && !isNavigationDisabled(state, focusedKey)) {
-          if (state.selectionMode() !== "none") {
-            state.toggleSelection(focusedKey);
-          }
-          p.onAction?.(focusedKey);
-        }
-        break;
-      }
-      case "a": {
-        if ((e.ctrlKey || e.metaKey) && state.selectionMode() === "multiple") {
-          e.preventDefault();
-          state.selectAll();
-        }
-        break;
-      }
-      case "Escape": {
-        // Mirror useSelectableCollection (Escape, 352-362): only clear the
-        // selection — and swallow the event — when escapeKeyBehavior is
-        // 'clearSelection', there is actually a selection to clear, and empty
-        // selection is allowed. With escapeKeyBehavior 'none', or otherwise,
-        // leave Escape alone so an enclosing overlay (popover, dialog, combobox)
-        // can handle it.
-        if (
-          (p.escapeKeyBehavior ?? "clearSelection") === "clearSelection" &&
-          !state.disallowEmptySelection() &&
-          !state.isEmpty()
-        ) {
-          e.stopPropagation();
-          e.preventDefault();
-          state.clearSelection();
-        }
-        break;
+    get disallowEmptySelection() {
+      return getProps().disallowEmptySelection ?? state.disallowEmptySelection();
+    },
+    get escapeKeyBehavior() {
+      return getProps().escapeKeyBehavior;
+    },
+    get selectOnFocus() {
+      return getProps().shouldSelectOnFocus;
+    },
+    get disallowTypeAhead() {
+      return getProps().disallowTypeAhead;
+    },
+    get shouldUseVirtualFocus() {
+      return getProps().shouldUseVirtualFocus;
+    },
+    get isVirtualized() {
+      return getProps().isVirtualized;
+    },
+    get linkBehavior() {
+      const p = getProps();
+      const selectionBehavior = state.selectionBehavior();
+      const behavior = p.linkBehavior ?? (selectionBehavior === "replace" ? "action" : "override");
+      if (behavior === "none") {
+        // Collection navigation has no "none" mode. Treat links as actions here;
+        // createOption still reads "none" from the parent listbox metadata.
+        return "action";
       }
-    }
-  };
+      return selectionBehavior === "toggle" && behavior === "action" ? "override" : behavior;
+    },
+    get orientation() {
+      return getProps().orientation;
+    },
+    get direction() {
+      return getProps().direction ?? "ltr";
+    },
+  });
 
   return {
     get labelProps() {
-      return labelProps as JSX.HTMLAttributes<HTMLElement>;
+      return labelAria.labelProps as JSX.HTMLAttributes<HTMLElement>;
     },
     get listBoxProps() {
       const p = getProps();
       const selectionMode = state.selectionMode();
-      const virtualFocus = p.shouldUseVirtualFocus ?? false;
-      const focusedKey = state.focusedKey();
-
-      // Roving container tabIndex mirrors `useSelectableCollection`
-      // (useSelectableCollection.ts:581-582): with real option focus, the
-      // container is tabbable (0) only while nothing is focused, then rolls to
-      // -1 once focus lands on an option so Tab exits the widget. Under virtual
-      // focus (ComboBox/Autocomplete) the container is NOT a tab stop at all —
-      // upstream leaves `tabIndex` undefined, so the popover listbox never
-      // appears in the roving trail. `aria-activedescendant` is the
-      // virtual-focus AT channel and is emitted ONLY on that path — a standalone
-      // listbox announces the active option through real DOM focus, so upstream
-      // never sets it there.
-      const tabIndex = p.isDisabled
-        ? undefined
-        : virtualFocus
-          ? undefined
-          : focusedKey != null
-            ? -1
-            : 0;
-
-      const baseProps = mergeProps(
+      return mergeProps(
         domProps(),
         focusWithinProps as Record<string, unknown>,
-        fieldProps as Record<string, unknown>,
+        labelAria.fieldProps as Record<string, unknown>,
+        p.isDisabled === true ? {} : (selectableList.listProps as Record<string, unknown>),
         {
           role: "listbox",
-          tabIndex,
-          "aria-disabled": p.isDisabled || undefined,
-          "aria-multiselectable": selectionMode === "multiple" ? true : undefined,
-          "aria-activedescendant":
-            virtualFocus && focusedKey != null ? String(focusedKey) : undefined,
-          onKeyDown,
-          onFocus: onListBoxFocus,
+          "aria-orientation": p.orientation ?? "vertical",
+          "aria-disabled": p.isDisabled === true ? "true" : undefined,
+          "aria-multiselectable": selectionMode === "multiple" ? "true" : undefined,
         },
-      );
-
-      // Add type-select props if enabled
-      if (!p.disallowTypeAhead) {
-        return mergeProps(
-          baseProps,
-          typeSelectProps as Record<string, unknown>,
-        ) as JSX.HTMLAttributes<HTMLElement>;
-      }
-
-      return baseProps as JSX.HTMLAttributes<HTMLElement>;
+      ) as JSX.HTMLAttributes<HTMLElement>;
     },
   };
 }

package/src/listbox/createOption.ts

@@ -1,13 +1,29 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/listbox/useOption.ts
+
 /**
  * Provides the behavior and accessibility implementation for an option in a listbox.
  * Based on @react-aria/listbox useOption.
  */
 
-import { type JSX, type Accessor } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createHover, type HoverEvents } from "../interactions/createHover";
-import { createFocusRing } from "../interactions/createFocusRing";
+import { isFocusVisible } from "../interactions/createInteractionModality";
 import { mergeProps } from "../utils/mergeProps";
 import { access, type MaybeAccessor } from "../utils/reactivity";
+import { createSlotId } from "../ssr";
 import { getListBoxData } from "./createListBox";
 import { getItemCount, type ListState, type Key } from "@proyecto-viviana/solid-stately";
 import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
@@ -29,6 +45,11 @@ export interface AriaOptionProps {
   shouldUseVirtualFocus?: boolean;
   /** Whether the option is contained in a virtual scrolling listbox. */
   isVirtualized?: boolean;
+  /**
+   * Function to focus the option, overriding the default DOM focus.
+   * Forwarded into `createSelectableItem` (`useSelectableItem` `focus`).
+   */
+  focus?: () => void;
   /** Whether press-up may occur without the press starting on this option. */
   allowsDifferentPressOrigin?: boolean;
   /** Handler called when hover starts. */
@@ -120,6 +141,7 @@ export function createOption<T>(
         allowsDifferentPressOrigin: allowsDifferentPressOrigin(),
         isVirtualized: isVirtualized(),
         shouldUseVirtualFocus: shouldUseVirtualFocus(),
+        focus: getProps().focus,
         onAction: hasAction
           ? () => {
               getProps().onAction?.();
@@ -139,6 +161,7 @@ export function createOption<T>(
       return selectableItem.isDisabled();
     },
     onHoverStart(e) {
+      // useOption.ts:158. Hover focus only while the global modality is pointer.
       if (shouldFocusOnHover() && !isFocusVisible()) {
         state.selectionManager.setFocused(true);
         state.selectionManager.setFocusedKey(getProps().key);
@@ -153,10 +176,19 @@ export function createOption<T>(
     },
   });
 
-  const { isFocusVisible, focusProps } = createFocusRing();
+  // useOption.ts:182. selectionManager.isFocused is the boolean getter that
+  // reads the selection signal, not a function. Link behavior stays inside
+  // createSelectableItem's itemProps; useOption's separate linkProps merge
+  // has no second object here.
+  const optionIsFocusVisible = () =>
+    selectableItem.isFocused() && state.selectionManager.isFocused && isFocusVisible();
 
-  const labelId = `${getProps().key}-label`;
-  const descriptionId = `${getProps().key}-desc`;
+  // Mirror useOption: `useSlotId()` for the label and description slots so
+  // `aria-labelledby` / `aria-describedby` resolve only when an element with
+  // that id is actually in the DOM. A generated-but-unrendered id is the
+  // `(missing)` oracle failure on ComboBox/Picker options.
+  const labelId = createSlotId();
+  const descriptionId = createSlotId();
 
   return {
     get optionProps() {
@@ -180,35 +212,39 @@ export function createOption<T>(
       return mergeProps(
         selectableItem.itemProps as Record<string, unknown>,
         hoverProps as Record<string, unknown>,
-        focusProps as Record<string, unknown>,
         {
           role: "option",
           id: optionId(),
           "aria-selected": selectionMode !== "none" ? selectableItem.isSelected() : undefined,
           "aria-disabled": selectableItem.isDisabled() || undefined,
           "aria-label": ariaLabel,
-          "aria-labelledby": !ariaLabel ? labelId : undefined,
-          "aria-describedby": descriptionId,
+          // RAC useOption.ts:124-126 always publishes the resolved slot ids
+          // (undefined when the slot was not rendered) — it does not drop
+          // labelledby just because aria-label is also set.
+          "aria-labelledby": labelId(),
+          "aria-describedby": descriptionId(),
           "aria-posinset": ariaPosInSet,
           "aria-setsize": ariaSetSize,
           "data-selected": selectableItem.isSelected() || undefined,
           "data-focused": selectableItem.isFocused() || undefined,
-          "data-focus-visible": (selectableItem.isFocused() && isFocusVisible()) || undefined,
+          "data-focus-visible": optionIsFocusVisible() || undefined,
           "data-pressed": selectableItem.isPressed() || undefined,
           "data-disabled": selectableItem.isDisabled() || undefined,
           "data-hovered": isHovered() || undefined,
         } as Record<string, unknown>,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
-    labelProps: {
-      id: labelId,
+    // Getters so the slot id stays reactive: `createSlotId` may clear the id
+    // after mount if no element registered it.
+    get labelProps() {
+      return { id: labelId() };
     },
-    descriptionProps: {
-      id: descriptionId,
+    get descriptionProps() {
+      return { id: descriptionId() };
     },
     isSelected: selectableItem.isSelected,
     isFocused: selectableItem.isFocused,
-    isFocusVisible: () => selectableItem.isFocused() && isFocusVisible(),
+    isFocusVisible: optionIsFocusVisible,
     isPressed: selectableItem.isPressed,
     isHovered,
     isDisabled: selectableItem.isDisabled,

package/src/live-announcer/announce.ts

@@ -1,17 +1,32 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/live-announcer/LiveAnnouncer.tsx
+
 /**
  * Live announcer for solidaria
  *
  * Provides functions to make announcements to screen readers using
  * ARIA live regions. Useful for announcing dynamic content changes.
  *
- * Port of react-aria's @react-aria/live-announcer.
+ * Ported from packages/react-aria/src/live-announcer/LiveAnnouncer.tsx.
+ * useAnnouncer is a local Solid lifecycle wrapper around that port.
  *
  * SSR Safety: All functions are safe to call during SSR. The announcer
  * will only be created when running in the browser.
  */
 
-import { onCleanup, createEffect } from "solid-js";
-import { isServer } from "solid-js/web";
+import { createTrackedEffect } from "solid-js";
+import { isServer } from "@solidjs/web";
 
 export type Assertiveness = "assertive" | "polite";
 
@@ -202,7 +217,7 @@ export function clearAnnouncer(assertiveness?: Assertiveness): void {
  * @example
  * ```tsx
  * // Clean up on app unmount
- * onCleanup(() => {
+ * onOwnedCleanup(() => {
  *   destroyAnnouncer();
  * });
  * ```
@@ -236,7 +251,7 @@ export interface UseAnnouncerResult {
  * function SearchResults(props) {
  *   const announcer = useAnnouncer();
  *
- *   createEffect(() => {
+ *   createTrackedEffect(() => {
  *     const count = props.results.length;
  *     announcer.announce(`${count} results found`, 'polite');
  *   });
@@ -273,7 +288,7 @@ export function useAnnouncer(): UseAnnouncerResult {
   }
 
   // Ensure the announcer is initialized
-  createEffect(() => {
+  createTrackedEffect(() => {
     // Initialize on first use
     if (!liveAnnouncer) {
       liveAnnouncer = new LiveAnnouncer();