fix(Dropdown): expose selected chips as a labelled group

Mark the chips container with role="group" and aria-label="selected items" so
assistive tech announces the chips as a named group. Adds an optional role
prop pass-through to Flex to support this.

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

Author: rivka-ungar

packages/components/layout/src/Flex/Flex.tsx

@@ -63,6 +63,10 @@ export interface FlexProps extends VibeComponentProps {
    * ID of the element describing the flex container.
    */
   "aria-labelledby"?: string;
+  /**
+   * The ARIA role of the flex container.
+   */
+  role?: React.AriaRole;
 }
 
 const Flex = forwardRef(
@@ -83,6 +87,7 @@ const Flex = forwardRef(
       style,
       "aria-labelledby": ariaLabelledby,
       "aria-label": ariaLabel,
+      role,
       tabIndex,
       "data-testid": dataTestId
     }: FlexProps,
@@ -153,6 +158,7 @@ const Flex = forwardRef(
         onMouseDown={onMouseDown}
         style={overrideStyle}
         aria-label={ariaLabel}
+        role={role}
       >
         {children}
       </Element>

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

@@ -788,6 +788,15 @@ 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();
+    });
+
     describe("interactiveChips", () => {
       it("should expose a short selection summary as the combobox value", () => {
         const { getByRole } = renderDropdown({ multi: true, interactiveChips: true });

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

@@ -119,6 +119,8 @@ 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