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/4] 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/4] 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]`,
                             );

From 7d7c807b1eed47fa90d80a1cedc3a848f25d90f4 Mon Sep 17 00:00:00 2001
From: Andreas Schultz <as.c@mailbox.org>
Date: Thu, 5 Nov 2026 13:36:58 +0100
Subject: [PATCH 3/4] Fix FieldItem control discovery for Select

- Distinguish non-filterable comboboxes from filterable Select trigger buttons
- Exclude hidden inputs from automatic field connections
- Reuse generic label and description wiring and preserve custom label references
- Clean up generated attributes when the control target changes
- Add regression tests for Select discovery and mode changes
---
 src/components/Form/FieldItem.tsx            | 72 +++++++++-----------
 src/components/Form/tests/FieldItem.test.tsx | 58 ++++++++++++++++
 2 files changed, 90 insertions(+), 40 deletions(-)

diff --git a/src/components/Form/FieldItem.tsx b/src/components/Form/FieldItem.tsx
index 35da63637..5f5fbf832 100644
--- a/src/components/Form/FieldItem.tsx
+++ b/src/components/Form/FieldItem.tsx
@@ -43,10 +43,11 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
  * Input elements that could be connected to the label and the help texts of the field item.
  */
 const connectableInputSelectors = [
-    "input",
+    'input:not([type="hidden"])',
     "textarea",
     "select",
-    `.${eccgui}-select button`,
+    `.${eccgui}-select[role="combobox"]`,
+    `.${eccgui}-select:not([role="combobox"]) button`,
     `.${eccgui}-codeeditor .cm-content`,
 ];
 
@@ -72,6 +73,7 @@ export const FieldItem = ({
 }: FieldItemProps) => {
     const fieldItemRef = React.useRef<HTMLDivElement>(null);
     const hiddenSelectButtonRef = React.useRef<HTMLElement | null>(null);
+    const connectedInputRef = React.useRef<HTMLElement | undefined>(undefined);
     /** 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, "");
 
@@ -105,30 +107,17 @@ export const FieldItem = ({
         const helpElement = ownPart(fieldItem.querySelectorAll<HTMLElement>(`.${eccgui}-fielditem__helpertext`));
         const messageElement = ownPart(fieldItem.querySelectorAll<HTMLElement>(`.${eccgui}-fielditem__message`));
 
-        /**
-         * 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 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
-         * without repeating these wrapper-specific ARIA connections at every Select usage.
-         */
-        const selectCombobox = ownPart(
-            fieldItem.querySelectorAll<HTMLElement>(
-                `.${eccgui}-fielditem__inputfields .${eccgui}-select[role="combobox"]`,
-            ),
-        );
-        if (hiddenSelectButtonRef.current && (!selectCombobox || hiddenSelectButtonRef.current !== inputElement)) {
+        // Only expose the focusable combobox to assistive technology.
+        const selectButton = inputElement?.matches(`.${eccgui}-select[role="combobox"]`)
+            ? inputElement.querySelector<HTMLElement>("button")
+            : null;
+        if (hiddenSelectButtonRef.current && hiddenSelectButtonRef.current !== selectButton) {
             hiddenSelectButtonRef.current.removeAttribute("aria-hidden");
             hiddenSelectButtonRef.current = null;
         }
-        if (selectCombobox && inputElement && inputElement.getAttribute("aria-hidden") !== "true") {
-            inputElement.setAttribute("aria-hidden", "true");
-            hiddenSelectButtonRef.current = inputElement;
+        if (selectButton && selectButton.getAttribute("aria-hidden") !== "true") {
+            selectButton.setAttribute("aria-hidden", "true");
+            hiddenSelectButtonRef.current = selectButton;
         }
 
         const setMissingId = (element: HTMLElement | undefined, id: string) => {
@@ -141,10 +130,6 @@ export const FieldItem = ({
         setMissingId(helpElement, `help_${fieldItemId}`);
         setMissingId(messageElement, `message_${fieldItemId}`);
 
-        if (!inputElement) {
-            return;
-        }
-
         /**
          * 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.
@@ -171,11 +156,24 @@ export const FieldItem = ({
             }
         };
 
-        if (selectCombobox) {
-            if (labelElement instanceof HTMLLabelElement && labelElement.htmlFor === inputElement.id) {
-                labelElement.removeAttribute("for");
+        const previousInput = connectedInputRef.current;
+        if (previousInput && previousInput !== inputElement) {
+            if (previousInput.id === `input_${fieldItemId}`) {
+                previousInput.removeAttribute("id");
             }
-        } else if (labelElement instanceof HTMLLabelElement && labelableElements.includes(inputElement.tagName)) {
+            updateReferences(previousInput, "aria-labelledby", [[undefined, `label_${fieldItemId}`]]);
+            updateReferences(previousInput, "aria-describedby", [
+                [undefined, `message_${fieldItemId}`],
+                [undefined, `help_${fieldItemId}`],
+            ]);
+        }
+        connectedInputRef.current = inputElement;
+
+        if (!inputElement) {
+            return;
+        }
+
+        if (labelElement instanceof HTMLLabelElement && labelableElements.includes(inputElement.tagName)) {
             // an already set `for` is only kept if it refers to a labelable input element of this field item
             const labelTarget = labelElement.getAttribute("for");
             const refersToOwnInput = inputElements.some(
@@ -187,6 +185,9 @@ export const FieldItem = ({
         } else if (labelElement) {
             // labels that are not `label` elements, e.g. of disabled field items, cannot use `for`
             // the same is true for input elements that cannot be referenced by `for`
+            if (labelElement instanceof HTMLLabelElement) {
+                labelElement.removeAttribute("for");
+            }
             if (!inputElement.getAttribute("aria-labelledby")) {
                 inputElement.setAttribute("aria-labelledby", labelElement.id);
             }
@@ -199,15 +200,6 @@ export const FieldItem = ({
             [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 bc44853db..d9fddb362 100644
--- a/src/components/Form/tests/FieldItem.test.tsx
+++ b/src/components/Form/tests/FieldItem.test.tsx
@@ -201,8 +201,49 @@ describe("FieldItem", () => {
 
             expect(combobox).toHaveAccessibleName("Filter by language");
             expect(combobox).toHaveAccessibleDescription("Choose a language. Only matching values are shown.");
+            expect(combobox).toHaveAttribute("id", expect.stringMatching(/^input_/));
             expect(label).not.toHaveAttribute("for");
             expect(button).toHaveAttribute("aria-hidden", "true");
+            expect(button).not.toHaveAttribute("id");
+            expect(button).not.toHaveAttribute("aria-describedby");
+        });
+        it("ignores hidden inputs before a Select", () => {
+            const { fieldItem, label } = renderFieldItem({
+                labelProps: { text: "Type" },
+                helperText: "Choose a type.",
+                children: (
+                    <>
+                        <input type="hidden" value="Value" />
+                        <div className={`${eccgui}-select`} role="combobox">
+                            <button type="button">Value</button>
+                        </div>
+                    </>
+                ),
+            });
+            const hiddenInput = fieldItem.querySelector("input");
+            const combobox = fieldItem.querySelector('[role="combobox"]');
+
+            expect(combobox).toHaveAccessibleName("Type");
+            expect(combobox).toHaveAccessibleDescription("Choose a type.");
+            expect(label).not.toHaveAttribute("for");
+            expect(hiddenInput).not.toHaveAttribute("id");
+            expect(hiddenInput).not.toHaveAttribute("aria-describedby");
+            expect(hiddenInput).not.toHaveAttribute("aria-hidden");
+        });
+        it("keeps a custom accessible name on the Select combobox", () => {
+            const { fieldItem } = renderFieldItem({
+                labelProps: { text: "Type" },
+                children: (
+                    <>
+                        <span id="custom-select-label">Custom type</span>
+                        <div className={`${eccgui}-select`} role="combobox" aria-labelledby="custom-select-label">
+                            <button type="button">Value</button>
+                        </div>
+                    </>
+                ),
+            });
+
+            expect(fieldItem.querySelector('[role="combobox"]')).toHaveAccessibleName("Custom type");
         });
         it("restores the button when a Select becomes filterable", () => {
             const { container, rerender } = render(
@@ -213,6 +254,8 @@ describe("FieldItem", () => {
                 </FieldItem>,
             );
             const button = container.querySelector("button");
+            const label = container.querySelector("label");
+            const selectTarget = container.querySelector('[role="combobox"]');
             expect(button).toHaveAttribute("aria-hidden", "true");
 
             rerender(
@@ -223,6 +266,21 @@ describe("FieldItem", () => {
                 </FieldItem>,
             );
             expect(button).not.toHaveAttribute("aria-hidden");
+            expect(label).toHaveAttribute("for", button?.id);
+            expect(selectTarget).not.toHaveAttribute("id");
+            expect(selectTarget).not.toHaveAttribute("aria-labelledby");
+
+            rerender(
+                <FieldItem labelProps={{ text: "Type" }}>
+                    <div className={`${eccgui}-select`} role="combobox">
+                        <button type="button">Value</button>
+                    </div>
+                </FieldItem>,
+            );
+            expect(label).not.toHaveAttribute("for");
+            expect(container.querySelector('[role="combobox"]')).toHaveAccessibleName("Type");
+            expect(button).toHaveAttribute("aria-hidden", "true");
+            expect(button).not.toHaveAttribute("id");
         });
         it("should remove the reference to a removed label from `aria-labelledby`", () => {
             const { container, rerender } = render(

From 4146ab4a903ab3eaefd9cd4bf2d5aa18c221c31c Mon Sep 17 00:00:00 2001
From: Andreas Schultz <as.c@mailbox.org>
Date: Thu, 5 Nov 2026 17:58:48 +0100
Subject: [PATCH 4/4] Fix Select keyboard navigation and FieldItem label focus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Focus custom controls when their FieldItem label is clicked
- Preserve native label behavior and respect disabled controls
- Support Tab, Shift+Tab, Enter and Space on Select’s clear action
- Prevent clearing and tooltip updates from opening options or stealing focus
- Reuse Blueprint’s item comparison helper
- Add regression tests for label focus and keyboard navigation
---
 CHANGELOG.md                                 |   3 +
 src/components/Form/FieldItem.tsx            |  28 +++
 src/components/Form/tests/FieldItem.test.tsx | 172 +++++++++++++++-
 src/components/Select/Select.test.tsx        | 195 ++++++++++++++++++-
 src/components/Select/Select.tsx             |  76 ++++++--
 5 files changed, 451 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c802df61..acf8b7571 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,10 +8,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Fixed
 
+- `<FieldItem />`
+    - Clicking a label focuses its control when a native label association is not available, including Select comboboxes and CodeEditor.
 - `<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.
+    - Keep the clear action reachable with Tab and Shift+Tab and support clearing with Enter or Space without opening the options.
 
 ## [26.2.1] - 2026-11-02
 
diff --git a/src/components/Form/FieldItem.tsx b/src/components/Form/FieldItem.tsx
index 5f5fbf832..10ab79caf 100644
--- a/src/components/Form/FieldItem.tsx
+++ b/src/components/Form/FieldItem.tsx
@@ -220,9 +220,37 @@ export const FieldItem = ({
         return () => partsObserver.disconnect();
     }, [connectParts, preventAriaAttribution]);
 
+    const handleLabelClick: React.MouseEventHandler<HTMLLabelElement> = (event) => {
+        labelProps?.onClick?.(event);
+        if (event.defaultPrevented || disabled || preventAriaAttribution) {
+            return;
+        }
+        const labelElement = event.currentTarget;
+        if (labelElement instanceof HTMLLabelElement && labelElement.control) {
+            return;
+        }
+        if (!(event.target instanceof Node) || !labelElement.contains(event.target)) {
+            return;
+        }
+        const interactiveTarget =
+            event.target instanceof Element
+                ? event.target.closest(
+                      "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable=true], [role=button], [role=link]",
+                  )
+                : null;
+        if (interactiveTarget && labelElement.contains(interactiveTarget)) {
+            return;
+        }
+        const control = connectedInputRef.current;
+        if (control && !control.matches(':disabled, [aria-disabled="true"], [contenteditable="false"]')) {
+            control.focus();
+        }
+    };
+
     const label = (
         <Label
             {...labelProps}
+            onClick={handleLabelClick}
             className={`${eccgui}-fielditem__label` + (labelProps?.className ? " " + labelProps.className : "")}
             disabled={disabled}
         />
diff --git a/src/components/Form/tests/FieldItem.test.tsx b/src/components/Form/tests/FieldItem.test.tsx
index d9fddb362..965fcc7f1 100644
--- a/src/components/Form/tests/FieldItem.test.tsx
+++ b/src/components/Form/tests/FieldItem.test.tsx
@@ -1,5 +1,7 @@
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createPortal } from "react-dom";
 
 import "@testing-library/jest-dom";
 
@@ -401,6 +403,150 @@ describe("FieldItem", () => {
     });
 });
 
+describe("FieldItem label activation", () => {
+    const renderCombobox = (props: React.ComponentProps<typeof FieldItem> = {}) =>
+        renderFieldItem({
+            labelProps: { text: "Type" },
+            children: (
+                <div className={`${eccgui}-select`} role="combobox" tabIndex={0}>
+                    <button type="button" tabIndex={-1}>
+                        Value
+                    </button>
+                </div>
+            ),
+            ...props,
+        });
+
+    it("focuses the combobox when clicking its label", async () => {
+        const user = userEvent.setup();
+        renderCombobox();
+
+        await user.click(screen.getByText("Type"));
+
+        expect(screen.getByRole("combobox", { name: "Type" })).toHaveFocus();
+    });
+
+    it("focuses an input when its label is rendered as a span", async () => {
+        const user = userEvent.setup();
+        renderFieldItem({
+            labelProps: { text: "Name", isLayoutForElement: "span" },
+            children: <input />,
+        });
+
+        await user.click(screen.getByText("Name"));
+
+        expect(screen.getByRole("textbox", { name: "Name" })).toHaveFocus();
+    });
+
+    it("focuses the control inside a focusable ancestor", async () => {
+        const user = userEvent.setup();
+        render(
+            <div tabIndex={-1}>
+                <FieldItem labelProps={{ text: "Type" }}>
+                    <div className={`${eccgui}-select`} role="combobox" tabIndex={0}>
+                        Value
+                    </div>
+                </FieldItem>
+            </div>,
+        );
+
+        await user.click(screen.getByText("Type"));
+
+        expect(screen.getByRole("combobox")).toHaveFocus();
+    });
+
+    it("preserves native activation of an explicitly labelled second input", async () => {
+        const user = userEvent.setup();
+        const { input } = renderFieldItem({
+            labelProps: { text: "Second", htmlFor: "second" },
+            children: (
+                <>
+                    <input id="first" />
+                    <input id="second" />
+                </>
+            ),
+        });
+        const focusFirst = jest.spyOn(input, "focus");
+
+        await user.click(screen.getByText("Second"));
+
+        expect(screen.getByRole("textbox", { name: "Second" })).toHaveFocus();
+        expect(focusFirst).not.toHaveBeenCalled();
+    });
+
+    it.each([false, true])("respects a label click handler with preventDefault=%s", async (cancel) => {
+        const user = userEvent.setup();
+        const onClick = jest.fn((event: React.MouseEvent<HTMLLabelElement>) => {
+            if (cancel) event.preventDefault();
+        });
+        renderCombobox({ labelProps: { text: "Type", onClick } });
+
+        await user.click(screen.getByText("Type"));
+
+        expect(onClick).toHaveBeenCalledTimes(1);
+        if (cancel) {
+            expect(screen.getByRole("combobox")).not.toHaveFocus();
+        } else {
+            expect(screen.getByRole("combobox")).toHaveFocus();
+        }
+    });
+
+    it.each(["link", "button", "focusable text"])("preserves clicks on a %s inside the label", async (kind) => {
+        const user = userEvent.setup();
+        const help =
+            kind === "link" ? (
+                <a href="#field-help">Help</a>
+            ) : kind === "button" ? (
+                <button type="button">Help</button>
+            ) : (
+                <span tabIndex={0}>Help</span>
+            );
+        renderCombobox({ labelProps: { text: "Type", additionalElements: help } });
+        const focusControl = jest.spyOn(screen.getByRole("combobox"), "focus");
+
+        await user.click(screen.getByText("Help"));
+
+        expect(focusControl).not.toHaveBeenCalled();
+        expect(screen.getByText("Help")).toHaveFocus();
+    });
+
+    it("preserves clicks on portaled label content", async () => {
+        const user = userEvent.setup();
+        renderCombobox({
+            labelProps: {
+                text: "Type",
+                additionalElements: createPortal(<button type="button">Help</button>, document.body),
+            },
+        });
+        const focusControl = jest.spyOn(screen.getByRole("combobox"), "focus");
+
+        await user.click(screen.getByText("Help"));
+
+        expect(focusControl).not.toHaveBeenCalled();
+        expect(screen.getByText("Help")).toHaveFocus();
+    });
+
+    it("does not focus the control of a disabled field", async () => {
+        const user = userEvent.setup();
+        renderCombobox({ disabled: true });
+        const focusControl = jest.spyOn(screen.getByRole("combobox"), "focus");
+
+        await user.click(screen.getByText("Type"));
+
+        expect(focusControl).not.toHaveBeenCalled();
+    });
+
+    it("does not add focus behavior when automatic connections are disabled", async () => {
+        const user = userEvent.setup();
+        renderCombobox({ preventAriaAttribution: true });
+        const focusControl = jest.spyOn(screen.getByRole("combobox"), "focus");
+
+        await user.click(screen.getByText("Type"));
+
+        expect(focusControl).not.toHaveBeenCalled();
+    });
+});
+
 describe("FieldItem with CodeEditor", () => {
     beforeAll(() => {
         // the code editor needs range support that is not provided by jsdom
@@ -435,4 +581,28 @@ describe("FieldItem with CodeEditor", () => {
         expect(input).toHaveAttribute("aria-labelledby", label.id);
         expect(input).toHaveAttribute("aria-describedby", message.id);
     });
+
+    it.each([
+        [false, false],
+        [false, true],
+        [true, false],
+        [true, true],
+    ])("handles label clicks with disabled=%s and readOnly=%s", async (disabled, readOnly) => {
+        const user = userEvent.setup();
+        const { container } = render(
+            <FieldItem labelProps={{ text: "Expression" }}>
+                <CodeEditor name="expression" mode="yaml" disabled={disabled} readOnly={readOnly} />
+            </FieldItem>,
+        );
+        const input = container.querySelector(".cm-content");
+        await waitFor(() => expect(input).toHaveAccessibleName("Expression"));
+
+        await user.click(screen.getByText("Expression"));
+
+        if (disabled) {
+            expect(input).not.toHaveFocus();
+        } else {
+            expect(input).toHaveFocus();
+        }
+    });
 });
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index ef1218c6a..e750c6f1a 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom";
@@ -36,6 +36,199 @@ it("connects a filterable Select search input to its listbox", async () => {
 });
 
 describe("non-filterable Select keyboard navigation", () => {
+    const renderClearableSelect = (onClearanceText = "Reset selection", disabled = false, filterable = false) => {
+        const onClear = jest.fn();
+        const onItemSelect = jest.fn();
+        const ClearableSelect = () => {
+            const [text, setText] = React.useState<string | undefined>("Value");
+            return (
+                <>
+                    <button type="button">Before</button>
+                    <FieldItem labelProps={{ text: "Type" }}>
+                        <Select
+                            filterable={filterable}
+                            disabled={disabled}
+                            items={["Value", "Object"]}
+                            itemRenderer={(item, { handleClick, id, modifiers }) => (
+                                <MenuItem
+                                    key={item}
+                                    id={id}
+                                    text={item}
+                                    onClick={handleClick}
+                                    active={modifiers.active}
+                                    roleStructure="none"
+                                    role="option"
+                                    tabIndex={-1}
+                                />
+                            )}
+                            onItemSelect={onItemSelect}
+                            onClearanceText={onClearanceText}
+                            onClearanceHandler={() => {
+                                onClear();
+                                setText(undefined);
+                            }}
+                            text={text}
+                            placeholder="Choose a type"
+                            contextOverlayProps={{ transitionDuration: 0 }}
+                        />
+                    </FieldItem>
+                    <button type="button">After</button>
+                </>
+            );
+        };
+        render(<ClearableSelect />);
+        const control = screen.getByRole(filterable ? "button" : "combobox", { name: "Type" });
+        const getClearAction = () => control.querySelector('[tabindex="0"]');
+        return { control, getClearAction, onClear, onItemSelect };
+    };
+
+    it.each(["Reset selection", ""])("tabs through the clear action with tooltip %j", async (tooltip) => {
+        const user = userEvent.setup();
+        const { control: combobox, getClearAction, onClear } = renderClearableSelect(tooltip);
+
+        await user.tab();
+        expect(screen.getByRole("button", { name: "Before" })).toHaveFocus();
+        await user.tab();
+        expect(combobox).toHaveFocus();
+        await user.tab();
+        expect(getClearAction()).toHaveFocus();
+        await user.tab();
+        expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+        await user.tab({ shift: true });
+        expect(getClearAction()).toHaveFocus();
+        await user.tab({ shift: true });
+        expect(combobox).toHaveFocus();
+        await user.tab({ shift: true });
+        expect(screen.getByRole("button", { name: "Before" })).toHaveFocus();
+        expect(combobox).toHaveAttribute("aria-expanded", "false");
+        expect(onClear).not.toHaveBeenCalled();
+    });
+
+    it.each(["{Enter}", " "])("clears with %s without opening the list", async (key) => {
+        const user = userEvent.setup();
+        const { control: combobox, getClearAction, onClear, onItemSelect } = renderClearableSelect();
+        await user.tab();
+        await user.tab();
+        await user.tab();
+        expect(getClearAction()).toHaveFocus();
+        await user.keyboard("{ArrowDown}");
+        expect(combobox).toHaveAttribute("aria-expanded", "false");
+        expect(getClearAction()).toHaveFocus();
+
+        await user.keyboard(key);
+
+        expect(onClear).toHaveBeenCalledTimes(1);
+        expect(onItemSelect).not.toHaveBeenCalled();
+        expect(combobox).toHaveTextContent("Choose a type");
+        expect(combobox).toHaveAttribute("aria-expanded", "false");
+        expect(combobox).toHaveFocus();
+        await user.tab();
+        expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+    });
+
+    it.each(["Reset selection", ""])("closes the open list when tabbing to clear with tooltip %j", async (tooltip) => {
+        const user = userEvent.setup();
+        const { control: combobox, getClearAction } = renderClearableSelect(tooltip);
+        await user.tab();
+        await user.tab();
+        await user.keyboard("{Enter}");
+        expect(combobox).toHaveAttribute("aria-expanded", "true");
+
+        await user.tab();
+
+        await waitFor(() => expect(combobox).toHaveAttribute("aria-expanded", "false"));
+        await waitFor(() => expect(getClearAction()).toHaveFocus());
+        await user.tab();
+        await waitFor(() => expect(screen.getByRole("button", { name: "After" })).toHaveFocus());
+    });
+
+    it("keeps focus on the next control after the clear tooltip updates", async () => {
+        const user = userEvent.setup();
+        renderClearableSelect();
+        await user.tab();
+        await user.tab();
+        await user.tab();
+        await user.tab();
+
+        await act(async () => new Promise<void>((resolve) => setTimeout(resolve, 200)));
+
+        expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+    });
+
+    it("skips both the combobox and clear action when disabled", async () => {
+        const user = userEvent.setup();
+        const { onClear } = renderClearableSelect("Reset selection", true);
+        await user.tab();
+        await user.tab();
+
+        expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+        expect(onClear).not.toHaveBeenCalled();
+    });
+
+    it.each(["{Enter}", " "])("clears a filterable Select with %s without opening the list", async (key) => {
+        const user = userEvent.setup();
+        const { control, getClearAction, onClear, onItemSelect } = renderClearableSelect(
+            "Reset selection",
+            false,
+            true,
+        );
+        await user.tab();
+        await user.tab();
+        expect(control).toHaveFocus();
+        await user.tab();
+        expect(getClearAction()).toHaveFocus();
+
+        await user.keyboard(key);
+
+        expect(onClear).toHaveBeenCalledTimes(1);
+        expect(onItemSelect).not.toHaveBeenCalled();
+        expect(control).toHaveFocus();
+        expect(control).toHaveTextContent("Choose a type");
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+
+    it("preserves pointer clearing without opening the list", async () => {
+        const user = userEvent.setup();
+        const { control, getClearAction, onClear } = renderClearableSelect();
+
+        await user.click(getClearAction()!);
+
+        expect(onClear).toHaveBeenCalledTimes(1);
+        expect(control).toHaveFocus();
+        expect(control).toHaveAttribute("aria-expanded", "false");
+        expect(control).toHaveTextContent("Choose a type");
+    });
+
+    it.each([false, true])("handles label clicks with disabled=%s", async (disabled) => {
+        const user = userEvent.setup();
+        render(
+            <FieldItem labelProps={{ text: "Type" }}>
+                <Select
+                    filterable={false}
+                    disabled={disabled}
+                    items={["Value"]}
+                    itemRenderer={(item, { handleClick, id }) => (
+                        <MenuItem key={item} id={id} text={item} onClick={handleClick} />
+                    )}
+                    onItemSelect={jest.fn()}
+                    text="Value"
+                />
+            </FieldItem>,
+        );
+        const combobox = screen.getByRole("combobox", { name: "Type" });
+        const focusControl = jest.spyOn(combobox, "focus");
+
+        await user.click(screen.getByText("Type"));
+
+        if (disabled) {
+            expect(focusControl).not.toHaveBeenCalled();
+            expect(combobox).not.toHaveFocus();
+        } else {
+            expect(combobox).toHaveFocus();
+        }
+        expect(combobox).toHaveAttribute("aria-expanded", "false");
+    });
+
     it("keeps focus on the combobox while navigating and returns to it after Escape", async () => {
         const user = userEvent.setup();
         const onItemSelect = jest.fn();
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 89fcccc31..20c771523 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Classes as BlueprintClasses, InputGroupProps } from "@blueprintjs/core";
-import { Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select";
+import { executeItemsEqual, Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Button, ButtonProps } from "../Button/Button";
@@ -93,17 +93,9 @@ export function Select<T>({
 
     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]
-                );
-            });
+            const matchingItem = itemIds.current.find(({ item }) =>
+                executeItemsEqual(otherSelectProps.itemsEqual, item, activeItem),
+            );
             if (matchingItem && !isCreateNewItem) {
                 comboboxRef.current.setAttribute("aria-activedescendant", matchingItem.id);
             } else {
@@ -120,6 +112,36 @@ export function Select<T>({
         return itemRenderer(item, props);
     };
 
+    const handleClear = (event: React.SyntheticEvent<Element>) => {
+        event.stopPropagation();
+        if (otherSelectProps.disabled) {
+            return;
+        }
+        const trigger = event.currentTarget.closest("button");
+        onClearanceHandler?.();
+        if (filterable) {
+            trigger?.focus();
+        } else {
+            comboboxRef.current?.focus();
+        }
+    };
+
+    const handleClearKeyDown: React.KeyboardEventHandler = (event) => {
+        event.stopPropagation();
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+        }
+    };
+
+    const handleClearKeyUp: React.KeyboardEventHandler = (event) => {
+        event.stopPropagation();
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            // Return focus after key release so the trigger cannot activate with the same key.
+            handleClear(event);
+        }
+    };
+
     const target = children ?? (
         <Button
             text={text ? <OverflowText>{text}</OverflowText> : <OverflowText>{placeholder}</OverflowText>}
@@ -131,14 +153,22 @@ export function Select<T>({
             rightIcon={
                 <>
                     {onClearanceHandler && text && (
-                        <Icon
-                            name="operation-clear"
-                            tooltipText={onClearanceText ? onClearanceText : undefined}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                onClearanceHandler();
-                            }}
-                        />
+                        <span
+                            tabIndex={!onClearanceText ? (otherSelectProps.disabled ? -1 : 0) : undefined}
+                            onClick={handleClear}
+                            onKeyDown={handleClearKeyDown}
+                            onKeyUp={handleClearKeyUp}
+                        >
+                            <Icon
+                                name="operation-clear"
+                                tooltipText={onClearanceText ? onClearanceText : undefined}
+                                tooltipProps={{
+                                    disabled: otherSelectProps.disabled,
+                                    // Prevent placeholder swaps from restoring stale focus.
+                                    usePlaceholder: false,
+                                }}
+                            />
+                        </span>
                     )}
                     {typeof rightIcon === "string" ? (
                         <Icon name={rightIcon} />
@@ -165,7 +195,11 @@ export function Select<T>({
                     : {
                           onFocusCapture: (event) => {
                               comboboxRef.current = event.currentTarget;
-                              if (event.target !== event.currentTarget) {
+                              if (
+                                  event.target !== event.currentTarget &&
+                                  event.target instanceof Element &&
+                                  event.target.matches('[tabindex="-1"]')
+                              ) {
                                   event.currentTarget.focus();
                               }
                           },