@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/gridlist/createGridList.ts

@@ -3,11 +3,13 @@
  * Based on @react-aria/gridlist/useGridList.
  */
 
-import { createMemo, type Accessor } from "solid-js";
+import { createMemo, createEffect, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
 import { createId } from "@proyecto-viviana/solid-stately";
 import type { GridState, GridCollection, Key } from "@proyecto-viviana/solid-stately";
 import type { AriaGridListProps, GridListAria } from "./types";
+import { scrollIntoViewport } from "../utils";
+import { getInteractionModality } from "../interactions/createInteractionModality";
 
 /**
  * Metadata stored for a grid list instance.
@@ -17,6 +19,12 @@ interface GridListData {
   gridListId: string;
   /** How selection should behave when pressing an item. */
   selectionBehavior: "replace" | "toggle";
+  /** Whether row selection should occur on press up. */
+  shouldSelectOnPressUp: boolean;
+  /** How keyboard navigation behaves within row children. */
+  keyboardNavigationBehavior: "arrow" | "tab";
+  /** Text direction for row-child arrow navigation. */
+  direction: "ltr" | "rtl";
   /** Actions registered for the grid list. */
   actions: {
     onAction?: (key: Key) => void;
@@ -37,13 +45,45 @@ export function getGridListData<T extends object, C extends GridCollection<T>>(
   return gridListDataMap.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 GridCollection<T>>(
+  state: GridState<T, C>,
+  key: Key,
+): boolean {
+  return state.isDisabled(key) && state.disabledBehavior === "all";
+}
+
+/**
+ * Walks from `startKey` via `step` until reaching a navigable (not
+ * navigation-disabled) key, mirroring React Aria's
+ * `ListKeyboardDelegate.findNextNonDisabled`. The next/previous lookups and the
+ * `getFirstKey`/`getLastKey` boundaries all funnel through this so arrow keys,
+ * Home and End land on enabled rows only.
+ */
+function findNextNavigableKey<T extends object, C extends GridCollection<T>>(
+  state: GridState<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 grid list.
  */
 export function createGridList<T extends object, C extends GridCollection<T> = GridCollection<T>>(
   props: Accessor<AriaGridListProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLElement | null>,
+  ref: Accessor<HTMLElement | null>,
 ): GridListAria {
   // Generate a unique ID for the grid list
   const gridListId = props().id ?? createId();
@@ -54,6 +94,15 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     get selectionBehavior() {
       return props().selectionBehavior ?? "replace";
     },
+    get shouldSelectOnPressUp() {
+      return props().shouldSelectOnPressUp ?? false;
+    },
+    get keyboardNavigationBehavior() {
+      return props().keyboardNavigationBehavior ?? "arrow";
+    },
+    get direction() {
+      return props().direction ?? "ltr";
+    },
     actions: {
       get onAction() {
         return props().onAction;
@@ -76,37 +125,67 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     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;
+      }
+      case "ArrowRight":
+      case "ArrowLeft": {
+        // The inline axis (Left/Right) belongs to the ROW under the default
+        // "arrow" navigation behavior: createGridListItem's onKeyDownCapture
+        // intercepts Left/Right for intra-row focus movement (a no-op for
+        // text-only rows), exactly as useGridListItem does upstream, so the
+        // container must NOT step between rows here. Only under "tab" navigation
+        // does the row stop intercepting and the event reach the collection —
+        // mirroring how useSelectableCollection handles Left/Right via
+        // ListKeyboardDelegate. Even then it strips getKeyLeftOf/getKeyRightOf
+        // for a vertical stack, so this stays a no-op unless the stack is
+        // horizontal, where Right=next / Left=prev in LTR, flipped under RTL.
+        // (In Solid the row's capture-phase stopPropagation does not reliably
+        // prevent the container's delegated onKeyDown, so this gate — not the
+        // row's stopPropagation — is what keeps the axes from double-firing.)
+        const behavior = p.keyboardNavigationBehavior ?? "arrow";
+        if (p.orientation !== "horizontal" || behavior !== "tab") break;
+        e.preventDefault();
+        const isRtl = p.direction === "rtl";
+        const forward = e.key === "ArrowRight" ? !isRtl : isRtl;
+        const step = forward
+          ? (k: Key) => collection.getKeyAfter(k)
+          : (k: Key) => collection.getKeyBefore(k);
+        const nextKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, step(focusedKey), step)
+            : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+        if (nextKey != null) {
+          s.setFocusedKey(nextKey);
         }
         break;
       }
       case "Home": {
         e.preventDefault();
-        const firstKey = collection.getFirstKey();
+        const firstKey = findNextNavigableKey(s, collection.getFirstKey(), (k) =>
+          collection.getKeyAfter(k),
+        );
         if (firstKey != null) {
           s.setFocusedKey(firstKey);
         }
@@ -114,7 +193,9 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
       }
       case "End": {
         e.preventDefault();
-        const lastKey = collection.getLastKey();
+        const lastKey = findNextNavigableKey(s, collection.getLastKey(), (k) =>
+          collection.getKeyBefore(k),
+        );
         if (lastKey != null) {
           s.setFocusedKey(lastKey);
         }
@@ -128,22 +209,13 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
         }
         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 (toggle selection) and Enter (onAction) are intentionally absent
+      // here. Upstream's useSelectableCollection has no Space/Enter case — the
+      // focused item owns both, via useSelectableItem. We follow browser focus
+      // onto the focused row (the effect below), so the row's own handlers in
+      // createGridListItem fire. Handling them here too would double-toggle a
+      // focused row, because Solid delegates keydown and bubbles the row event
+      // up to this grid handler.
       case "Escape": {
         if (s.selectionMode !== "none") {
           e.preventDefault();
@@ -154,16 +226,41 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     }
   };
 
-  const onFocus = () => {
+  // Focus marshalling — the grid container is a trampoline. Its roving tabIndex
+  // is 0 only while `focusedKey == null` (see gridProps below), so a Tab that
+  // reaches a standalone grid lands on the container itself; move the focused key
+  // onto the first/last row and the post-commit effect below pulls REAL DOM focus
+  // there while the container rolls to tabIndex -1. This mirrors
+  // useSelectableCollection's `onFocus` — the same direction-aware trampoline the
+  // standalone ListBox uses (createListBox.ts) — and is why a standalone grid
+  // announces the active row through real focus, never `aria-activedescendant`.
+  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
     const s = state();
+    const p = props();
     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);
-      }
+    // onFocus is non-bubbling in Solid, so this fires only when the container
+    // itself receives focus; ignore anything that bubbled from a descendant.
+    // (`currentTarget` is null only in synthetic unit-test FocusEvents — treat
+    // those as a direct container focus.)
+    const container = e.currentTarget as HTMLElement | null;
+    if (container && !container.contains(e.target as Node)) return;
+    // Only marshal when no row is focused yet.
+    if (s.focusedKey != null || p.isDisabled) return;
+
+    const collection = s.collection;
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Detect tab direction: focus arriving from an element that FOLLOWS the grid
+    // in document order means the user shift-tabbed backward into it, so enter at
+    // the LAST row; otherwise (forward Tab, or programmatic) enter at the FIRST.
+    const enterKey =
+      relatedTarget &&
+      container &&
+      container.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING
+        ? findNextNavigableKey(s, collection.getLastKey(), (k) => collection.getKeyBefore(k))
+        : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+    if (enterKey != null) {
+      s.setFocusedKey(enterKey);
     }
   };
 
@@ -172,6 +269,44 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     s.setFocused(false);
   };
 
+  // Mirror React Aria's useSelectableCollection: once the roving tabindex for the
+  // focused key has been committed to the DOM, move browser focus onto that row
+  // from a post-commit effect, looking it up by its stable data-key rather than by
+  // transient tabindex. Selection and activation live on the row
+  // (createGridListItem) to match upstream, so keyboard nav has to carry focus
+  // there for the row's Space/Enter handlers to act on.
+  createEffect(() => {
+    const s = state();
+    const key = s.focusedKey;
+    const el = ref();
+    if (!el || key == null) {
+      return;
+    }
+
+    // Only manage focus while it already lives inside the grid — i.e. the user is
+    // navigating with the keyboard. Gate on the physical position of browser focus
+    // rather than the grid's logical isFocused signal: focus can land directly on a
+    // row (a pointer click) without ever firing the grid's own focus handler, and
+    // the contains() check keeps us from yanking focus back from elsewhere on the
+    // page when the focused key changes from a background interaction.
+    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();
+
+      // Reveal the newly focused row when navigating with the keyboard, mirroring
+      // useSelectableCollection. Pointer-driven focus changes should not shift the
+      // scroll position under the user's finger.
+      if (getInteractionModality() !== "pointer") {
+        scrollIntoViewport(target, { containingElement: el });
+      }
+    }
+  });
+
   const gridProps = createMemo(() => {
     const p = props();
     const s = state();
@@ -184,7 +319,11 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
       "aria-describedby": p["aria-describedby"],
       "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
       "aria-disabled": p.isDisabled || undefined,
-      tabIndex: p.isDisabled ? undefined : 0,
+      // Roving container tabIndex mirrors useSelectableCollection: the container
+      // is tabbable (0) only while nothing is focused, then rolls to -1 once a row
+      // takes focus so Tab exits the grid. A standalone grid drives AT through
+      // real row focus, so it never needs (nor emits) aria-activedescendant.
+      tabIndex: p.isDisabled ? undefined : s.focusedKey != null ? -1 : 0,
       onKeyDown,
       onFocus,
       onBlur,

package/src/gridlist/createGridListItem.ts

@@ -3,11 +3,20 @@
  * Based on @react-aria/gridlist/useGridListItem.
  */
 
-import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createMemo, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
-import type { GridState, GridCollection } from "@proyecto-viviana/solid-stately";
+import type {
+  Collection,
+  GridState,
+  GridCollection,
+  Key,
+  Selection,
+} from "@proyecto-viviana/solid-stately";
 import type { AriaGridListItemProps, GridListItemAria } from "./types";
 import { getGridListData } from "./createGridList";
+import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
+import { mergeCollectionRowInteractionProps } from "../selection/createCollectionRowInteraction";
+import { mergeProps } from "../utils/mergeProps";
 
 /**
  * Creates accessibility props for a grid list item.
@@ -18,159 +27,80 @@ export function createGridListItem<
 >(
   props: Accessor<AriaGridListItemProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLElement | null>,
+  ref: Accessor<HTMLElement | null>,
 ): GridListItemAria {
-  const [isPressed, setIsPressed] = createSignal(false);
-  let isPointerPressed = false;
-  let ignoreNextClick = false;
-
   const isSelected = createMemo(() => {
     const s = state();
     const p = props();
     return s.isSelected(p.node.key);
   });
 
-  const isDisabled = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isDisabled(p.node.key);
-  });
-
-  const isFocused = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.focusedKey === p.node.key;
-  });
-
-  const handleActivation = (e: MouseEvent | PointerEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    // Get grid list metadata for actions
-    const gridListData = getGridListData(s);
-    const onAction = gridListData?.actions.onAction;
-
-    // Handle selection
-    if (s.selectionMode !== "none") {
-      if (e.shiftKey && s.selectionMode === "multiple") {
-        s.extendSelection(p.node.key);
-      } else if (p.selectionBehavior === "toggle" || e.ctrlKey || e.metaKey) {
-        s.toggleSelection(p.node.key);
-      } else {
-        // Replace selection or toggle if already selected
-        if (isSelected() && s.selectedKeys !== "all") {
-          const selectedKeys = s.selectedKeys as Set<unknown>;
-          if (selectedKeys.size === 1) {
-            // Single selection, trigger action
-            if (onAction) {
-              onAction(p.node.key);
-            }
-            if (p.onAction) {
-              p.onAction();
-            }
-          } else {
-            s.replaceSelection(p.node.key);
-          }
-        } else {
-          s.replaceSelection(p.node.key);
-        }
-      }
-    } else {
-      // No selection mode, just trigger action
-      if (onAction) {
-        onAction(p.node.key);
-      }
-      if (p.onAction) {
-        p.onAction();
-      }
-    }
-  };
-
-  // Handle click/press for selection and actions.
-  const onClick = (e: MouseEvent) => {
-    if (ignoreNextClick) {
-      ignoreNextClick = false;
-      return;
-    }
-
-    handleActivation(e);
+  const selectableState: SelectableItemState<T> = {
+    collection: () => state().collection as unknown as Collection<T>,
+    isFocused: () => state().isFocused,
+    setFocused: (focused: boolean) => state().setFocused(focused),
+    focusedKey: () => state().focusedKey,
+    childFocusStrategy: () => state().childFocusStrategy,
+    setFocusedKey: (key: Key | null, strategy) => state().setFocusedKey(key, strategy),
+    selectionMode: () => state().selectionMode,
+    selectionBehavior: () => props().selectionBehavior ?? state().selectionBehavior,
+    disallowEmptySelection: () => state().disallowEmptySelection,
+    selectedKeys: () => state().selectedKeys as Selection,
+    disabledKeys: () => state().disabledKeys,
+    disabledBehavior: () => state().disabledBehavior,
+    isEmpty: () => {
+      const keys = state().selectedKeys;
+      return keys !== "all" && keys.size === 0;
+    },
+    isSelectAll: () => state().selectedKeys === "all",
+    isSelected: (key: Key) => state().isSelected(key),
+    isDisabled: (key: Key) => {
+      const s = state();
+      const item = s.collection.getItem(key);
+      return (
+        s.disabledBehavior === "all" &&
+        s.isDisabled(key) &&
+        item?.props?.disabledBehavior !== "selection"
+      );
+    },
+    canSelectItem: (key: Key) => {
+      const s = state();
+      return s.selectionMode !== "none" && !s.isDisabled(key);
+    },
+    setSelectionBehavior: (behavior) => state().setSelectionBehavior(behavior),
+    toggleSelection: (key: Key) => state().toggleSelection(key),
+    replaceSelection: (key: Key) => state().replaceSelection(key),
+    setSelectedKeys: (keys: Iterable<Key>) => state().setSelectedKeys(keys),
+    selectAll: () => state().selectAll(),
+    clearSelection: () => state().clearSelection(),
+    toggleSelectAll: () => state().toggleSelectAll(),
+    extendSelection: (toKey: Key, _collection: Collection<T>) => state().extendSelection(toKey),
   };
 
-  const onKeyDown = (e: KeyboardEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    if (e.key === "Enter") {
-      // Get grid list metadata for actions
+  const selectableItem = createSelectableItem<T>(
+    () => {
+      const s = state();
+      const p = props();
       const gridListData = getGridListData(s);
       const onAction = gridListData?.actions.onAction;
 
-      if (onAction || p.onAction) {
-        e.preventDefault();
-
-        if (onAction) {
-          onAction(p.node.key);
-        }
-
-        if (p.onAction) {
-          p.onAction();
-        }
-      }
-    } else if (e.key === " " || e.key === "Space" || e.key === "Spacebar") {
-      // Space toggles selection
-      if (s.selectionMode !== "none") {
-        e.preventDefault();
-        s.toggleSelection(p.node.key);
-      }
-    }
-  };
-
-  const onFocus = () => {
-    const s = state();
-    const p = props();
-    s.setFocusedKey(p.node.key);
-  };
-
-  const onPointerDown = () => {
-    if (isDisabled()) return;
-    isPointerPressed = true;
-    setIsPressed(true);
-  };
-
-  const onPointerUp = (e: PointerEvent) => {
-    const wasPointerPressed = isPointerPressed;
-    isPointerPressed = false;
-    setIsPressed(false);
-
-    if (!wasPointerPressed || isDisabled()) return;
-
-    const currentTarget = e.currentTarget;
-    const target = e.target;
-    if (
-      currentTarget instanceof HTMLElement &&
-      target instanceof Node &&
-      !currentTarget.contains(target)
-    ) {
-      return;
-    }
-
-    ignoreNextClick = true;
-    handleActivation(e);
-  };
-
-  const onPointerCancel = () => {
-    isPointerPressed = false;
-    setIsPressed(false);
-  };
-
-  const onPointerLeave = () => {
-    isPointerPressed = false;
-    setIsPressed(false);
-  };
+      return {
+        key: p.node.key,
+        id: `${gridListData?.gridListId ?? "gridlist"}-row-${String(p.node.key)}`,
+        isVirtualized: p.isVirtualized,
+        shouldSelectOnPressUp: gridListData?.shouldSelectOnPressUp ?? false,
+        onAction:
+          onAction || p.onAction
+            ? () => {
+                p.onAction?.();
+                onAction?.(p.node.key);
+              }
+            : undefined,
+      };
+    },
+    selectableState,
+    ref,
+  );
 
   const rowProps = createMemo(() => {
     const s = state();
@@ -180,15 +110,7 @@ export function createGridListItem<
     const baseProps: Record<string, unknown> = {
       role: "row",
       "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
-      "aria-disabled": isDisabled() || undefined,
-      tabIndex: isFocused() ? 0 : -1,
-      onClick,
-      onKeyDown,
-      onFocus,
-      onPointerDown,
-      onPointerUp,
-      onPointerCancel,
-      onPointerLeave,
+      "aria-disabled": selectableItem.isDisabled() || undefined,
     };
 
     // Add aria-rowindex for virtualized lists
@@ -196,7 +118,17 @@ export function createGridListItem<
       baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLElement>;
+    const gridListData = getGridListData(s);
+    const mergedProps = mergeProps<JSX.HTMLAttributes<HTMLElement>>(
+      selectableItem.itemProps,
+      baseProps,
+    );
+
+    return mergeCollectionRowInteractionProps(mergedProps, {
+      ref,
+      keyboardNavigationBehavior: () => gridListData?.keyboardNavigationBehavior ?? "arrow",
+      direction: () => gridListData?.direction ?? "ltr",
+    });
   });
 
   const gridCellProps = createMemo(() => {
@@ -216,10 +148,10 @@ export function createGridListItem<
       return isSelected();
     },
     get isDisabled() {
-      return isDisabled();
+      return selectableItem.isDisabled();
     },
     get isPressed() {
-      return isPressed();
+      return selectableItem.isPressed();
     },
   };
 }

package/src/gridlist/createGridListSection.ts

@@ -0,0 +1,54 @@
+/**
+ * createGridListSection - Provides accessibility for a grid list section.
+ * Based on @react-aria/gridlist/useGridListSection.
+ */
+
+import { createMemo } from "solid-js";
+import { createId, createSlotId } from "../ssr";
+import { createLabels } from "../label/createLabels";
+import type { AriaGridListSectionProps, GridListSectionAria } from "./types";
+
+/**
+ * Creates accessibility props for a grid list section.
+ *
+ * Mirrors upstream `useGridListSection`: a section is a `role="rowgroup"`
+ * wrapper whose optional header renders as `role="row"` › `role="rowheader"`.
+ * The `aria-labelledby` of the wrapper points at the header's id via a slot id
+ * that resolves to `undefined` when no header is rendered.
+ */
+export function createGridListSection(props: AriaGridListSectionProps): GridListSectionAria {
+  const headingId = createSlotId();
+  // Stable id for the rowgroup so `createLabels` does not regenerate one each
+  // time the slot id resolves (it short-circuits on a provided id).
+  const rowGroupId = createId();
+
+  const labelProps = createMemo(() =>
+    createLabels({
+      id: rowGroupId,
+      "aria-label": props["aria-label"],
+      "aria-labelledby": headingId(),
+    }),
+  );
+
+  return {
+    rowProps: { role: "row" },
+    rowHeaderProps: {
+      get id() {
+        return headingId();
+      },
+      role: "rowheader",
+    },
+    rowGroupProps: {
+      role: "rowgroup",
+      get id() {
+        return labelProps().id;
+      },
+      get "aria-label"() {
+        return labelProps()["aria-label"];
+      },
+      get "aria-labelledby"() {
+        return labelProps()["aria-labelledby"];
+      },
+    },
+  };
+}