fix(Dropdown): announce multi-select chips via aria-describedby, drop summary-in-value

Replace the inaccessible chips approach (selection summary stuffed into the
combobox value + each chip as a single "Remove <item>" button in a role=group)
with the visually-hidden + aria-describedby announcement from PR #3351, reading
out the selected values. Revert the chips to a chip + labelled × remove button.

Keeping the selection out of the input value restores type-to-search and
Backspace-to-chip removal, which the value summary had disabled. Update tests
and the multi-select a11y doc (new dated section above the preserved history).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: rivka-ungar

packages/core/src/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -805,15 +805,6 @@ describe("DropdownNew", () => {
       expect(getByTestId("dropdown-chip-item3")).toBeInTheDocument();
     });
 
-    it('should expose the chips as a group labelled "selected items"', () => {
-      const { getByRole, getByPlaceholderText, getByText } = renderDropdown({ multi: true });
-
-      fireEvent.click(getByPlaceholderText("Select an option"));
-      fireEvent.click(getByText("Option 1"));
-
-      expect(getByRole("group", { name: "selected items" })).toBeInTheDocument();
-    });
-
     it("should set aria-selected on options reflecting the multi-select state", () => {
       const { getByRole, getByPlaceholderText } = renderDropdown({ multi: true });
 
@@ -827,59 +818,57 @@ describe("DropdownNew", () => {
       expect(unselectedOption).toHaveAttribute("aria-selected", "false");
     });
 
-    it('should render each chip as a single button labelled "Remove <item>"', () => {
+    it("should render each chip with a labelled remove (×) button", () => {
       const { getByRole, getByPlaceholderText, getByText, getByTestId } = renderDropdown({ multi: true });
 
       fireEvent.click(getByPlaceholderText("Select an option"));
       fireEvent.click(getByText("Option 1"));
 
-      // The chip element itself is the remove button — no nested button inside it.
-      const chip = getByTestId("dropdown-chip-opt1");
-      expect(chip.tagName).toBe("BUTTON");
-      expect(chip).toHaveAttribute("aria-label", "Remove Option 1");
-      expect(within(chip).queryByRole("button")).not.toBeInTheDocument();
+      // The chip's × is the remove control, labelled for screen readers.
+      expect(getByTestId("dropdown-chip-opt1")).toBeInTheDocument();
+      expect(getByRole("button", { name: "Remove Option 1" })).toBeInTheDocument();
     });
 
     describe("interactiveChips", () => {
-      it("should expose a short selection summary as the combobox value", () => {
+      it("should keep the input clear rather than stuffing the selection into its value", () => {
         const { getByRole } = renderDropdown({ multi: true, interactiveChips: true });
 
         fireEvent.click(getByRole("combobox"));
         fireEvent.click(within(getByRole("listbox")).getByText("Option 1"));
-        expect(getByRole("combobox")).toHaveValue("Option 1");
-
         fireEvent.click(within(getByRole("listbox")).getByText("Option 3"));
-        expect(getByRole("combobox")).toHaveValue("Option 1 and 1 other");
-
-        fireEvent.click(within(getByRole("listbox")).getByText("Option 4"));
-        expect(getByRole("combobox")).toHaveValue("Option 1 and 2 others");
-      });
 
-      it("should reflect a defaultValue in the combobox summary on mount", () => {
-        const { getByRole } = renderDropdown({
-          multi: true,
-          interactiveChips: true,
-          defaultValue: [
-            { label: "Option 1", value: "opt1" },
-            { label: "Option 3", value: "opt3" }
-          ] as any
-        });
-
-        expect(getByRole("combobox")).toHaveValue("Option 1 and 1 other");
+        // The selection is announced via aria-describedby, not placed in the input value,
+        // so type-to-search and Backspace-to-chip stay available.
+        expect(getByRole("combobox")).toHaveValue("");
       });
 
-      it("should update the summary when a chip is removed", () => {
+      it("should update the announced selection when a chip is removed", () => {
         const { getByRole } = renderDropdown({ multi: true, interactiveChips: true });
 
         fireEvent.click(getByRole("combobox"));
         fireEvent.click(within(getByRole("listbox")).getByText("Option 1"));
         fireEvent.click(within(getByRole("listbox")).getByText("Option 3"));
-        expect(getByRole("combobox")).toHaveValue("Option 1 and 1 other");
 
-        // Each chip is itself a remove button.
         fireEvent.click(getByRole("button", { name: "Remove Option 1" }));
 
-        expect(getByRole("combobox")).toHaveValue("Option 3");
+        const describedById = getByRole("combobox").getAttribute("aria-describedby");
+        const description = document.getElementById(describedById!.split(" ").pop()!);
+        expect(description).toHaveTextContent("Option 3");
+        expect(description).not.toHaveTextContent("Option 1");
+      });
+
+      it("should announce the current selection via aria-describedby on the combobox", () => {
+        const { getByRole } = renderDropdown({ multi: true, interactiveChips: true });
+
+        fireEvent.click(getByRole("combobox"));
+        fireEvent.click(within(getByRole("listbox")).getByText("Option 1"));
+        fireEvent.click(within(getByRole("listbox")).getByText("Option 3"));
+
+        const combobox = getByRole("combobox");
+        const describedById = combobox.getAttribute("aria-describedby");
+        expect(describedById).toBeTruthy();
+        const description = document.getElementById(describedById!.split(" ").pop()!);
+        expect(description).toHaveTextContent("Option 1, Option 3");
       });
     });
   });

packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.module.scss

@@ -3,7 +3,7 @@
   flex-grow: 1;
 
   &.singleChip {
-    > .chipButton:first-child {
+    > div:first-child {
       min-width: 50px;
       flex-shrink: 1;
 
@@ -14,7 +14,7 @@
   }
 
   &.measuring {
-    > .chipButton:not(.hiddenChip) {
+    > div:not(.hiddenChip) {
       opacity: 0;
     }
   }
@@ -33,24 +33,6 @@
   }
 }
 
-.chipButton {
-  appearance: none;
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-
-  &:disabled {
-    cursor: default;
-  }
-}
-
 .chipWrapperWithOverflow {
   max-width: 100%;
   flex-shrink: 0;

packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx

@@ -36,7 +36,7 @@ function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>
   const containerRef = useRef<HTMLDivElement>(null);
   const deductedSpaceRef = useRef<HTMLDivElement>(null);
 
-  const itemRefs = useMemo(() => selectedItems.map(() => createRef<HTMLButtonElement>()), [selectedItems]);
+  const itemRefs = useMemo(() => selectedItems.map(() => createRef<HTMLDivElement>()), [selectedItems]);
 
   const { visibleCount, hasMeasured } = useItemsOverflow({
     containerRef,
@@ -80,30 +80,31 @@ function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>
     return selectedItems.map((item, index) => {
       const isVisible = index < visibleCount;
       const extraProps = isVisible && getChipContainerProps ? getChipContainerProps(item, index) : {};
-      // Removal is handled by this button's onClick; drop downshift's own onClick (selected-item focus).
-      const { ref: extraRef, onClick: _extraOnClick, ...extraAttrs } = extraProps;
+      const { ref: extraRef, ...extraAttrs } = extraProps;
 
       return (
-        <button
+        <div
           key={`dropdown-chip-visible-${item.value}`}
-          type="button"
           ref={el => {
-            (itemRefs[index] as React.MutableRefObject<HTMLButtonElement | null>).current = el;
+            (itemRefs[index] as React.MutableRefObject<HTMLDivElement | null>).current = el;
             if (typeof extraRef === "function") extraRef(el);
           }}
-          className={cx(styles.chipButton, {
+          className={cx({
             [styles.chipWrapperWithOverflow]: minVisibleCount !== undefined,
             [styles.hiddenChip]: !isVisible
           })}
           aria-hidden={!isVisible}
-          aria-label={`Remove ${item.label}`}
           data-testid={`dropdown-chip-${item.value}`}
-          disabled={disabled || readOnly}
           {...extraAttrs}
-          onClick={() => onRemove(item)}
         >
-          <DropdownChip item={item} presentational disabled={disabled} className={styles.visibleChip} />
-        </button>
+          <DropdownChip
+            item={item}
+            onDelete={() => onRemove(item)}
+            disabled={disabled}
+            readOnly={readOnly}
+            className={styles.visibleChip}
+          />
+        </div>
       );
     });
   }, [selectedItems, visibleCount, onRemove, itemRefs, disabled, readOnly, minVisibleCount, getChipContainerProps]);
@@ -118,8 +119,6 @@ function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>
       wrap={false}
       gap="xs"
       ref={containerRef}
-      role="group"
-      aria-label="selected items"
       className={cx(styles.containerWrapper, {
         [styles.singleChip]: isSingleChip,
         [styles.measuring]: !hasMeasured
@@ -138,7 +137,7 @@ function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>
               e.stopPropagation();
               if (e.key === "ArrowLeft") {
                 e.preventDefault();
-                (itemRefs[visibleCount - 1] as React.MutableRefObject<HTMLButtonElement | null>)?.current?.focus();
+                (itemRefs[visibleCount - 1] as React.MutableRefObject<HTMLDivElement | null>)?.current?.focus();
               }
             }}
             onMouseDown={e => {

packages/core/src/components/Dropdown/components/Trigger/DropdownChip.tsx

@@ -37,21 +37,18 @@ const getChipPropsFromItemElements = (item: BaseItemData<Record<string, unknown>
 
 interface DropdownChipProps<Item extends BaseItemData<Record<string, unknown>>> {
   item: Item;
-  onDelete?: () => void;
+  onDelete: () => void;
   disabled?: boolean;
   readOnly?: boolean;
   className?: string;
-  /** Render the chip as visual-only (no close button) — used when the chip wrapper is itself the remove button. */
-  presentational?: boolean;
 }
 
 const DropdownChip = <Item extends BaseItemData<Record<string, unknown>>>({
   item,
   onDelete,
   disabled,
   readOnly,
-  className,
-  presentational
+  className
 }: DropdownChipProps<Item>) => {
   const chipSpecificProps = getChipPropsFromItemElements(item);
 
@@ -61,8 +58,7 @@ const DropdownChip = <Item extends BaseItemData<Record<string, unknown>>>({
       closeButtonAriaLabel={`Remove ${item.label}`}
       onDelete={onDelete}
       disabled={disabled}
-      // presentational chips hide their own × — removal is handled by the wrapping button.
-      readOnly={presentational || readOnly}
+      readOnly={readOnly}
       noMargin
       className={className}
       color={item.chipColor || "primary"}

packages/core/src/components/Dropdown/components/Trigger/DropdownInput.tsx

@@ -1,11 +1,21 @@
-import React, { useRef, type RefObject } from "react";
+import React, { useMemo, useRef, type RefObject } from "react";
 import cx from "classnames";
 import { BaseInput } from "@vibe/base";
 import styles from "./Trigger.module.scss";
 import { useDropdownContext } from "../../context/DropdownContext";
 import { type BaseItemData } from "../../../BaseItem";
 import { Text } from "@vibe/typography";
 
+// Builds the screen-reader announcement of the current multi-select selection (the chip labels),
+// surfaced to the combobox via aria-describedby + a visually hidden element. This is how the selected
+// chips are made accessible without depending on the chip buttons themselves carrying the semantics.
+function getSelectedValueText(selectedItems: BaseItemData[]): string {
+  return selectedItems
+    .map(item => item.label || item.value || "")
+    .filter(Boolean)
+    .join(", ");
+}
+
 const DropdownInput = ({
   inputSize,
   fullWidth,
@@ -47,37 +57,51 @@ const DropdownInput = ({
   const preventKeyAction = interactiveChips ? !!(inputValue && inputValue.length > 0) : isOpen;
   const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction }) : {};
 
+  // Stable id for the visually hidden element that announces the current selection.
+  // Only needed for multi-select chips; single-select already keeps the value inside the input.
+  const selectedValueId = useRef(`dropdown-selected-${Math.random().toString(36).slice(2, 9)}`).current;
+  const selectedValueText = useMemo(() => (multi ? getSelectedValueText(selectedItems) : ""), [multi, selectedItems]);
+
+  // The combobox can be described by the helper text and/or the selection announcement.
+  const describedBy =
+    [helperTextId, selectedValueText ? selectedValueId : undefined].filter(Boolean).join(" ") || undefined;
+
   return (
     <>
       {searchable ? (
-        <BaseInput
-          {...getInputProps({
-            "aria-labelledby": label ? getLabelProps().id : undefined,
-            // When there is no visible label, the input must still have a name; fall back to the
-            // field's aria-label so the input — and the chevron that points at it — are named.
-            "aria-label": inputAriaLabel || (label ? undefined : ariaLabel),
-            "aria-describedby": helperTextId,
-            // The menu is presented in a Dialog, so the combobox advertises a dialog popup.
-            "aria-haspopup": "dialog",
-            placeholder: hasSelection ? "" : placeholder,
-            ref: inputRef,
-            onKeyDown: externalKeyDown,
-            ...multipleSelectionDropdownProps
-          })}
-          inputRole="combobox"
-          value={inputValue || ""}
-          autoFocus={autoFocus}
-          size={inputSize || size}
-          className={cx(styles.inputWrapper, {
-            [styles.hasSelected]: !multi && selectedItem && !inputValue,
-            [styles.small]: inputSize === "small",
-            [styles.multi]: multi && hasSelection,
-            [styles.multiSelected]: multi && hasSelection && inputSize === "small",
-            [styles.fullWidth]: fullWidth
-          })}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
+        <>
+          <BaseInput
+            {...getInputProps({
+              "aria-labelledby": label ? getLabelProps().id : undefined,
+              // When there is no visible label, the input must still have a name; fall back to the
+              // field's aria-label so the input — and the chevron that points at it — are named.
+              "aria-label": inputAriaLabel || (label ? undefined : ariaLabel),
+              "aria-describedby": describedBy,
+              // The menu is presented in a Dialog, so the combobox advertises a dialog popup.
+              "aria-haspopup": "dialog",
+              placeholder: hasSelection ? "" : placeholder,
+              ref: inputRef,
+              onKeyDown: externalKeyDown,
+              ...multipleSelectionDropdownProps
+            })}
+            inputRole="combobox"
+            value={inputValue || ""}
+            autoFocus={autoFocus}
+            size={inputSize || size}
+            className={cx(styles.inputWrapper, {
+              [styles.hasSelected]: !multi && selectedItem && !inputValue,
+              [styles.small]: inputSize === "small",
+              [styles.multi]: multi && hasSelection,
+              [styles.multiSelected]: multi && hasSelection && inputSize === "small",
+              [styles.fullWidth]: fullWidth
+            })}
+            disabled={disabled}
+            readOnly={readOnly}
+          />
+          <span id={selectedValueId} className={styles.visuallyHidden}>
+            {selectedValueText}
+          </span>
+        </>
       ) : (
         <>
           {!hasSelection && placeholder && (

packages/core/src/components/Dropdown/components/Trigger/Trigger.module.scss

@@ -95,3 +95,15 @@
 .actionsWrapper {
   padding: 0 var(--space-4);
 }
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}