@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/esm/fields/Combobox/index.mjs

@@ -1,7 +1,8 @@
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../../shared/i18n.mjs";
 import { CaretDownIcon, CheckIcon, MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, FloatingFocusManager } from "@floating-ui/react";
+import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame } from "@multiplatform.one/theme";
 import { Pressable as RNPressable } from "react-native-web";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip } from "../../Chip/index.mjs";
@@ -20,21 +21,15 @@ import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 const scrollArrowBuffer = 28;
 const ComboboxRow = styled(View, {
   name: "ComboboxRow",
-  flexDirection: "row",
-  alignItems: "center",
+  ...menuRowFrame,
   gap: "$2",
-  paddingHorizontal: "$3",
   cursor: "default",
-  outlineStyle: "none",
   hoverStyle: {
     backgroundColor: formInputColors.background.focus
   },
-  focusStyle: {
-    outlineStyle: "none"
-  },
-  focusVisibleStyle: {
-    outlineStyle: "none"
-  },
+  focusVisibleStyle: ensureFocusVisibleRing({
+    outlineOffset: -2
+  }),
   variants: {
     selected: {
       true: {
@@ -44,6 +39,12 @@ const ComboboxRow = styled(View, {
         backgroundColor: "transparent"
       }
     },
+    active: {
+      true: {
+        backgroundColor: formInputColors.background.focus
+      },
+      false: {}
+    },
     size: {
       "...size": val => ({
         height: val
@@ -51,6 +52,17 @@ const ComboboxRow = styled(View, {
     }
   }
 });
+function comboboxOptionId(baseId, index) {
+  return `${baseId ?? "combobox"}-opt-${index}`;
+}
+function comboboxListboxId(baseId) {
+  return `${baseId ?? "combobox"}-listbox`;
+}
+function listItemRingProps(keyboardRing) {
+  return keyboardRing ? keyboardFocusRingProps : {
+    outlineWidth: 0
+  };
+}
 const GroupHeader = styled(Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -119,6 +131,8 @@ const ComboboxItem = memo(function ComboboxItem2({
   index,
   isSelected,
   isActive,
+  keyboardRing,
+  optionId,
   suppressHover,
   handlers
 }) {
@@ -134,6 +148,7 @@ const ComboboxItem = memo(function ComboboxItem2({
       ctx.listItemsRef.current[index] = node;
     },
     ...itemProps,
+    id: optionId,
     "data-combobox-index": index,
     "data-active": isActive,
     onKeyDown: e => {
@@ -149,9 +164,11 @@ const ComboboxItem = memo(function ComboboxItem2({
     role: "option",
     tabIndex: -1,
     selected: isSelected,
+    active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
     size: ctx.knobProps.sizeToken,
+    ...listItemRingProps(Boolean(keyboardRing)),
     ...(suppressHover ? {
       hoverStyle: {
         backgroundColor: isActive ? formInputColors.background.focus : isSelected ? formInputColors.background.base : "transparent"
@@ -232,6 +249,7 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  if (isWeb) ensureKeyboardModalityTracking();
   const {
     t
   } = useTranslation();
@@ -269,7 +287,7 @@ function FloatingComboboxCore({
   }, [multiple, value, onValueChange]);
   const filtered = useMemo(() => {
     if (onSearch || !filter) return options;
-    const query = filter.toLowerCase();
+    const query = filter.trim().toLowerCase();
     return options.filter(option => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query));
   }, [options, filter, onSearch]);
   const showCreateOption = useMemo(() => {
@@ -336,6 +354,11 @@ function FloatingComboboxCore({
   const searchInputRef = useRef(null);
   const listScrollRef = useRef(null);
   const keyboardNavRef = useRef(false);
+  const [listKeyboardRing, setListKeyboardRing] = useState(false);
+  const setKeyboardNav = useCallback(next => {
+    keyboardNavRef.current = next;
+    setListKeyboardRing(prev => prev === next ? prev : next);
+  }, []);
   const lastMousePosRef = useRef(null);
   const currentMousePosRef = useRef({
     x: 0,
@@ -392,6 +415,7 @@ function FloatingComboboxCore({
       lastMousePosRef.current = null;
       initialOrderRef.current = null;
       hasSearchedRef.current = false;
+      setKeyboardNav(false);
     }
   }, [open]);
   const activeIndexRef = useRef(activeIndex);
@@ -412,7 +436,7 @@ function FloatingComboboxCore({
     const triggerBounds = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
-    const minWidth = popoverWidth ?? triggerBounds.width + 8;
+    const minWidth = popoverWidth ?? triggerBounds.width;
     const maxWidth = viewportWidth - 20;
     dropdownElement.style.minWidth = `${minWidth}px`;
     dropdownElement.style.maxWidth = `${maxWidth}px`;
@@ -612,7 +636,6 @@ function FloatingComboboxCore({
     return () => document.removeEventListener("mousemove", onMove);
   }, [open, panel.refs]);
   useLayoutEffect(() => {
-    keyboardNavRef.current = false;
     const len = sortedFiltered.length + (showCreateOption ? 1 : 0);
     listItemsRef.current.length = len;
     justResetFromFilterRef.current = true;
@@ -645,7 +668,7 @@ function FloatingComboboxCore({
     activeIndex,
     onNavigate: index => {
       if (index !== null) {
-        keyboardNavRef.current = true;
+        setKeyboardNav(true);
         lastKeyboardNavTimeRef.current = Date.now();
         lastMousePosRef.current = {
           ...currentMousePosRef.current
@@ -715,8 +738,8 @@ function FloatingComboboxCore({
       x: clientX,
       y: clientY
     };
-    keyboardNavRef.current = false;
-  }, []);
+    setKeyboardNav(false);
+  }, [setKeyboardNav]);
   const handlersRef = useRef({});
   const handleSelectRef = useRef(handleSelect);
   handleSelectRef.current = handleSelect;
@@ -764,11 +787,14 @@ function FloatingComboboxCore({
     onKeyDown(event) {
       if (event.key === "Enter" || event.code === "Space" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "j" || event.key === "k") {
         event.preventDefault();
+        setKeyboardNav(true);
         setOpen(true);
         setActiveIndex(0);
       }
     }
   });
+  const listboxId = comboboxListboxId(id);
+  const activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   const boxEventProps = {};
   for (const [key, val] of Object.entries(referenceProps)) {
     if (key === "ref" || typeof val === "function") boxEventProps[key] = val;
@@ -778,8 +804,13 @@ function FloatingComboboxCore({
   boxEventProps.role = "combobox";
   boxEventProps["aria-haspopup"] = "listbox";
   boxEventProps["aria-expanded"] = open;
+  boxEventProps["aria-controls"] = listboxId;
+  if (hideSearch) {
+    boxEventProps["aria-autocomplete"] = "list";
+    if (activeDescendant) boxEventProps["aria-activedescendant"] = activeDescendant;
+  }
   if (id) boxEventProps.id = id;
-  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (!(hasLabel && id) && placeholder) boxEventProps["aria-label"] = placeholder;
   if (describedBy) boxEventProps["aria-describedby"] = describedBy;
   const totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
@@ -789,7 +820,7 @@ function FloatingComboboxCore({
     if (isDown || isUp) {
       e.preventDefault();
       e.stopPropagation();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -799,7 +830,7 @@ function FloatingComboboxCore({
         return isDown ? next >= totalNavigableItems ? 0 : next : next < 0 ? totalNavigableItems - 1 : next;
       });
     }
-  }, [totalNavigableItems]);
+  }, [totalNavigableItems, setKeyboardNav]);
   handlersRef.current = {
     getItemProps,
     onSelect: handleSelect,
@@ -814,7 +845,7 @@ function FloatingComboboxCore({
     const isUp = event.key === "ArrowUp" || event.key === "k";
     if (isDown) {
       event.preventDefault();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -825,7 +856,7 @@ function FloatingComboboxCore({
       });
     } else if (isUp) {
       event.preventDefault();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -834,6 +865,16 @@ function FloatingComboboxCore({
         const next = prev == null ? totalNavigableItems - 1 : prev - 1;
         return next < 0 ? totalNavigableItems - 1 : next;
       });
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setKeyboardNav(true);
+      lastKeyboardNavTimeRef.current = Date.now();
+      setActiveIndex(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setKeyboardNav(true);
+      lastKeyboardNavTimeRef.current = Date.now();
+      setActiveIndex(Math.max(0, totalNavigableItems - 1));
     } else if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       if (activeIndex === createOptionIndex && showCreateOption) {
@@ -850,7 +891,7 @@ function FloatingComboboxCore({
       event.preventDefault();
       setOpen(false);
     }
-  }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple]);
+  }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, setKeyboardNav]);
   useEffect(() => {
     if (activeIndex == null) return;
     const scrollContainer = listScrollRef.current;
@@ -894,6 +935,10 @@ function FloatingComboboxCore({
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: ensureFocusVisibleRing({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -906,6 +951,7 @@ function FloatingComboboxCore({
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
+    suppressFocusRing: open,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -992,7 +1038,8 @@ function FloatingComboboxCore({
         outlineWidth: 0,
         pointerEvents: panel.visible ? "auto" : "none",
         ...getFloatingProps({
-          ref: panel.refs.setFloating
+          ref: panel.refs.setFloating,
+          id: listboxId
         }),
         style: {
           position: "fixed",
@@ -1022,6 +1069,9 @@ function FloatingComboboxCore({
             borderBottomColor: formCommonColors.divider,
             borderRadius: 0,
             elevation: void 0,
+            ...(isWeb ? {
+              className: "mp-composite-ring"
+            } : void 0),
             children: [/* @__PURE__ */jsx(InputParts.Section, {
               children: /* @__PURE__ */jsx(InputParts.Icon, {
                 adornment: "leading",
@@ -1033,7 +1083,11 @@ function FloatingComboboxCore({
                 defaultValue: "",
                 onChangeText: text => setInternalFilter(text),
                 placeholder: searchPlaceholder,
-                onKeyDown: handleSearchKeyDown
+                onKeyDown: handleSearchKeyDown,
+                "aria-autocomplete": "list",
+                "aria-controls": listboxId,
+                "aria-activedescendant": activeDescendant,
+                "aria-expanded": open
               })
             }), loading ? /* @__PURE__ */jsx(InputParts.Section, {
               children: /* @__PURE__ */jsx(InputParts.Icon, {
@@ -1079,8 +1133,10 @@ function FloatingComboboxCore({
             children: [multiple ? sortedFiltered.map((option, index) => /* @__PURE__ */jsx(ComboboxItem, {
               option,
               index,
+              optionId: comboboxOptionId(id, index),
               isSelected: isSelected(option.value),
               isActive: index === activeIndex,
+              keyboardRing: index === activeIndex && listKeyboardRing,
               suppressHover: activeIndex != null,
               handlers: handlersRef
             }, option.value)) : groupedItems.map((item, _i) => item.type === "header" ? /* @__PURE__ */jsx(GroupHeader, {
@@ -1089,17 +1145,22 @@ function FloatingComboboxCore({
             }, `header-${item.label}`) : /* @__PURE__ */jsx(ComboboxItem, {
               option: item.option,
               index: item.flatIndex,
+              optionId: comboboxOptionId(id, item.flatIndex),
               isSelected: isSelected(item.option.value),
               isActive: item.flatIndex === activeIndex,
+              keyboardRing: item.flatIndex === activeIndex && listKeyboardRing,
               suppressHover: activeIndex != null,
               handlers: handlersRef
             }, item.option.value)), showCreateOption && /* @__PURE__ */jsxs(ComboboxRow, {
               role: "option",
               tabIndex: -1,
+              id: comboboxOptionId(id, createOptionIndex),
               selected: false,
+              active: createOptionIndex === activeIndex,
               size: knobProps.sizeToken,
               "data-combobox-index": createOptionIndex,
               "data-active": createOptionIndex === activeIndex,
+              ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
               backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : void 0,
               hoverStyle: activeIndex != null ? {
                 backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
@@ -1120,14 +1181,16 @@ function FloatingComboboxCore({
                 children: createLabel.replace("{value}", filter.trim())
               })]
             })]
-          }, filter) : showCreateOption ? /* @__PURE__ */jsxs(View, {
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "$2",
-            paddingHorizontal: "$3",
-            height: knobProps.sizeToken,
+          }, filter) : showCreateOption ? /* @__PURE__ */jsxs(ComboboxRow, {
+            role: "option",
+            tabIndex: -1,
+            id: comboboxOptionId(id, createOptionIndex),
+            selected: false,
+            active: createOptionIndex === activeIndex,
+            size: knobProps.sizeToken,
             "data-combobox-index": createOptionIndex,
             "data-active": createOptionIndex === activeIndex,
+            ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
             onPress: handleCreate,
             hoverStyle: activeIndex != null ? {
               backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
@@ -1255,6 +1318,7 @@ function NativeComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  if (isWeb) ensureKeyboardModalityTracking();
   const {
     t
   } = useTranslation();
@@ -1272,6 +1336,10 @@ function NativeComboboxCore({
   const [internalFilter, setInternalFilter] = useState("");
   const filter = searchValue !== void 0 ? searchValue : internalFilter;
   const [activeIndex, setActiveIndex] = useState(0);
+  const [listKeyboardRing, setListKeyboardRing] = useState(false);
+  const setKeyboardNav = useCallback(next => {
+    setListKeyboardRing(prev => prev === next ? prev : next);
+  }, []);
   const listRef = useRef(null);
   const fieldA11y = useFieldA11y();
   const textColor = knobProps.textAccentColor;
@@ -1296,7 +1364,7 @@ function NativeComboboxCore({
   }, [multiple, value, onValueChange]);
   const filtered = useMemo(() => {
     if (onSearch || !filter) return options;
-    const query = filter.toLowerCase();
+    const query = filter.trim().toLowerCase();
     return options.filter(option => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query));
   }, [options, filter, onSearch]);
   const showCreateOption = useMemo(() => {
@@ -1352,6 +1420,8 @@ function NativeComboboxCore({
   }, [open]);
   const totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const listboxId = comboboxListboxId(id);
+  const activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   const handleSelect = useCallback(option => {
     if (multiple) {
       const current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1367,6 +1437,7 @@ function NativeComboboxCore({
     const isUp = e.key === "ArrowUp" || e.key === "k";
     if (isDown) {
       e.preventDefault();
+      setKeyboardNav(true);
       listRef.current?.focus();
       setActiveIndex(prev => {
         const next = prev == null ? 0 : prev + 1;
@@ -1374,29 +1445,48 @@ function NativeComboboxCore({
       });
     } else if (isUp) {
       e.preventDefault();
+      setKeyboardNav(true);
       listRef.current?.focus();
       setActiveIndex(prev => {
         const next = prev == null ? totalItems - 1 : prev - 1;
         return next < 0 ? totalItems - 1 : next;
       });
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(Math.max(0, totalItems - 1));
     }
-  }, [totalItems]);
+  }, [totalItems, setKeyboardNav]);
   const handleListKeyDown = useCallback(e => {
     if (totalItems === 0) return;
     const isDown = e.key === "ArrowDown" || e.key === "j";
     const isUp = e.key === "ArrowUp" || e.key === "k";
     if (isDown) {
       e.preventDefault();
+      setKeyboardNav(true);
       setActiveIndex(prev => {
         const next = prev == null ? 0 : prev + 1;
         return next >= totalItems ? 0 : next;
       });
     } else if (isUp) {
       e.preventDefault();
+      setKeyboardNav(true);
       setActiveIndex(prev => {
         const next = prev == null ? totalItems - 1 : prev - 1;
         return next < 0 ? totalItems - 1 : next;
       });
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(Math.max(0, totalItems - 1));
     } else if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       if (activeIndex === createOptionIndex && showCreateOption) {
@@ -1406,7 +1496,7 @@ function NativeComboboxCore({
         if (e.key === "Enter" || !multiple) setOpen(false);
       }
     }
-  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, sortedFiltered, handleCreate, handleSelect, multiple]);
+  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, sortedFiltered, handleCreate, handleSelect, multiple, setKeyboardNav]);
   useEffect(() => {
     if (!open || typeof document === "undefined") return;
     const onKeyDown = e => {
@@ -1447,11 +1537,16 @@ function NativeComboboxCore({
   /* @__PURE__ */
   jsxs(View, {
     ref: listRef,
-    ...(isWeb ? {
+    ...(isWeb ?
+    // role="listbox" is a valid ARIA role but outside RN's `Role` union;
+    // this web-only bag forwards it to the DOM node (house Record cast).
+    {
       tabIndex: 0,
-      onKeyDown: handleListKeyDown
+      onKeyDown: handleListKeyDown,
+      role: "listbox",
+      id: listboxId
     } : void 0),
-    outlineStyle: "none",
+    outlineWidth: 0,
     children: [searchError ? /* @__PURE__ */jsx(View, {
       ...knobProps.panelPadding,
       alignItems: "center",
@@ -1473,6 +1568,12 @@ function NativeComboboxCore({
           alignItems: "center",
           gap: "$2",
           paddingHorizontal: "$3",
+          id: comboboxOptionId(id, i),
+          role: "option",
+          "aria-selected": selected,
+          "data-combobox-index": i,
+          "data-active": active,
+          ...listItemRingProps(active && listKeyboardRing),
           ...(option.description ? {
             minHeight: knobProps.sizeToken,
             paddingVertical: "$2"
@@ -1480,7 +1581,10 @@ function NativeComboboxCore({
             height: knobProps.sizeToken
           }),
           onPress: isWeb ? () => handleSelect(option) : void 0,
-          onMouseEnter: () => setActiveIndex(i),
+          onMouseEnter: () => {
+            setKeyboardNav(false);
+            setActiveIndex(i);
+          },
           ...(!isWeb ? {
             pointerEvents: "none"
           } : {}),
@@ -1540,8 +1644,16 @@ function NativeComboboxCore({
         gap: "$2",
         paddingHorizontal: "$3",
         height: knobProps.sizeToken,
+        role: "option",
+        id: comboboxOptionId(id, createOptionIndex),
+        "data-combobox-index": createOptionIndex,
+        "data-active": createOptionIndex === activeIndex,
+        ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
         onPress: handleCreate,
-        onMouseEnter: () => setActiveIndex(createOptionIndex),
+        onMouseEnter: () => {
+          setKeyboardNav(false);
+          setActiveIndex(createOptionIndex);
+        },
         hoverStyle: activeIndex != null ? {
           backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
         } : {
@@ -1569,8 +1681,16 @@ function NativeComboboxCore({
       gap: "$2",
       paddingHorizontal: "$3",
       height: knobProps.sizeToken,
+      role: "option",
+      id: comboboxOptionId(id, createOptionIndex),
+      "data-combobox-index": createOptionIndex,
+      "data-active": createOptionIndex === activeIndex,
+      ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
       onPress: handleCreate,
-      onMouseEnter: () => setActiveIndex(createOptionIndex),
+      onMouseEnter: () => {
+        setKeyboardNav(false);
+        setActiveIndex(createOptionIndex);
+      },
       hoverStyle: activeIndex != null ? {
         backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
       } : {
@@ -1624,6 +1744,10 @@ function NativeComboboxCore({
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: ensureFocusVisibleRing({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -1635,6 +1759,7 @@ function NativeComboboxCore({
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
+    suppressFocusRing: open,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1648,9 +1773,13 @@ function NativeComboboxCore({
       role: "combobox",
       "aria-haspopup": "listbox",
       "aria-expanded": open,
-      // Standalone (no label): fall back to placeholder for the name
+      "aria-controls": listboxId,
+      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
+      "aria-autocomplete": hideSearch ? "list" : void 0,
+      // Standalone (no label): fall back to placeholder for the name.
+      // Labelled: the sibling Label wires `aria-labelledby` onto this id
+      // itself — naming it here too doubles the spoken name.
       "aria-label": ariaLabel ?? (!hasLabel ? placeholder : void 0),
-      "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : void 0,
       "aria-describedby": describedBy,
       tabIndex: disabled ? -1 : 0
     } : {
@@ -1660,6 +1789,7 @@ function NativeComboboxCore({
     onKeyDown: e => {
       if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
         e.preventDefault();
+        setKeyboardNav(true);
         if (!open) handleOpenChange(true);
       }
     },