@proyecto-viviana/solidaria 0.4.0 → 0.4.2

package/src/color/createColorArea.ts

@@ -9,6 +9,7 @@ import type { Color, ColorAreaState, ColorChannel } from "@proyecto-viviana/soli
 import { parseColor } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 import { createId } from "../ssr";
+import { createColorStringFormatter } from "./intl";
 import type { AriaColorAreaOptions, ColorAreaAria } from "./types";
 
 /**
@@ -22,6 +23,7 @@ export function createColorArea(
   const getProps = () => props();
   const getState = () => state();
   const locale = useLocale();
+  const stringFormatter = createColorStringFormatter();
   const isRTL = () => locale().direction === "rtl";
   const [focusedInput, setFocusedInput] = createSignal<"x" | "y" | null>(null);
   const [valueChangedViaKeyboard, setValueChangedViaKeyboard] = createSignal(false);
@@ -32,11 +34,18 @@ export function createColorArea(
   const xInputId = createId();
   const yInputId = createId();
 
-  const colorPickerLabel = () => "Color picker";
+  const colorPickerLabel = () => stringFormatter().format("colorPicker");
   const colorInputLabel = () => {
     const ariaLabel = getProps()["aria-label"];
-    return ariaLabel ? `${ariaLabel}, ${colorPickerLabel()}` : colorPickerLabel();
+    return ariaLabel
+      ? stringFormatter().format("colorInputLabel", {
+          label: ariaLabel,
+          channelLabel: colorPickerLabel(),
+        })
+      : colorPickerLabel();
   };
+  // Upstream joins the group label with a literal ", " (useColorArea.ts:488),
+  // NOT the colorInputLabel message.
   const colorAreaLabel = () => {
     const ariaLabel = getProps()["aria-label"];
     return ariaLabel ? `${ariaLabel}, ${colorPickerLabel()}` : undefined;
@@ -44,7 +53,10 @@ export function createColorArea(
   const formatChannelValueText = (channel: ColorChannel) => {
     const value = getState().getDisplayColor();
     const loc = locale().locale;
-    return `${value.getChannelName(channel, loc)}: ${value.formatChannelValue(channel, loc)}`;
+    return stringFormatter().format("colorNameAndValue", {
+      name: value.getChannelName(channel, loc),
+      value: value.formatChannelValue(channel, loc),
+    });
   };
   const getAriaValueTextForChannel = (channel: ColorChannel) => {
     const s = getState();
@@ -355,7 +367,7 @@ export function createColorArea(
       type: "range",
       id: p.id ?? xInputId,
       "aria-label": colorInputLabel(),
-      "aria-roledescription": "2D slider",
+      "aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
       "aria-valuetext": getAriaValueTextForChannel(s.xChannel),
       "aria-orientation": "horizontal" as const,
       "aria-describedby": p["aria-describedby"],
@@ -375,11 +387,6 @@ export function createColorArea(
       onKeyDown,
       onInput: (e: Event) => updateFromInput(e, "x"),
       onChange: (e: Event) => updateFromInput(e, "x"),
-      onBlur: () => {
-        if (s.isDragging) {
-          s.setDragging(false);
-        }
-      },
       tabIndex: !focusedInput() || focusedInput() === "x" ? undefined : -1,
       style: {
         position: "absolute" as const,
@@ -405,7 +412,7 @@ export function createColorArea(
       type: "range",
       id: p.id ?? yInputId,
       "aria-label": colorInputLabel(),
-      "aria-roledescription": "2D slider",
+      "aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
       "aria-valuetext": getAriaValueTextForChannel(s.yChannel),
       "aria-orientation": "vertical" as const,
       "aria-describedby": p["aria-describedby"],

package/src/color/createColorField.ts

@@ -134,7 +134,14 @@ export function createColorField(
       disabled: isDisabled(),
       readOnly: isReadOnly(),
       required: validationBehavior() === "native" ? required || undefined : undefined,
-      tabIndex: p.excludeFromTabOrder ? -1 : undefined,
+      // Upstream routes the input through useFormattedTextField → useTextField →
+      // useFocusable, which ALWAYS sets a tabIndex ("so that Safari allows focusing
+      // native buttons and inputs"): `excludeFromTabOrder ? -1 : 0`, then `undefined`
+      // when disabled (useFocusable.mjs:65-66). We hand-roll inputProps, so replay that
+      // one focusable prop here — the port previously dropped the default `0`, so the
+      // rendered input carried no `tabindex` while React's carries `tabindex="0"` (a D5
+      // focus-trail divergence), exactly as createNumberField already replays it.
+      tabIndex: isDisabled() ? undefined : p.excludeFromTabOrder ? -1 : 0,
       autoComplete: "off",
       autoCorrect: "off",
       spellCheck: "false",

package/src/color/createColorSlider.ts

@@ -44,7 +44,7 @@ export function createColorSlider(
     const p = getProps();
     if (p.channelName) return p.channelName;
     const s = getState();
-    return s.value.getChannelName(s.channel, "en-US");
+    return s.value.getChannelName(s.channel, locale().locale);
   });
 
   const orientation = () => getProps().orientation ?? "horizontal";
@@ -325,7 +325,6 @@ export function createColorSlider(
     const y = orientation() === "horizontal" ? 0.5 : 1 - percent;
 
     return {
-      role: "presentation" as const,
       onKeyDown,
       style: {
         position: "absolute" as const,

package/src/color/createColorSwatch.ts

@@ -9,6 +9,7 @@ import { normalizeColor } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 import { createId } from "../ssr";
 import { filterDOMProps } from "../utils/filterDOMProps";
+import { createColorStringFormatter } from "./intl";
 import type { AriaColorSwatchOptions, ColorSwatchAria } from "./types";
 
 /**
@@ -17,6 +18,7 @@ import type { AriaColorSwatchOptions, ColorSwatchAria } from "./types";
 export function createColorSwatch(props: Accessor<AriaColorSwatchOptions>): ColorSwatchAria {
   const getProps = () => props();
   const locale = useLocale();
+  const stringFormatter = createColorStringFormatter();
   const generatedId = createId();
   const id = () => getProps().id ?? generatedId;
 
@@ -28,7 +30,7 @@ export function createColorSwatch(props: Accessor<AriaColorSwatchOptions>): Colo
 
     const resolvedColor = color();
     if (resolvedColor.getChannelValue("alpha") === 0) {
-      return "transparent";
+      return stringFormatter().format("transparent");
     }
 
     return resolvedColor.getColorName(locale().locale);
@@ -44,7 +46,7 @@ export function createColorSwatch(props: Accessor<AriaColorSwatchOptions>): Colo
       id: id(),
       slot: p.slot,
       role: "img" as const,
-      "aria-roledescription": "color swatch",
+      "aria-roledescription": stringFormatter().format("colorSwatch"),
       "aria-label": ariaLabel,
       "aria-labelledby": p["aria-labelledby"] ? `${id()} ${p["aria-labelledby"]}` : undefined,
       style: {

package/src/color/createColorWheel.ts

@@ -290,7 +290,6 @@ export function createColorWheel(
       name: p.name,
       form: p.form,
       disabled: s.isDisabled || p.isDisabled,
-      tabIndex: s.isDisabled || p.isDisabled ? undefined : 0,
       "aria-label":
         p["aria-label"] ??
         (p["aria-labelledby"] ? undefined : s.value.getChannelName("hue", locale().locale)),
@@ -308,11 +307,6 @@ export function createColorWheel(
         const target = e.target as HTMLInputElement;
         s.setHue(parseFloat(target.value));
       },
-      onBlur: () => {
-        if (s.isDragging) {
-          s.setDragging(false);
-        }
-      },
       style: {
         position: "absolute" as const,
         width: "100%",

package/src/color/intl/index.ts

@@ -0,0 +1,316 @@
+/**
+ * Color internationalization strings.
+ *
+ * Port of `@react-aria/color`'s intl catalog — the `colorPicker`,
+ * `twoDimensionalSlider`, `colorSwatch`, `transparent`, `colorNameAndValue`,
+ * and `colorInputLabel` messages across all 34 upstream locales. Consumed via
+ * `createColorStringFormatter`, mirroring upstream's
+ * `useLocalizedStringFormatter(intlMessages, '@react-aria/color')`.
+ *
+ * The per-locale message SEPARATORS differ (e.g. CJK `：`/`、`, French
+ * non-breaking ` :`), so each locale's function form is preserved
+ * verbatim rather than shared.
+ */
+
+import type { LocalizedStrings } from "@internationalized/string";
+import { createStringFormatter } from "../../i18n";
+
+export type ColorIntlKey =
+  | "colorPicker"
+  | "twoDimensionalSlider"
+  | "colorSwatch"
+  | "transparent"
+  | "colorNameAndValue"
+  | "colorInputLabel";
+
+export type ColorIntlVariables = {
+  name?: string;
+  value?: string;
+  label?: string;
+  channelLabel?: string;
+};
+
+type ColorIntlMessage = string | ((args: ColorIntlVariables | undefined) => string);
+
+export const colorIntlStrings: LocalizedStrings<ColorIntlKey, ColorIntlMessage> = {
+  "ar-AE": {
+    colorPicker: "أداة انتقاء اللون",
+    twoDimensionalSlider: "مُنزلق 2D",
+    colorSwatch: "تغيير الألوان",
+    transparent: "شفاف",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "bg-BG": {
+    colorPicker: "Средство за избиране на цвят",
+    twoDimensionalSlider: "2D плъзгач",
+    colorSwatch: "цветна мостра",
+    transparent: "прозрачен",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "cs-CZ": {
+    colorPicker: "Výběr barvy",
+    twoDimensionalSlider: "2D posuvník",
+    colorSwatch: "barevný vzorek",
+    transparent: "průhledný",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "da-DK": {
+    colorPicker: "Farvevælger",
+    twoDimensionalSlider: "2D-skyder",
+    colorSwatch: "farveprøve",
+    transparent: "gennemsigtig",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "de-DE": {
+    colorPicker: "Farbwähler",
+    twoDimensionalSlider: "2D-Schieberegler",
+    colorSwatch: "Farbfeld",
+    transparent: "transparent",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "el-GR": {
+    colorPicker: "Επιλογέας χρωμάτων",
+    twoDimensionalSlider: "Ρυθμιστικό 2D",
+    colorSwatch: "χρωματικό δείγμα",
+    transparent: "διαφανές",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "en-US": {
+    colorPicker: "Color picker",
+    twoDimensionalSlider: "2D slider",
+    colorSwatch: "color swatch",
+    transparent: "transparent",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "es-ES": {
+    colorPicker: "Selector de color",
+    twoDimensionalSlider: "Regulador 2D",
+    colorSwatch: "muestra de color",
+    transparent: "transparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "et-EE": {
+    colorPicker: "Värvivalija",
+    twoDimensionalSlider: "2D-liugur",
+    colorSwatch: "värvinäidis",
+    transparent: "läbipaistev",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "fi-FI": {
+    colorPicker: "Värimuokkain",
+    twoDimensionalSlider: "2D-liukusäädin",
+    colorSwatch: "värimalli",
+    transparent: "läpinäkyvä",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "fr-FR": {
+    colorPicker: "Sélecteur de couleurs",
+    twoDimensionalSlider: "Curseur 2D",
+    colorSwatch: "Échantillon de couleurs",
+    transparent: "Transparent",
+    colorNameAndValue: (args) => `${args?.name} : ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "he-IL": {
+    colorPicker: "בוחר הצבעים",
+    twoDimensionalSlider: "מחוון דו מימדי",
+    colorSwatch: "דוגמית צבע",
+    transparent: "שקוף",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "hr-HR": {
+    colorPicker: "Odabir boje",
+    twoDimensionalSlider: "2D klizač",
+    colorSwatch: "uzorak boje",
+    transparent: "transparentno",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "hu-HU": {
+    colorPicker: "Színválasztó",
+    twoDimensionalSlider: "2D-csúszka",
+    colorSwatch: "színtár",
+    transparent: "átlátszó",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "it-IT": {
+    colorPicker: "Selettore colore",
+    twoDimensionalSlider: "Cursore 2D",
+    colorSwatch: "campione di colore",
+    transparent: "trasparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "ja-JP": {
+    colorPicker: "カラーピッカー",
+    twoDimensionalSlider: "2D スライダー",
+    colorSwatch: "カラースウォッチ",
+    transparent: "透明",
+    colorNameAndValue: (args) => `${args?.name} : ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}、${args?.channelLabel}`,
+  },
+  "ko-KR": {
+    colorPicker: "색상 피커",
+    twoDimensionalSlider: "2D 슬라이더",
+    colorSwatch: "색상 견본",
+    transparent: "투명도",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "lt-LT": {
+    colorPicker: "Spalvų parinkiklis",
+    twoDimensionalSlider: "2D slankiklis",
+    colorSwatch: "spalvų pavyzdys",
+    transparent: "skaidrus",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "lv-LV": {
+    colorPicker: "Krāsu atlasītājs",
+    twoDimensionalSlider: "2D slīdnis",
+    colorSwatch: "krāsu paraugs",
+    transparent: "caurspīdīgs",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "nb-NO": {
+    colorPicker: "Fargevelger",
+    twoDimensionalSlider: "2D-glidebryter",
+    colorSwatch: "fargekart",
+    transparent: "gjennomsiktig",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "nl-NL": {
+    colorPicker: "Kleurkiezer",
+    twoDimensionalSlider: "2D-schuifregelaar",
+    colorSwatch: "kleurstaal",
+    transparent: "transparant",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "pl-PL": {
+    colorPicker: "Próbnik kolorów",
+    twoDimensionalSlider: "Suwak 2D",
+    colorSwatch: "próbka koloru",
+    transparent: "przezroczysty",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "pt-BR": {
+    colorPicker: "Seletor de cores",
+    twoDimensionalSlider: "Controle deslizante 2D",
+    colorSwatch: "amostra de cores",
+    transparent: "transparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "pt-PT": {
+    colorPicker: "Seletor de cores",
+    twoDimensionalSlider: "Controle deslizante 2D",
+    colorSwatch: "amostra de cor",
+    transparent: "transparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "ro-RO": {
+    colorPicker: "Selector de culori",
+    twoDimensionalSlider: "Glisor 2D",
+    colorSwatch: "specimen de culoare",
+    transparent: "transparent",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "ru-RU": {
+    colorPicker: "Палитра цветов",
+    twoDimensionalSlider: "Ползунок 2D",
+    colorSwatch: "цветовой образец",
+    transparent: "прозрачный",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sk-SK": {
+    colorPicker: "Výber farieb",
+    twoDimensionalSlider: "2D jazdec",
+    colorSwatch: "vzorkovník farieb",
+    transparent: "transparentný",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sl-SI": {
+    colorPicker: "Izbirnik barv",
+    twoDimensionalSlider: "2D drsnik",
+    colorSwatch: "barvna paleta",
+    transparent: "prozorno",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sr-SP": {
+    colorPicker: "Birač boja",
+    twoDimensionalSlider: "2D klizač",
+    colorSwatch: "Uzorak boje",
+    transparent: "providno",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sv-SE": {
+    colorPicker: "Färgväljaren",
+    twoDimensionalSlider: "2D-reglage",
+    colorSwatch: "färgruta",
+    transparent: "genomskinlig",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "tr-TR": {
+    colorPicker: "Renk Seçici",
+    twoDimensionalSlider: "2D sürgü",
+    colorSwatch: "renk örneği",
+    transparent: "saydam",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "uk-UA": {
+    colorPicker: "Палітра кольорів",
+    twoDimensionalSlider: "Повзунок 2D",
+    colorSwatch: "зразок кольору",
+    transparent: "прозорий",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "zh-CN": {
+    colorPicker: "拾色器",
+    twoDimensionalSlider: "2D 滑块",
+    colorSwatch: "颜色色板",
+    transparent: "透明",
+    colorNameAndValue: (args) => `${args?.name}：${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}、${args?.channelLabel}`,
+  },
+  "zh-TW": {
+    colorPicker: "檢色器",
+    twoDimensionalSlider: "2D 滑桿",
+    colorSwatch: "色票",
+    transparent: "透明",
+    colorNameAndValue: (args) => `${args?.name}：${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}，${args?.channelLabel}`,
+  },
+};
+
+/**
+ * Reactive color string formatter for the current locale. Mirrors upstream
+ * `useLocalizedStringFormatter(intlMessages, '@react-aria/color')`.
+ */
+export function createColorStringFormatter() {
+  return createStringFormatter(colorIntlStrings, "@react-aria/color");
+}

package/src/combobox/createComboBox.ts

@@ -9,6 +9,7 @@ import { isServer } from "solid-js/web";
 import { createPress } from "../interactions/createPress";
 import { createFocusRing } from "../interactions/createFocusRing";
 import { createLabel } from "../label/createLabel";
+import { createLabels } from "../label/createLabels";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { mergeProps } from "../utils/mergeProps";
 import { createId } from "../ssr";
@@ -215,8 +216,14 @@ export function createComboBox<T>(
     labelElementType: "label",
   });
 
-  // Focus ring for keyboard focus styling
+  // Focus ring for keyboard focus styling. `isTextInput: true` mirrors RAC's
+  // `<Input>` (react-aria-components Input.tsx:84-85): a text input focused via
+  // pointer (e.g. clicking the chevron to open) must NOT read as focus-visible,
+  // and typing must not flash the ring. Without it the input — and, through the
+  // option's activedescendant focus-visible inheritance, the highlighted option —
+  // paints the brighter `:focused` neutral/accent tokens on a mouse open.
   const { isFocusVisible, focusProps } = createFocusRing({
+    isTextInput: true,
     get autoFocus() {
       return getProps().autoFocus;
     },
@@ -670,6 +677,15 @@ export function createComboBox<T>(
       const isDisabled = p.isDisabled ?? state.isDisabled;
       const isReadOnly = p.isReadOnly ?? state.isReadOnly;
 
+      // Mirror useComboBox: fold the field label into the trigger's name via
+      // useLabels — keeps aria-label ("Show suggestions") and self-references the
+      // button so the accessible name resolves to "<buttonLabel> <fieldLabel>".
+      const triggerLabels = createLabels({
+        id: buttonId,
+        "aria-label": stringFormatter?.().format("buttonLabel") ?? "Show suggestions",
+        "aria-labelledby": p["aria-labelledby"] ?? labelProps.id,
+      });
+
       return mergeProps(
         pressProps as Record<string, unknown>,
         {
@@ -681,20 +697,35 @@ export function createComboBox<T>(
           "aria-controls": isOpen ? listBoxId : undefined,
           "aria-disabled": isDisabled || isReadOnly || undefined,
           disabled: isDisabled || isReadOnly || undefined,
-          "aria-label": stringFormatter?.().format("buttonLabel") ?? "Show suggestions",
+          "aria-label": triggerLabels["aria-label"],
+          "aria-labelledby": triggerLabels["aria-labelledby"],
           "data-open": isOpen || undefined,
           "data-disabled": isDisabled || isReadOnly || undefined,
         } as Record<string, unknown>,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
     get listBoxProps() {
+      const p = getProps();
       const isMulti = state.selectionMode() === "multiple";
+      // Mirror useComboBox: name the listbox via useLabels — aria-label
+      // ("Suggestions") folded with the field label id (not the input id).
+      const boxLabels = createLabels({
+        id: listBoxId,
+        "aria-label": stringFormatter?.().format("listboxLabel") ?? "Suggestions",
+        "aria-labelledby": p["aria-labelledby"] ?? labelProps.id,
+      });
       return {
         id: listBoxId,
         role: "listbox",
-        "aria-labelledby": inputId,
+        "aria-label": boxLabels["aria-label"],
+        "aria-labelledby": boxLabels["aria-labelledby"],
         "aria-multiselectable": isMulti || undefined,
-        tabIndex: -1,
+        // No tabIndex here: useComboBox's listBoxProps never set one
+        // (useComboBox.ts:488-496) — the popover listbox's tabIndex flows from
+        // `useSelectableCollection`, which leaves it `undefined` under virtual
+        // focus so the container never enters the roving-focus trail. createListBox
+        // computes that (undefined for virtual focus); hardcoding -1 here made the
+        // listbox a stray `[tabindex]` node in the D5 focus snapshot.
         shouldSelectOnPressUp: true,
         shouldFocusOnHover: true,
         // Track pointerdown inside listbox to prevent blur from closing