From ae7fb8b8457e67341520cda3f282680e5c34d711 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 24 Jul 2026 15:38:09 -0300
Subject: [PATCH 1/4] feat(forms): add SelectField for labelled, accessible
 selects

Adds a SelectField component: the design-system counterpart to InputGroup
for a react-select control. It wires the label, inline error, and aria
relationships off a single id (htmlFor -> inputId, aria-invalid,
aria-errormessage), which the InputGroup `component` slot does not do.

First cut only. No call sites migrated yet; the error-state styling and
react-select aria verification are follow-ups tracked in
SELECT_FIELD_MIGRATION.md.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/SELECT_FIELD_MIGRATION.md            | 72 +++++++++++++++
 .../components/SelectField.stories.tsx        | 68 ++++++++++++++
 .../web/components/base/forms/SelectField.tsx | 90 +++++++++++++++++++
 3 files changed, 230 insertions(+)
 create mode 100644 frontend/SELECT_FIELD_MIGRATION.md
 create mode 100644 frontend/documentation/components/SelectField.stories.tsx
 create mode 100644 frontend/web/components/base/forms/SelectField.tsx

diff --git a/frontend/SELECT_FIELD_MIGRATION.md b/frontend/SELECT_FIELD_MIGRATION.md
new file mode 100644
index 000000000000..22c6d5fb2feb
--- /dev/null
+++ b/frontend/SELECT_FIELD_MIGRATION.md
@@ -0,0 +1,72 @@
+# Removing the `InputGroup` `component` prop
+
+Plan to retire `<InputGroup component={...} />` in favour of purpose-built, accessible field components. Contributes to #7364 (unified form field standardisation).
+
+## Why
+
+`InputGroup`'s value is that it wires a labelled field's accessibility for you: `htmlFor` / `id` on the label and control, `aria-invalid`, and `aria-describedby` to the error, all off one id.
+
+The `component` prop bypasses all of that. When you pass `component={<Select .../>}`:
+
+- the label renders `htmlFor={id}`, but the custom control never receives that `id`, so the label points at nothing;
+- the control gets no `aria-invalid` and no link to the error;
+- `FieldError` renders with an id nothing references.
+
+So the field looks wired up and announces none of it to assistive tech. You can see this today in `CreatePipelineStage.tsx`: the "No environments with feature versioning enabled" error is passed via `inputProps.error`, renders as text, and the Select neither references it nor is marked invalid (the red border is hand-drawn via react-select `styles`).
+
+The `component` payload is overwhelmingly a `Select`. A generic `children` + `cloneElement` fix would not help, because react-select needs its a11y threaded through its own props (`inputId`, `aria-*`), not an `id` on a wrapper. That is why the fix is a purpose-built component, not a tweak to `InputGroup`.
+
+## End state
+
+| Case | Replacement |
+| --- | --- |
+| `InputGroup` wrapping a `Select` | `SelectField` (label + Select + FieldError, a11y wired via `inputId`) |
+| `InputGroup` wrapping a genuinely custom control (colour picker, DateSelect, bespoke widget) | standalone `FieldLabel` + `FieldError`, wiring the id trio by hand |
+| Plain text / number / textarea | `InputGroup` (unchanged) |
+
+Then the `component` prop is deleted from `InputGroup`, and a lint rule stops it coming back.
+
+## Inventory (origin/main)
+
+~21 files use `<InputGroup component={...} />`. Bucketed by payload:
+
+**Select (migrate to `SelectField`)**
+- `web/components/tables/TableValueFilter.tsx`
+- `web/components/release-pipelines/CreatePipelineStage.tsx` (Environment, Trigger)
+- `web/components/release-pipelines/SinglePipelineStageAction.tsx` (Flag Action, Segment)
+- `web/components/release-pipelines/AddToReleasePipelineModal.tsx`
+- `web/components/modals/CreateMetadataField.tsx` (Type)
+- `web/components/modals/CreateSegmentUsersTabContent.tsx` (Environment)
+- `web/components/modals/CreateSegment.tsx`
+- `web/components/modals/create-feature/tabs/FeatureValueTab.tsx`
+- `web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx`
+- `web/components/mv/VariationValueInput/VariationValueInput.tsx`
+- `web/components/pages/CreateOrganisationPage.tsx`
+- `web/components/pages/CreateEnvironmentPage.tsx` (x2)
+- `web/components/pages/ChangeRequestDetailPage.tsx`
+- `web/components/pages/ReleaseManagerPage.tsx`
+- `web/components/pages/environment-settings/EnvironmentSettingsPage.tsx`
+- `web/components/pages/organisation-settings/tabs/sso/saml/modals/CreateSAML.tsx` (x2)
+- `web/components/pages/organisation-settings/tabs/sso/scim/modals/ScimTokenModal.tsx`
+- `web/components/pages/project-settings/tabs/general-tab/sections/additional-settings/FeatureNameValidation.tsx`
+- `web/components/metadata/SupportedContentTypesSelect.tsx`
+- `web/components/EditPermissions.tsx`
+
+**Non-Select (migrate to standalone `FieldLabel` + `FieldError`)**
+- `web/components/modals/ChangeRequestModal.tsx` (datepicker; check both sites)
+- `web/components/tags/CreateEditTag.tsx` (colour picker)
+
+Counts are a starting map, not a per-site read. A few `component=` matches in these files may not be on `InputGroup`; confirm per site when migrating.
+
+## Steps
+
+1. **Ship `SelectField`** (this PR): label + Select + FieldError, a11y wired via `inputId` / `aria-*`, plus a Storybook story. No call sites migrated yet.
+2. **Verify the a11y forwarding** through react-select v5 (that `aria-errormessage` / `aria-invalid` reach the input; fall back to `aria-describedby` if not). Add a visual error state (red border) inside `SelectField` so consumers stop hand-rolling `styles`.
+3. **Migrate the Select sites** to `SelectField` in small batches by area (release-pipelines, modals, settings). Each batch is its own PR.
+4. **Migrate the non-Select sites** to standalone `FieldLabel` + `FieldError`.
+5. **Delete `component` from `InputGroup`** and land a lint guardrail (`no-restricted-syntax` on a `component` attribute on `<InputGroup>`) in the same PR, so the door shuts behind the migration.
+
+## Notes
+
+- `SelectField` is a first cut. The error-state styling and the react-select aria verification (step 2) are deliberately follow-ups so this PR stays reviewable.
+- The base `Select` (`web/project/project-components.js`) is untyped JS and spreads props into react-select, which is why `SelectField` types its own surface off react-select's `Props` plus the base's custom extras (`size`, `autoSelect`).
diff --git a/frontend/documentation/components/SelectField.stories.tsx b/frontend/documentation/components/SelectField.stories.tsx
new file mode 100644
index 000000000000..4823e4696372
--- /dev/null
+++ b/frontend/documentation/components/SelectField.stories.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import SelectField from 'components/base/forms/SelectField'
+
+const meta: Meta<typeof SelectField> = {
+  component: SelectField,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/SelectField',
+}
+export default meta
+
+type Story = StoryObj<typeof SelectField>
+
+const options = [
+  { label: 'Production', value: 'production' },
+  { label: 'Staging', value: 'staging' },
+  { label: 'Development', value: 'development' },
+]
+
+export const Default: Story = {
+  render: () => (
+    <SelectField title='Environment' options={options} value={options[0]} />
+  ),
+}
+
+export const Required: Story = {
+  render: () => (
+    <SelectField
+      title='Environment'
+      required
+      options={options}
+      placeholder='Select an environment'
+    />
+  ),
+}
+
+export const WithTooltip: Story = {
+  render: () => (
+    <SelectField
+      title='Environment'
+      tooltip='Where this change is applied.'
+      options={options}
+      value={options[0]}
+    />
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <SelectField
+      title='Environment'
+      options={options}
+      error='Select an environment.'
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <SelectField
+      title='Environment'
+      options={options}
+      value={options[0]}
+      isDisabled
+    />
+  ),
+}
diff --git a/frontend/web/components/base/forms/SelectField.tsx b/frontend/web/components/base/forms/SelectField.tsx
new file mode 100644
index 000000000000..54f34cb0d95a
--- /dev/null
+++ b/frontend/web/components/base/forms/SelectField.tsx
@@ -0,0 +1,90 @@
+import React, { ReactNode, useId } from 'react'
+import cn from 'classnames'
+import { GroupBase, Props as ReactSelectProps } from 'react-select'
+import { TooltipProps } from 'components/Tooltip'
+import FieldError from './FieldError'
+import FieldLabel from './FieldLabel'
+
+// Props consumed by the field wrapper. Everything else is forwarded to Select.
+interface OwnProps {
+  title?: ReactNode
+  // Base id for the field. The inner combobox input uses it (so the label's
+  // htmlFor resolves) and the error derives `${id}-error` from it.
+  id?: string
+  error?: ReactNode
+  required?: boolean
+  tooltip?: string
+  tooltipPlace?: TooltipProps['place']
+  // Wrapper class; defaults to a form-group for consistent spacing.
+  className?: string
+  noMargin?: boolean
+  'data-test'?: string
+}
+
+// Custom props our global Select adds on top of react-select.
+interface BaseSelectExtras {
+  size?: string
+  autoSelect?: boolean
+}
+
+export type SelectFieldProps<
+  Option = unknown,
+  IsMulti extends boolean = false,
+> = OwnProps &
+  BaseSelectExtras &
+  Omit<
+    ReactSelectProps<Option, IsMulti, GroupBase<Option>>,
+    | keyof OwnProps
+    | keyof BaseSelectExtras
+    | 'inputId'
+    | 'aria-invalid'
+    | 'aria-errormessage'
+  >
+
+// A labelled, accessible Select. The DS counterpart to InputGroup for a
+// react-select control: it wires the label, the inline error, and the aria
+// relationships off one id, so consumers stop wrapping a bare Select in
+// InputGroup's `component` slot (which renders the control with no a11y
+// wiring at all). Prefer this over `<InputGroup component={<Select />} />`.
+function SelectField<Option = unknown, IsMulti extends boolean = false>({
+  className,
+  'data-test': dataTest,
+  error,
+  id,
+  noMargin,
+  required,
+  title,
+  tooltip,
+  tooltipPlace,
+  ...selectProps
+}: SelectFieldProps<Option, IsMulti>) {
+  const generatedId = useId()
+  const inputId = id || generatedId
+  const errorId = `${inputId}-error`
+  const hasError = !!error
+
+  return (
+    <div className={cn(className, { 'form-group': !noMargin })}>
+      {(!!title || !!tooltip) && (
+        <FieldLabel
+          htmlFor={inputId}
+          required={required}
+          tooltip={tooltip}
+          tooltipPlace={tooltipPlace}
+        >
+          {title}
+        </FieldLabel>
+      )}
+      <Select
+        {...selectProps}
+        inputId={inputId}
+        data-test={dataTest}
+        aria-invalid={hasError || undefined}
+        aria-errormessage={hasError ? errorId : undefined}
+      />
+      <FieldError id={errorId} error={error} />
+    </div>
+  )
+}
+
+export default SelectField

From d8cd50e4cd9b50aa51d0c514c6853cd9b2d3e3b8 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 24 Jul 2026 15:44:29 -0300
Subject: [PATCH 2/4] docs(forms): note the Select E2E fork-drop as a sequenced
 follow-up

Records the decision to drop the Select E2E (TestCafe-era) fork in its own
Select-only PR, after the SelectField call-site migration.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/SELECT_FIELD_MIGRATION.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/SELECT_FIELD_MIGRATION.md b/frontend/SELECT_FIELD_MIGRATION.md
index 22c6d5fb2feb..fb468d05d637 100644
--- a/frontend/SELECT_FIELD_MIGRATION.md
+++ b/frontend/SELECT_FIELD_MIGRATION.md
@@ -70,3 +70,17 @@ Counts are a starting map, not a per-site read. A few `component=` matches in th
 
 - `SelectField` is a first cut. The error-state styling and the react-select aria verification (step 2) are deliberately follow-ups so this PR stays reviewable.
 - The base `Select` (`web/project/project-components.js`) is untyped JS and spreads props into react-select, which is why `SelectField` types its own surface off react-select's `Props` plus the base's custom extras (`size`, `autoSelect`).
+
+## Related follow-up: drop the Select E2E fork (separate PR, after SelectField)
+
+The base `Select` swaps to a bespoke `<input> + <a>` DOM when `global.E2E` is true. This is TestCafe-era scaffolding; E2E is fully Playwright now, and Playwright can drive real react-select. The fork is the source of the "Select behaves differently under E2E" bugs (e.g. the fork keys its input off `id`, while react-select uses `inputId`).
+
+Kept out of the `component`-prop migration on purpose. Sequenced **after** the Select call sites move to `SelectField`, as its own Select-only PR:
+
+1. Add `data-test` to the real (non-E2E) `Select` container so tests can target it (react-select does not render arbitrary `data-test`).
+2. Add a Playwright `selectOption(selectTestId, label)` helper: click the container to open the menu, click `.react-select__option` by text.
+3. Migrate the sites that use the fork's `*-option-N` ids: `invite-test.pw.ts`, `roles-test.pw.ts`, and the `select-segment-option-${i}` helper in `e2e-helpers.playwright.ts`.
+4. Remove the `E2E ?` branch from `Select`.
+5. Run the affected specs (`invite`, `roles`, segment) to confirm. Requires Docker + API on localhost:8000.
+
+Scope is `Select` only. The other E2E forks (`toast`, `ValueEditor`, `FeatureAction`, `ActionItem`, the config/organisation stores) are out of scope.

From 1d8ee58922e024586be2d201ce774201d792b5b0 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 24 Jul 2026 15:46:03 -0300
Subject: [PATCH 3/4] docs(forms): prefer a11y/role selectors for the Select
 E2E follow-up

Target selects by role and accessible name rather than data-test, so the
E2E suite doubles as an accessibility regression guard.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/SELECT_FIELD_MIGRATION.md | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/SELECT_FIELD_MIGRATION.md b/frontend/SELECT_FIELD_MIGRATION.md
index fb468d05d637..e4ffd29e7f57 100644
--- a/frontend/SELECT_FIELD_MIGRATION.md
+++ b/frontend/SELECT_FIELD_MIGRATION.md
@@ -75,12 +75,21 @@ Counts are a starting map, not a per-site read. A few `component=` matches in th
 
 The base `Select` swaps to a bespoke `<input> + <a>` DOM when `global.E2E` is true. This is TestCafe-era scaffolding; E2E is fully Playwright now, and Playwright can drive real react-select. The fork is the source of the "Select behaves differently under E2E" bugs (e.g. the fork keys its input off `id`, while react-select uses `inputId`).
 
-Kept out of the `component`-prop migration on purpose. Sequenced **after** the Select call sites move to `SelectField`, as its own Select-only PR:
+Kept out of the `component`-prop migration on purpose. Sequenced **after** the Select call sites move to `SelectField`, as its own Select-only PR.
 
-1. Add `data-test` to the real (non-E2E) `Select` container so tests can target it (react-select does not render arbitrary `data-test`).
-2. Add a Playwright `selectOption(selectTestId, label)` helper: click the container to open the menu, click `.react-select__option` by text.
-3. Migrate the sites that use the fork's `*-option-N` ids: `invite-test.pw.ts`, `roles-test.pw.ts`, and the `select-segment-option-${i}` helper in `e2e-helpers.playwright.ts`.
-4. Remove the `E2E ?` branch from `Select`.
-5. Run the affected specs (`invite`, `roles`, segment) to confirm. Requires Docker + API on localhost:8000.
+Prefer accessibility selectors over `data-test`. This is the payoff of `SelectField`: a select with a proper label gets an accessible name, so Playwright can target it by role, with no bespoke test id. The sequencing matters here, once the target selects render through `SelectField` (with a `title`), the role selectors work.
+
+This also makes the E2E suite a standing accessibility guard: a role/name selector only resolves if the component is genuinely accessible, so if a select later loses its label the test fails loudly instead of the accessibility silently rotting. `data-test` selectors give no such signal.
+
+1. Add a Playwright `selectOption(name, optionLabel)` helper using role/name selectors:
+   ```ts
+   await page.getByRole('combobox', { name }).click()          // open the menu
+   await page.getByRole('option', { name: optionLabel }).click()
+   ```
+2. Migrate the sites that use the fork's `*-option-N` ids to the helper: `invite-test.pw.ts`, `roles-test.pw.ts`, and the `select-segment-option-${i}` helper in `e2e-helpers.playwright.ts`.
+3. Remove the `E2E ?` branch from `Select`.
+4. Run the affected specs (`invite`, `roles`, segment) to confirm. Requires Docker + API on localhost:8000.
+
+Fallback: a select without a visible label (inline filters, etc.) has no accessible name. Give it an `aria-label` (via `SelectField`) so it stays role-targetable, rather than reintroducing a `data-test`.
 
 Scope is `Select` only. The other E2E forks (`toast`, `ValueEditor`, `FeatureAction`, `ActionItem`, the config/organisation stores) are out of scope.

From 502632c0fc3f39e24f80b7e379e89477d9256126 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 27 Jul 2026 13:57:22 -0300
Subject: [PATCH 4/4] chore(forms): keep the SelectField migration plan as a
 local working doc

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/SELECT_FIELD_MIGRATION.md | 95 ------------------------------
 1 file changed, 95 deletions(-)
 delete mode 100644 frontend/SELECT_FIELD_MIGRATION.md

diff --git a/frontend/SELECT_FIELD_MIGRATION.md b/frontend/SELECT_FIELD_MIGRATION.md
deleted file mode 100644
index e4ffd29e7f57..000000000000
--- a/frontend/SELECT_FIELD_MIGRATION.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# Removing the `InputGroup` `component` prop
-
-Plan to retire `<InputGroup component={...} />` in favour of purpose-built, accessible field components. Contributes to #7364 (unified form field standardisation).
-
-## Why
-
-`InputGroup`'s value is that it wires a labelled field's accessibility for you: `htmlFor` / `id` on the label and control, `aria-invalid`, and `aria-describedby` to the error, all off one id.
-
-The `component` prop bypasses all of that. When you pass `component={<Select .../>}`:
-
-- the label renders `htmlFor={id}`, but the custom control never receives that `id`, so the label points at nothing;
-- the control gets no `aria-invalid` and no link to the error;
-- `FieldError` renders with an id nothing references.
-
-So the field looks wired up and announces none of it to assistive tech. You can see this today in `CreatePipelineStage.tsx`: the "No environments with feature versioning enabled" error is passed via `inputProps.error`, renders as text, and the Select neither references it nor is marked invalid (the red border is hand-drawn via react-select `styles`).
-
-The `component` payload is overwhelmingly a `Select`. A generic `children` + `cloneElement` fix would not help, because react-select needs its a11y threaded through its own props (`inputId`, `aria-*`), not an `id` on a wrapper. That is why the fix is a purpose-built component, not a tweak to `InputGroup`.
-
-## End state
-
-| Case | Replacement |
-| --- | --- |
-| `InputGroup` wrapping a `Select` | `SelectField` (label + Select + FieldError, a11y wired via `inputId`) |
-| `InputGroup` wrapping a genuinely custom control (colour picker, DateSelect, bespoke widget) | standalone `FieldLabel` + `FieldError`, wiring the id trio by hand |
-| Plain text / number / textarea | `InputGroup` (unchanged) |
-
-Then the `component` prop is deleted from `InputGroup`, and a lint rule stops it coming back.
-
-## Inventory (origin/main)
-
-~21 files use `<InputGroup component={...} />`. Bucketed by payload:
-
-**Select (migrate to `SelectField`)**
-- `web/components/tables/TableValueFilter.tsx`
-- `web/components/release-pipelines/CreatePipelineStage.tsx` (Environment, Trigger)
-- `web/components/release-pipelines/SinglePipelineStageAction.tsx` (Flag Action, Segment)
-- `web/components/release-pipelines/AddToReleasePipelineModal.tsx`
-- `web/components/modals/CreateMetadataField.tsx` (Type)
-- `web/components/modals/CreateSegmentUsersTabContent.tsx` (Environment)
-- `web/components/modals/CreateSegment.tsx`
-- `web/components/modals/create-feature/tabs/FeatureValueTab.tsx`
-- `web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx`
-- `web/components/mv/VariationValueInput/VariationValueInput.tsx`
-- `web/components/pages/CreateOrganisationPage.tsx`
-- `web/components/pages/CreateEnvironmentPage.tsx` (x2)
-- `web/components/pages/ChangeRequestDetailPage.tsx`
-- `web/components/pages/ReleaseManagerPage.tsx`
-- `web/components/pages/environment-settings/EnvironmentSettingsPage.tsx`
-- `web/components/pages/organisation-settings/tabs/sso/saml/modals/CreateSAML.tsx` (x2)
-- `web/components/pages/organisation-settings/tabs/sso/scim/modals/ScimTokenModal.tsx`
-- `web/components/pages/project-settings/tabs/general-tab/sections/additional-settings/FeatureNameValidation.tsx`
-- `web/components/metadata/SupportedContentTypesSelect.tsx`
-- `web/components/EditPermissions.tsx`
-
-**Non-Select (migrate to standalone `FieldLabel` + `FieldError`)**
-- `web/components/modals/ChangeRequestModal.tsx` (datepicker; check both sites)
-- `web/components/tags/CreateEditTag.tsx` (colour picker)
-
-Counts are a starting map, not a per-site read. A few `component=` matches in these files may not be on `InputGroup`; confirm per site when migrating.
-
-## Steps
-
-1. **Ship `SelectField`** (this PR): label + Select + FieldError, a11y wired via `inputId` / `aria-*`, plus a Storybook story. No call sites migrated yet.
-2. **Verify the a11y forwarding** through react-select v5 (that `aria-errormessage` / `aria-invalid` reach the input; fall back to `aria-describedby` if not). Add a visual error state (red border) inside `SelectField` so consumers stop hand-rolling `styles`.
-3. **Migrate the Select sites** to `SelectField` in small batches by area (release-pipelines, modals, settings). Each batch is its own PR.
-4. **Migrate the non-Select sites** to standalone `FieldLabel` + `FieldError`.
-5. **Delete `component` from `InputGroup`** and land a lint guardrail (`no-restricted-syntax` on a `component` attribute on `<InputGroup>`) in the same PR, so the door shuts behind the migration.
-
-## Notes
-
-- `SelectField` is a first cut. The error-state styling and the react-select aria verification (step 2) are deliberately follow-ups so this PR stays reviewable.
-- The base `Select` (`web/project/project-components.js`) is untyped JS and spreads props into react-select, which is why `SelectField` types its own surface off react-select's `Props` plus the base's custom extras (`size`, `autoSelect`).
-
-## Related follow-up: drop the Select E2E fork (separate PR, after SelectField)
-
-The base `Select` swaps to a bespoke `<input> + <a>` DOM when `global.E2E` is true. This is TestCafe-era scaffolding; E2E is fully Playwright now, and Playwright can drive real react-select. The fork is the source of the "Select behaves differently under E2E" bugs (e.g. the fork keys its input off `id`, while react-select uses `inputId`).
-
-Kept out of the `component`-prop migration on purpose. Sequenced **after** the Select call sites move to `SelectField`, as its own Select-only PR.
-
-Prefer accessibility selectors over `data-test`. This is the payoff of `SelectField`: a select with a proper label gets an accessible name, so Playwright can target it by role, with no bespoke test id. The sequencing matters here, once the target selects render through `SelectField` (with a `title`), the role selectors work.
-
-This also makes the E2E suite a standing accessibility guard: a role/name selector only resolves if the component is genuinely accessible, so if a select later loses its label the test fails loudly instead of the accessibility silently rotting. `data-test` selectors give no such signal.
-
-1. Add a Playwright `selectOption(name, optionLabel)` helper using role/name selectors:
-   ```ts
-   await page.getByRole('combobox', { name }).click()          // open the menu
-   await page.getByRole('option', { name: optionLabel }).click()
-   ```
-2. Migrate the sites that use the fork's `*-option-N` ids to the helper: `invite-test.pw.ts`, `roles-test.pw.ts`, and the `select-segment-option-${i}` helper in `e2e-helpers.playwright.ts`.
-3. Remove the `E2E ?` branch from `Select`.
-4. Run the affected specs (`invite`, `roles`, segment) to confirm. Requires Docker + API on localhost:8000.
-
-Fallback: a select without a visible label (inline filters, etc.) has no accessible name. Give it an `aria-label` (via `SelectField`) so it stays role-targetable, rather than reintroducing a `data-test`.
-
-Scope is `Select` only. The other E2E forks (`toast`, `ValueEditor`, `FeatureAction`, `ActionItem`, the config/organisation stores) are out of scope.