From d1494ddc440ae118971506a6be37df758df39369 Mon Sep 17 00:00:00 2001
From: Andreas Schultz <as.c@mailbox.org>
Date: Fri, 2 Oct 2026 17:30:17 +0200
Subject: [PATCH 1/2] Select: Fix accesibility (label combobox) and restore
 keyboard navigation

- Connect FieldItem labels, helper text, and messages to the non-filterable Select combobox.
- Keep focus on the combobox and expose the active option to screen readers.
- Restore predictable Enter, arrow key, Escape, and Tab behavior, with a visible focus indicator.
- Add tests for accessible descriptions, option selection, and focus handling.
---
 CHANGELOG.md                                 |   6 +
 src/components/Form/FieldItem.tsx            |  44 ++++-
 src/components/Form/tests/FieldItem.test.tsx |  19 ++
 src/components/Select/Select.test.tsx        | 154 +++++++++++++++
 src/components/Select/Select.tsx             | 186 +++++++++++++++----
 src/components/Select/_select.scss           |   4 +
 6 files changed, 373 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Select/Select.test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 392f4abbe..93b9009c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
         - for those alert intent states the content area gets an `id` and is referred by the dialog via `aria-describedby`
     - explicitly given values are never overwritten
     - if neither `title`, `aria-label` nor `aria-labelledby` is given for an alert, then the `intent` level is used as fallback for `aria-label`, so the alert dialog always has an accessible name
+- `<Select />`
+    - Connect FieldItem labels, helper text, and messages to the non-filterable Select combobox.
 - new `utils` methods:
     - `truncateMarkdownDisplay`: helper function to iterate over `Markdown` renderings to improve the experienced `cutOff` value
 - new icons:
@@ -96,6 +98,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - the webpack configuration excludes `dist/` from module resolution now, so the sources are always used even if a story references the package root
 - Added explicitly `assert` dependency
     - the linter of `<CodeEditor />` uses `jshint`, which imports `console-browserify`, and this package requires the node core modules `assert` and `util` without declaring them; bundlers based on webpack 5 do not provide shims for node core modules anymore, so the polyfill (and `util` together with it) is part of the delivery now
+- `<Select />`
+    - Restore keyboard navigation for non-filterable Select.
+        - Restore predictable Enter, arrow key, Escape, and Tab behavior, with a visible focus indicator.
+    - Keep focus on the combobox and expose the active option to screen readers.
 
 ### Deprecated
 
diff --git a/src/components/Form/FieldItem.tsx b/src/components/Form/FieldItem.tsx
index 338b36158..83ef5a6d6 100644
--- a/src/components/Form/FieldItem.tsx
+++ b/src/components/Form/FieldItem.tsx
@@ -99,6 +99,22 @@ export const FieldItem = ({
                 connectableInputSelectors.map((selector) => `.${eccgui}-fielditem__inputfields ${selector}`).join(", "),
             ),
         );
+        /**
+         * Blueprint renders a non-filterable Select as a trigger button inside a popover target with
+         * role="combobox". Our Select makes that outer target the keyboard focus stop, while the
+         * normal input selector above still finds the inner button. The label's `for` association
+         * and the button's `aria-describedby` do not transfer to the role-bearing parent, so the
+         * parent also needs explicit label, helper-text and message references below.
+         *
+         * Filterable Selects put the combobox role on their popup search input instead, and do not
+         * match this selector. Keeping the non-filterable case here lets consumers use FieldItem
+         * without repeating these wrapper-specific ARIA connections at every Select usage.
+         */
+        const selectCombobox = ownPart(
+            fieldItem.querySelectorAll<HTMLElement>(
+                `.${eccgui}-fielditem__inputfields .${eccgui}-select[role="combobox"]`,
+            ),
+        );
         const helpElement = ownPart(fieldItem.querySelectorAll<HTMLElement>(`.${eccgui}-fielditem__helpertext`));
         const messageElement = ownPart(fieldItem.querySelectorAll<HTMLElement>(`.${eccgui}-fielditem__message`));
 
@@ -120,8 +136,12 @@ export const FieldItem = ({
          * Update a list of ID references, only the IDs created by this field item are removed if their part is gone.
          * References set by the using application always stay untouched.
          */
-        const updateReferences = (attribute: string, parts: [HTMLElement | undefined, string][]) => {
-            const references = (inputElement.getAttribute(attribute) ?? "").split(" ").filter(Boolean);
+        const updateReferences = (
+            element: HTMLElement,
+            attribute: string,
+            parts: [HTMLElement | undefined, string][],
+        ) => {
+            const references = (element.getAttribute(attribute) ?? "").split(" ").filter(Boolean);
             parts.forEach(([element, ownId]) => {
                 if (element) {
                     if (!references.includes(element.id)) {
@@ -132,9 +152,9 @@ export const FieldItem = ({
                 }
             });
             if (references.length > 0) {
-                inputElement.setAttribute(attribute, references.join(" "));
+                element.setAttribute(attribute, references.join(" "));
             } else {
-                inputElement.removeAttribute(attribute);
+                element.removeAttribute(attribute);
             }
         };
 
@@ -150,13 +170,23 @@ export const FieldItem = ({
                 inputElement.setAttribute("aria-labelledby", labelElement.id);
             }
         } else {
-            updateReferences("aria-labelledby", [[undefined, `label_${fieldItemId}`]]);
+            updateReferences(inputElement, "aria-labelledby", [[undefined, `label_${fieldItemId}`]]);
         }
 
-        updateReferences("aria-describedby", [
+        const descriptions: [HTMLElement | undefined, string][] = [
             [messageElement, `message_${fieldItemId}`],
             [helpElement, `help_${fieldItemId}`],
-        ]);
+        ];
+        updateReferences(inputElement, "aria-describedby", descriptions);
+
+        if (selectCombobox) {
+            if (labelElement) {
+                updateReferences(selectCombobox, "aria-labelledby", [[labelElement, `label_${fieldItemId}`]]);
+            } else {
+                updateReferences(selectCombobox, "aria-labelledby", [[undefined, `label_${fieldItemId}`]]);
+            }
+            updateReferences(selectCombobox, "aria-describedby", descriptions);
+        }
     }, [fieldItemId, preventAriaAttribution]);
 
     React.useEffect(() => {
diff --git a/src/components/Form/tests/FieldItem.test.tsx b/src/components/Form/tests/FieldItem.test.tsx
index 08239e299..5d5a7ee75 100644
--- a/src/components/Form/tests/FieldItem.test.tsx
+++ b/src/components/Form/tests/FieldItem.test.tsx
@@ -162,6 +162,25 @@ describe("FieldItem", () => {
                 expect(label).toHaveAttribute("for", input.id);
             });
         });
+        it("names and describes the Select combobox as well as its button", () => {
+            const { fieldItem } = renderFieldItem({
+                labelProps: { text: "Filter by language" },
+                helperText: "Only matching values are shown.",
+                messageText: "Choose a language.",
+                children: (
+                    <div className={`${eccgui}-select`} role="combobox" aria-expanded="false">
+                        <button type="button">en</button>
+                    </div>
+                ),
+            });
+            const combobox = fieldItem.querySelector('[role="combobox"]');
+            const button = fieldItem.querySelector("button");
+
+            expect(combobox).toHaveAccessibleName("Filter by language");
+            expect(combobox).toHaveAccessibleDescription("Choose a language. Only matching values are shown.");
+            expect(button).toHaveAccessibleName("Filter by language");
+            expect(button).toHaveAccessibleDescription("Choose a language. Only matching values are shown.");
+        });
         it("should remove the reference to a removed label from `aria-labelledby`", () => {
             const { container, rerender } = render(
                 <FieldItem disabled labelProps={{ text: "Label text" }} children={<input type="text" />} />,
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
new file mode 100644
index 000000000..00c99850b
--- /dev/null
+++ b/src/components/Select/Select.test.tsx
@@ -0,0 +1,154 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import "@testing-library/jest-dom";
+
+import FieldItem from "../Form/FieldItem";
+import MenuItem from "../Menu/MenuItem";
+
+import Select from "./Select";
+
+describe("non-filterable Select keyboard navigation", () => {
+    it("keeps focus on the combobox while navigating and returns to it after Escape", async () => {
+        const user = userEvent.setup();
+        const onItemSelect = jest.fn();
+
+        render(
+            <>
+                <button type="button">Before</button>
+                <FieldItem labelProps={{ text: "Type" }}>
+                    <Select
+                        filterable={false}
+                        items={["Value", "Object"]}
+                        itemRenderer={(item, { handleClick, handleFocus, id, modifiers }) => (
+                            <MenuItem
+                                key={item}
+                                text={item}
+                                id={id}
+                                onClick={handleClick}
+                                onFocus={handleFocus}
+                                active={modifiers.active}
+                                aria-selected={modifiers.active}
+                                role="option"
+                                roleStructure="none"
+                                tabIndex={-1}
+                            />
+                        )}
+                        onItemSelect={onItemSelect}
+                        text="Value"
+                        contextOverlayProps={{ transitionDuration: 0 }}
+                    />
+                </FieldItem>
+                <button type="button">After</button>
+            </>,
+        );
+
+        await user.tab();
+        await user.tab();
+        const combobox = screen.getByRole("combobox");
+        expect(combobox).toHaveFocus();
+
+        await user.keyboard("{Enter}");
+        expect(combobox).toHaveAttribute("aria-expanded", "true");
+        expect(combobox).toHaveFocus();
+        expect(document.getElementById(combobox.getAttribute("aria-activedescendant")!)).toEqual(
+            screen.getByRole("option", { name: "Value" }),
+        );
+
+        await user.keyboard("{ArrowDown}");
+        expect(combobox).toHaveFocus();
+        expect(combobox).toHaveAttribute("aria-activedescendant", expect.any(String));
+        expect(document.getElementById(combobox.getAttribute("aria-activedescendant")!)).toEqual(
+            screen.getByRole("option", { name: "Object" }),
+        );
+
+        await user.keyboard("{Escape}");
+        expect(combobox).toHaveFocus();
+        expect(onItemSelect).not.toHaveBeenCalled();
+        await user.tab();
+        await waitFor(() => expect(screen.getByRole("button", { name: "After" })).toHaveFocus());
+        await waitFor(() => expect(combobox).toHaveAttribute("aria-expanded", "false"));
+        await waitFor(() => expect(screen.queryByRole("listbox")).not.toBeInTheDocument());
+        expect(combobox).not.toHaveAttribute("aria-activedescendant");
+    });
+
+    it("selects the active option with Enter and keeps a custom button out of the Tab order", async () => {
+        const user = userEvent.setup();
+        const onItemSelect = jest.fn();
+        render(
+            <>
+                <Select
+                    filterable={false}
+                    items={["Value", "Object"]}
+                    itemRenderer={(item, { handleClick, id, modifiers }) => (
+                        <MenuItem
+                            key={item}
+                            text={item}
+                            id={id}
+                            onClick={handleClick}
+                            active={modifiers.active}
+                            aria-selected={modifiers.active}
+                            role="option"
+                            roleStructure="none"
+                            tabIndex={-1}
+                        />
+                    )}
+                    onItemSelect={onItemSelect}
+                    contextOverlayProps={{ transitionDuration: 0 }}
+                >
+                    <button type="button">Value</button>
+                </Select>
+                <button type="button">After</button>
+            </>,
+        );
+
+        const combobox = screen.getByRole("combobox");
+        await user.tab();
+        expect(combobox).toHaveFocus();
+        await user.keyboard("{Enter}{ArrowDown}{Enter}");
+        expect(onItemSelect).toHaveBeenCalledWith("Object", expect.anything());
+        await waitFor(() => expect(combobox).toHaveAttribute("aria-expanded", "false"));
+        await waitFor(() => expect(screen.queryByRole("listbox")).not.toBeInTheDocument());
+        expect(combobox).toHaveFocus();
+        await user.tab();
+        expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+    });
+
+    it("closes the list when Tab moves focus to the next control", async () => {
+        const user = userEvent.setup();
+        render(
+            <>
+                <Select
+                    filterable={false}
+                    items={["Value", "Object"]}
+                    itemRenderer={(item, { handleClick, id, modifiers }) => (
+                        <MenuItem
+                            key={item}
+                            text={item}
+                            id={id}
+                            onClick={handleClick}
+                            active={modifiers.active}
+                            aria-selected={modifiers.active}
+                            role="option"
+                            roleStructure="none"
+                            tabIndex={-1}
+                        />
+                    )}
+                    onItemSelect={jest.fn()}
+                    text="Value"
+                    contextOverlayProps={{ transitionDuration: 0 }}
+                />
+                <button type="button">After</button>
+            </>,
+        );
+
+        const combobox = screen.getByRole("combobox");
+        await user.tab();
+        await user.keyboard("{Enter}");
+        expect(combobox).toHaveAttribute("aria-expanded", "true");
+        await user.tab();
+        expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+        await waitFor(() => expect(combobox).toHaveAttribute("aria-expanded", "false"));
+    });
+});
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 23a7a39a5..f09038c87 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -64,19 +64,167 @@ export function Select<T>({
     rightIcon,
     onClearanceHandler,
     inputProps,
+    filterable = true,
+    itemRenderer,
+    onActiveItemChange,
     onClearanceText = "Reset selection",
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
     wrapperProps,
     ...otherSelectProps
 }: SelectProps<T>) {
+    const comboboxRef = React.useRef<HTMLElement | null>(null);
+    const blueprintSelectRef = React.useRef<BlueprintSelect<T> | null>(null);
+    const tabDestinationRef = React.useRef<HTMLElement | null>(null);
+    const tabPressedRef = React.useRef(false);
+    const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+    const itemIds = React.useRef<Array<{ item: T; id: string }>>([]);
+
+    React.useLayoutEffect(() => {
+        if (!filterable) {
+            // Blueprint overwrites popoverTargetProps.tabIndex, so set it on the rendered combobox.
+            const combobox = wrapperRef.current?.querySelector<HTMLElement>(`.${eccgui}-select[role="combobox"]`);
+            if (combobox) {
+                combobox.tabIndex = otherSelectProps.disabled ? -1 : 0;
+                comboboxRef.current = combobox;
+            }
+        }
+    });
+
+    const handleActiveItemChange: BlueprintSelectProps<T>["onActiveItemChange"] = (activeItem, isCreateNewItem) => {
+        if (!filterable && comboboxRef.current) {
+            const matchingItem = itemIds.current.find(({ item }) => {
+                if (otherSelectProps.itemsEqual === undefined) {
+                    return item === activeItem;
+                }
+                if (typeof otherSelectProps.itemsEqual === "function") {
+                    return activeItem != null && otherSelectProps.itemsEqual(item, activeItem);
+                }
+                return (
+                    activeItem != null && item[otherSelectProps.itemsEqual] === activeItem[otherSelectProps.itemsEqual]
+                );
+            });
+            if (matchingItem && !isCreateNewItem) {
+                comboboxRef.current.setAttribute("aria-activedescendant", matchingItem.id);
+            } else {
+                comboboxRef.current.removeAttribute("aria-activedescendant");
+            }
+        }
+        onActiveItemChange?.(activeItem, isCreateNewItem);
+    };
+
+    const renderItem: BlueprintSelectProps<T>["itemRenderer"] = (item, props) => {
+        if (props.id) {
+            itemIds.current[props.index] = { item, id: props.id };
+        }
+        return itemRenderer(item, props);
+    };
+
+    const target = children ?? (
+        <Button
+            text={text ? <OverflowText>{text}</OverflowText> : <OverflowText>{placeholder}</OverflowText>}
+            alignText="left"
+            outlined
+            fill={otherSelectProps.fill ?? false}
+            disabled={otherSelectProps.disabled ?? false}
+            icon={icon}
+            rightIcon={
+                <>
+                    {onClearanceHandler && text && (
+                        <Icon
+                            name="operation-clear"
+                            tooltipText={onClearanceText ? onClearanceText : undefined}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onClearanceHandler();
+                            }}
+                        />
+                    )}
+                    {typeof rightIcon === "string" ? (
+                        <Icon name={rightIcon} />
+                    ) : (
+                        (rightIcon ?? <Icon name={"toggler-caretdown"} />)
+                    )}
+                </>
+            }
+            textClassName={text ? "" : BlueprintClasses.TEXT_MUTED}
+            data-test-id={dataTestId ? dataTestId + "_toggler" : undefined}
+            data-testid={dataTestid ? dataTestid + "_toggler" : undefined}
+        />
+    );
+
     const selectContent = (
         <BlueprintSelect<T>
+            ref={blueprintSelectRef}
+            filterable={filterable}
+            itemRenderer={renderItem}
+            onActiveItemChange={handleActiveItemChange}
+            popoverTargetProps={
+                filterable
+                    ? undefined
+                    : {
+                          onFocusCapture: (event) => {
+                              comboboxRef.current = event.currentTarget;
+                              if (event.target !== event.currentTarget) {
+                                  event.currentTarget.focus();
+                              }
+                          },
+                          onKeyDownCapture: (event) => {
+                              tabPressedRef.current = event.key === "Tab";
+                          },
+                          onBlur: (event) => {
+                              if (tabPressedRef.current) {
+                                  const tabDestination =
+                                      event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+                                  if (event.currentTarget.getAttribute("aria-expanded") === "true") {
+                                      tabDestinationRef.current = tabDestination;
+                                      // Blueprint leaves a select-only popover open when Tab moves focus away.
+                                      blueprintSelectRef.current?.setState({ isOpen: false });
+                                  } else if (tabDestination) {
+                                      // Escape may still have a pending animation-frame focus restoration.
+                                      requestAnimationFrame(() => {
+                                          if (tabDestination.isConnected) {
+                                              tabDestination.focus();
+                                          }
+                                      });
+                                  }
+                              }
+                              tabPressedRef.current = false;
+                          },
+                      }
+            }
             popoverProps={
                 {
                     minimal: true,
                     matchTargetWidth: otherSelectProps.fill ?? false,
                     ...contextOverlayProps,
+                    onOpening: (node) => {
+                        if (!filterable) {
+                            const activeOption = node.querySelector<HTMLElement>(
+                                `.${BlueprintClasses.ACTIVE}[role="option"][id]`,
+                            );
+                            if (activeOption) {
+                                comboboxRef.current?.setAttribute("aria-activedescendant", activeOption.id);
+                            }
+                        }
+                        contextOverlayProps?.onOpening?.(node);
+                    },
+                    onClosing: (node) => {
+                        if (!filterable) {
+                            comboboxRef.current?.removeAttribute("aria-activedescendant");
+                            const tabDestination = tabDestinationRef.current;
+                            tabDestinationRef.current = null;
+                            if (tabDestination) {
+                                // Blueprint restores trigger focus in the same frame; let Tab keep its destination.
+                                requestAnimationFrame(() => {
+                                    if (tabDestination.isConnected) {
+                                        tabDestination.focus();
+                                    }
+                                });
+                            }
+                        }
+                        contextOverlayProps?.onClosing?.(node);
+                    },
                 } as ContextOverlayProps
             }
             popoverContentProps={
@@ -97,43 +245,15 @@ export function Select<T>({
             className={`${eccgui}-select` + (className ? ` ${className}` : "")}
             {...otherSelectProps}
         >
-            {children ?? (
-                <Button
-                    text={text ? <OverflowText>{text}</OverflowText> : <OverflowText>{placeholder}</OverflowText>}
-                    alignText="left"
-                    outlined
-                    fill={otherSelectProps.fill ?? false}
-                    disabled={otherSelectProps.disabled ?? false}
-                    icon={icon}
-                    rightIcon={
-                        <>
-                            {onClearanceHandler && text && (
-                                <Icon
-                                    name="operation-clear"
-                                    tooltipText={onClearanceText ? onClearanceText : undefined}
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        onClearanceHandler();
-                                    }}
-                                />
-                            )}
-                            {typeof rightIcon === "string" ? (
-                                <Icon name={rightIcon} />
-                            ) : (
-                                (rightIcon ?? <Icon name={"toggler-caretdown"} />)
-                            )}
-                        </>
-                    }
-                    textClassName={text ? "" : BlueprintClasses.TEXT_MUTED}
-                    data-test-id={dataTestId ? dataTestId + "_toggler" : undefined}
-                    data-testid={dataTestid ? dataTestid + "_toggler" : undefined}
-                />
-            )}
+            {!filterable && React.isValidElement<{ tabIndex?: number }>(target)
+                ? React.cloneElement(target, { tabIndex: -1 })
+                : target}
         </BlueprintSelect>
     );
 
-    return wrapperProps || dataTestId || dataTestid ? (
+    return !filterable || wrapperProps || dataTestId || dataTestid ? (
         <div
+            ref={wrapperRef}
             className={`${eccgui}-select__wrapper`}
             {...(wrapperProps ?? {})}
             {...{ "data-test-id": dataTestId, "data-testid": dataTestid }}
diff --git a/src/components/Select/_select.scss b/src/components/Select/_select.scss
index 491650590..ce8b772c2 100644
--- a/src/components/Select/_select.scss
+++ b/src/components/Select/_select.scss
@@ -10,6 +10,10 @@
 .#{$eccgui}-select {
     display: inline-block;
 
+    &[role="combobox"]:focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+    }
+
     &.#{$ns}-fill {
         display: block;
     }

From 2ee50010f53c51bf8f25cf93f95ffc50dcab3b69 Mon Sep 17 00:00:00 2001
From: Andreas Schultz <as.c@mailbox.org>
Date: Mon, 5 Oct 2026 13:59:39 +0200
Subject: [PATCH 2/2] Improve Select screen reader announcements

- Connect filterable Select search inputs to their listbox popups.
- Expose the labelled combobox without the duplicate inner button for non-filterable Selects in FieldItem.
- Restore button accessibility when a Select becomes filterable, and test both modes
---
 src/components/Form/FieldItem.tsx            | 22 ++++++++++++---
 src/components/Form/tests/FieldItem.test.tsx | 28 +++++++++++++++++---
 src/components/Select/Select.test.tsx        | 28 ++++++++++++++++++++
 src/components/Select/Select.tsx             |  9 ++++++-
 4 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/src/components/Form/FieldItem.tsx b/src/components/Form/FieldItem.tsx
index 83ef5a6d6..2e21b255c 100644
--- a/src/components/Form/FieldItem.tsx
+++ b/src/components/Form/FieldItem.tsx
@@ -71,6 +71,7 @@ export const FieldItem = ({
     ...otherProps
 }: FieldItemProps) => {
     const fieldItemRef = React.useRef<HTMLDivElement>(null);
+    const hiddenSelectButtonRef = React.useRef<HTMLElement | null>(null);
     /** unique ID of this field item, used as suffix for the IDs of its parts */
     const fieldItemId = React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
 
@@ -102,9 +103,10 @@ export const FieldItem = ({
         /**
          * Blueprint renders a non-filterable Select as a trigger button inside a popover target with
          * role="combobox". Our Select makes that outer target the keyboard focus stop, while the
-         * normal input selector above still finds the inner button. The label's `for` association
-         * and the button's `aria-describedby` do not transfer to the role-bearing parent, so the
-         * parent also needs explicit label, helper-text and message references below.
+         * normal input selector above still finds the inner button. The inner button remains a
+         * pointer target, but exposing both elements as labelled controls can cause the same field
+         * to be announced twice. Hide the inner button from assistive technology and connect the
+         * label, helper text and message directly to the focusable combobox.
          *
          * Filterable Selects put the combobox role on their popup search input instead, and do not
          * match this selector. Keeping the non-filterable case here lets consumers use FieldItem
@@ -115,6 +117,14 @@ export const FieldItem = ({
                 `.${eccgui}-fielditem__inputfields .${eccgui}-select[role="combobox"]`,
             ),
         );
+        if (hiddenSelectButtonRef.current && (!selectCombobox || hiddenSelectButtonRef.current !== inputElement)) {
+            hiddenSelectButtonRef.current.removeAttribute("aria-hidden");
+            hiddenSelectButtonRef.current = null;
+        }
+        if (selectCombobox && inputElement && inputElement.getAttribute("aria-hidden") !== "true") {
+            inputElement.setAttribute("aria-hidden", "true");
+            hiddenSelectButtonRef.current = inputElement;
+        }
         const helpElement = ownPart(fieldItem.querySelectorAll<HTMLElement>(`.${eccgui}-fielditem__helpertext`));
         const messageElement = ownPart(fieldItem.querySelectorAll<HTMLElement>(`.${eccgui}-fielditem__message`));
 
@@ -158,7 +168,11 @@ export const FieldItem = ({
             }
         };
 
-        if (labelElement instanceof HTMLLabelElement && labelableElements.includes(inputElement.tagName)) {
+        if (selectCombobox) {
+            if (labelElement instanceof HTMLLabelElement && labelElement.htmlFor === inputElement.id) {
+                labelElement.removeAttribute("for");
+            }
+        } else if (labelElement instanceof HTMLLabelElement && labelableElements.includes(inputElement.tagName)) {
             // an already set `for` is only kept if it refers to the ID of the input element of this field item
             if (labelElement.getAttribute("for") !== inputElement.id) {
                 labelElement.setAttribute("for", inputElement.id);
diff --git a/src/components/Form/tests/FieldItem.test.tsx b/src/components/Form/tests/FieldItem.test.tsx
index 5d5a7ee75..ee1682aa1 100644
--- a/src/components/Form/tests/FieldItem.test.tsx
+++ b/src/components/Form/tests/FieldItem.test.tsx
@@ -162,8 +162,8 @@ describe("FieldItem", () => {
                 expect(label).toHaveAttribute("for", input.id);
             });
         });
-        it("names and describes the Select combobox as well as its button", () => {
-            const { fieldItem } = renderFieldItem({
+        it("exposes the labelled Select combobox without a duplicate button", () => {
+            const { fieldItem, label } = renderFieldItem({
                 labelProps: { text: "Filter by language" },
                 helperText: "Only matching values are shown.",
                 messageText: "Choose a language.",
@@ -178,8 +178,28 @@ describe("FieldItem", () => {
 
             expect(combobox).toHaveAccessibleName("Filter by language");
             expect(combobox).toHaveAccessibleDescription("Choose a language. Only matching values are shown.");
-            expect(button).toHaveAccessibleName("Filter by language");
-            expect(button).toHaveAccessibleDescription("Choose a language. Only matching values are shown.");
+            expect(label).not.toHaveAttribute("for");
+            expect(button).toHaveAttribute("aria-hidden", "true");
+        });
+        it("restores the button when a Select becomes filterable", () => {
+            const { container, rerender } = render(
+                <FieldItem labelProps={{ text: "Type" }}>
+                    <div className={`${eccgui}-select`} role="combobox">
+                        <button type="button">Value</button>
+                    </div>
+                </FieldItem>,
+            );
+            const button = container.querySelector("button");
+            expect(button).toHaveAttribute("aria-hidden", "true");
+
+            rerender(
+                <FieldItem labelProps={{ text: "Type" }}>
+                    <div className={`${eccgui}-select`}>
+                        <button type="button">Value</button>
+                    </div>
+                </FieldItem>,
+            );
+            expect(button).not.toHaveAttribute("aria-hidden");
         });
         it("should remove the reference to a removed label from `aria-labelledby`", () => {
             const { container, rerender } = render(
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 00c99850b..ef1218c6a 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -9,6 +9,32 @@ import MenuItem from "../Menu/MenuItem";
 
 import Select from "./Select";
 
+it("connects a filterable Select search input to its listbox", async () => {
+    const user = userEvent.setup();
+    render(
+        <Select
+            items={["en"]}
+            itemRenderer={(item, { handleClick, id }) => (
+                <MenuItem
+                    key={item}
+                    text={item}
+                    id={id}
+                    role="option"
+                    roleStructure="none"
+                    tabIndex={-1}
+                    onClick={handleClick}
+                />
+            )}
+            onItemSelect={jest.fn()}
+        >
+            <button type="button">Choose language</button>
+        </Select>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Choose language" }));
+    expect(screen.getByRole("combobox")).toHaveAttribute("aria-controls", screen.getByRole("listbox").id);
+});
+
 describe("non-filterable Select keyboard navigation", () => {
     it("keeps focus on the combobox while navigating and returns to it after Escape", async () => {
         const user = userEvent.setup();
@@ -48,6 +74,8 @@ describe("non-filterable Select keyboard navigation", () => {
         await user.tab();
         const combobox = screen.getByRole("combobox");
         expect(combobox).toHaveFocus();
+        expect(combobox).toHaveAccessibleName("Type");
+        expect(screen.queryByRole("button", { name: "Type" })).not.toBeInTheDocument();
 
         await user.keyboard("{Enter}");
         expect(combobox).toHaveAttribute("aria-expanded", "true");
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index f09038c87..89fcccc31 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -199,7 +199,14 @@ export function Select<T>({
                     matchTargetWidth: otherSelectProps.fill ?? false,
                     ...contextOverlayProps,
                     onOpening: (node) => {
-                        if (!filterable) {
+                        if (filterable) {
+                            // Blueprint puts aria-controls on the trigger, but focus moves to the search combobox.
+                            const input = node.querySelector<HTMLInputElement>('input[role="combobox"]');
+                            const listbox = node.querySelector<HTMLElement>('[role="listbox"][id]');
+                            if (input && listbox && !input.hasAttribute("aria-controls")) {
+                                input.setAttribute("aria-controls", listbox.id);
+                            }
+                        } else {
                             const activeOption = node.querySelector<HTMLElement>(
                                 `.${BlueprintClasses.ACTIVE}[role="option"][id]`,
                             );