From bd5c3c3c7fbb2ad8031c83a4249f299a8419015b Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 08:44:15 +0200
Subject: [PATCH 1/9] fix(shared): tie catalog input errors to their controls
 for assistive technologies

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../catalog-variable-input.spec.tsx           | 37 +++++++++++++++++++
 .../catalog-variable-input.tsx                | 32 ++++++++++++++--
 .../input-select-small/input-select-small.tsx |  6 +++
 .../inputs/input-toggle/input-toggle.tsx      |  6 +++
 4 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
index 00ca9107a8a..bc8c41de384 100644
--- a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
+++ b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
@@ -102,6 +102,43 @@ describe('CatalogVariableInput', () => {
     expect(screen.getByTestId('input-toggle').parentElement).toHaveClass('items-end')
   })
 
+  it.each([
+    ['a toggle in the row layout', { type: 'bool' }, 'row', 'switch', undefined],
+    ['a select in the row layout', { type: 'string', allowedValues: ['small', 'large'] }, 'row', 'combobox', undefined],
+    ['a toggle in the card layout', { type: 'bool' }, 'card', 'switch', undefined],
+    ['a checkbox in the card layout', { type: 'bool' }, 'card', 'checkbox', 'checkbox'],
+  ] as const)('ties the error to %s', (_, fieldType, layout, role, booleanControl) => {
+    renderWithProviders(
+      <CatalogVariableInput
+        {...defaultProps}
+        error="This value is not allowed."
+        field={{ key: 'profile', label: 'Profile', ...fieldType }}
+        layout={layout}
+        booleanControl={booleanControl}
+        value={fieldType.type === 'bool' ? false : 'small'}
+      />
+    )
+
+    const control = screen.getByRole(role, { name: 'Profile' })
+    expect(control).toHaveAttribute('aria-invalid', 'true')
+    expect(control).toHaveAccessibleDescription('This value is not allowed.')
+  })
+
+  it('does not flag a control without error', () => {
+    renderWithProviders(
+      <CatalogVariableInput
+        {...defaultProps}
+        field={{ key: 'high-availability', label: 'High availability', type: 'bool' }}
+        layout="row"
+        value={false}
+      />
+    )
+
+    const control = screen.getByRole('switch', { name: 'High availability' })
+    expect(control).not.toHaveAttribute('aria-invalid')
+    expect(control).not.toHaveAttribute('aria-describedby')
+  })
+
   it('renders sensitive values as passwords', () => {
     renderWithProviders(
       <CatalogVariableInput
diff --git a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
index 45198a16f91..9c6d14ec03b 100644
--- a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
+++ b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
@@ -45,6 +45,8 @@ export function CatalogVariableDescription({ description, highlight }: { descrip
   )
 }
 
+const getErrorId = (field: CatalogVariableField) => `${field.key}-error`
+
 function CatalogVariableControl({
   autoFocus,
   booleanControl = 'toggle',
@@ -53,6 +55,11 @@ function CatalogVariableControl({
   onChange,
   value,
 }: Omit<CatalogVariableInputProps, 'layout'>) {
+  const errorProps = {
+    'aria-describedby': error ? getErrorId(field) : undefined,
+    'aria-invalid': error ? true : undefined,
+  }
+
   if (field.type === 'bool') {
     if (booleanControl === 'checkbox') {
       return (
@@ -60,6 +67,7 @@ function CatalogVariableControl({
           name={field.key}
           id={field.key}
           aria-label={field.label}
+          {...errorProps}
           autoFocus={autoFocus}
           checked={typeof value === 'boolean' ? value : false}
           onCheckedChange={(checked) => {
@@ -75,6 +83,8 @@ function CatalogVariableControl({
         small
         value={typeof value === 'boolean' ? value : false}
         ariaLabel={field.label}
+        ariaDescribedBy={errorProps['aria-describedby']}
+        ariaInvalid={errorProps['aria-invalid']}
         autoFocus={autoFocus}
         onChange={onChange}
       />
@@ -86,6 +96,8 @@ function CatalogVariableControl({
       <InputSelectSmall
         name={field.key}
         ariaLabel={field.label}
+        ariaDescribedBy={errorProps['aria-describedby']}
+        ariaInvalid={errorProps['aria-invalid']}
         inputClassName="h-10"
         defaultValue={typeof value === 'string' ? value : ''}
         items={field.allowedValues.map((allowedValue) => ({ label: allowedValue, value: allowedValue }))}
@@ -141,7 +153,9 @@ function CatalogVariableInputRow({
           value={value}
         />
         {error && (field.type === 'bool' || field.allowedValues?.length) ? (
-          <p className="mt-1 text-xs font-medium text-negative">{error}</p>
+          <p id={getErrorId(field)} className="mt-1 text-xs font-medium text-negative">
+            {error}
+          </p>
         ) : null}
       </div>
     </div>
@@ -186,10 +200,16 @@ export function CatalogVariableInput({
             title={field.label}
             description={field.description}
             ariaLabel={field.label}
+            ariaDescribedBy={error ? getErrorId(field) : undefined}
+            ariaInvalid={error ? true : undefined}
             autoFocus={autoFocus}
             onChange={onChange}
           />
-          {error ? <p className="mt-1 pl-11 text-xs text-negative">{error}</p> : null}
+          {error ? (
+            <p id={getErrorId(field)} className="mt-1 pl-11 text-xs text-negative">
+              {error}
+            </p>
+          ) : null}
         </div>
       )
     }
@@ -200,6 +220,8 @@ export function CatalogVariableInput({
           <Checkbox
             name={field.key}
             id={field.key}
+            aria-describedby={error ? getErrorId(field) : undefined}
+            aria-invalid={error ? true : undefined}
             autoFocus={autoFocus}
             checked={typeof value === 'boolean' ? value : false}
             onCheckedChange={(checked) => {
@@ -214,7 +236,11 @@ export function CatalogVariableInput({
         {field.description ? (
           <p className="mt-1 pl-6 text-ssm leading-[18px] text-neutral-subtle">{field.description}</p>
         ) : null}
-        {error ? <p className="mt-1 pl-6 text-xs text-negative">{error}</p> : null}
+        {error ? (
+          <p id={getErrorId(field)} className="mt-1 pl-6 text-xs text-negative">
+            {error}
+          </p>
+        ) : null}
       </div>
     )
   }
diff --git a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
index 7c60cab0551..ff06feaf1a4 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
@@ -7,6 +7,8 @@ export interface InputSelectSmallProps {
   name: string
   label?: string
   ariaLabel?: string
+  ariaDescribedBy?: string
+  ariaInvalid?: boolean
   items: Value[]
   getValue?: (name: string, value: Value | null) => void
   className?: string
@@ -22,6 +24,8 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
     name,
     label,
     ariaLabel,
+    ariaDescribedBy,
+    ariaInvalid,
     items,
     defaultValue,
     className = '',
@@ -57,6 +61,8 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
         data-testid={dataTestId || 'input-select-small'}
         name={name}
         aria-label={ariaLabel ?? label}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
         value={value}
         disabled={disabled}
         className={twMerge(
diff --git a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
index a6c5e7987ac..278c0b944a1 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
@@ -11,6 +11,8 @@ export interface InputToggleProps {
   className?: string
   dataTestId?: string
   ariaLabel?: string
+  ariaDescribedBy?: string
+  ariaInvalid?: boolean
   align?: 'center' | 'top'
   disabled?: boolean
   name?: string
@@ -29,6 +31,8 @@ export function InputToggle(props: InputToggleProps) {
     disabled = false,
     name,
     ariaLabel,
+    ariaDescribedBy,
+    ariaInvalid,
     autoFocus,
   } = props
 
@@ -75,6 +79,8 @@ export function InputToggle(props: InputToggleProps) {
         type="button"
         data-testid={props.dataTestId || 'input-toggle-button'}
         aria-label={accessibleName}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
         checked={isChecked}
         disabled={disabled}
         name={name}

From 280109d1c991b06cc125f49065dfb842fd37a783 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 08:44:46 +0200
Subject: [PATCH 2/9] fix(shared): reset the allowed-values select when its
 value is cleared

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../catalog-variable-input.spec.tsx           | 22 +++++++++++++++++++
 .../catalog-variable-input.tsx                |  2 ++
 2 files changed, 24 insertions(+)

diff --git a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
index bc8c41de384..95e60866a5b 100644
--- a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
+++ b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { CatalogVariableInput, type CatalogVariableInputProps } from './catalog-variable-input'
 
@@ -124,6 +125,27 @@ describe('CatalogVariableInput', () => {
     expect(control).toHaveAccessibleDescription('This value is not allowed.')
   })
 
+  it('does not keep a stale option once the value is cleared', async () => {
+    const field = { key: 'profile', label: 'Profile', type: 'string', allowedValues: ['small', 'large'] } as const
+    function ClearableSelect() {
+      const [value, setValue] = useState('large')
+      return (
+        <>
+          <CatalogVariableInput {...defaultProps} field={field} layout="row" value={value} />
+          <button type="button" onClick={() => setValue('')}>
+            Clear
+          </button>
+        </>
+      )
+    }
+    const { userEvent } = renderWithProviders(<ClearableSelect />)
+    expect(screen.getByRole('combobox', { name: 'Profile' })).toHaveValue('large')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Clear' }))
+
+    expect(screen.getByRole('combobox', { name: 'Profile' })).not.toHaveValue('large')
+  })
+
   it('does not flag a control without error', () => {
     renderWithProviders(
       <CatalogVariableInput
diff --git a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
index 9c6d14ec03b..d74b809f5b1 100644
--- a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
+++ b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
@@ -94,6 +94,8 @@ function CatalogVariableControl({
   if (field.allowedValues?.length) {
     return (
       <InputSelectSmall
+        // InputSelectSmall ignores an emptied defaultValue: remount so a cleared value does not keep its old option.
+        key={value ? 'selected' : 'empty'}
         name={field.key}
         ariaLabel={field.label}
         ariaDescribedBy={errorProps['aria-describedby']}

From 46d1d14a5f1f40c012c236955d8eeeafbe84cb54 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 08:45:35 +0200
Subject: [PATCH 3/9] fix(shared): give the modal close button an accessible
 name

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx  | 3 ++-
 libs/shared/ui/src/lib/components/modal/modal.tsx              | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
index 2817251cffb..69c3009875b 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
@@ -76,6 +76,7 @@ describe('ClusterAdd', () => {
       selectedCloudProvider: 'AWS',
       selectedInstallationType: 'self-managed',
     })
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
     await userEvent.keyboard('{Escape}')
 
     await waitFor(() => expect(screen.queryByText('Creation flow')).not.toBeInTheDocument())
@@ -89,7 +90,7 @@ describe('ClusterAdd', () => {
     await userEvent.keyboard('{Escape}')
 
     expect(screen.getByText('Creation flow')).toBeInTheDocument()
-    expect(document.querySelector('.fa-xmark')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument()
 
     await userEvent.click(screen.getByRole('button', { name: 'Operator connected' }))
 
diff --git a/libs/shared/ui/src/lib/components/modal/modal.tsx b/libs/shared/ui/src/lib/components/modal/modal.tsx
index 6248b8ea07a..35d08a067c0 100644
--- a/libs/shared/ui/src/lib/components/modal/modal.tsx
+++ b/libs/shared/ui/src/lib/components/modal/modal.tsx
@@ -181,6 +181,7 @@ export const Modal = (props: ModalProps) => {
               <Dialog.Close className="absolute right-4 top-4" asChild>
                 <button
                   type="button"
+                  aria-label="Close"
                   className="flex h-7 w-7 items-center justify-center rounded-full bg-background text-neutral-disabled transition-colors hover:bg-surface-neutral-componentHover hover:text-neutral"
                 >
                   <Icon iconName="xmark" iconStyle="solid" />

From 48ea90d7315c3c2ec0e54ccc1fd6380b96b7fffb Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 08:45:46 +0200
Subject: [PATCH 4/9] feat(clusters): style the EKS Anywhere card as
 unavailable until access is granted

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../clusters/feature/src/lib/cluster-add/cluster-add.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
index a76cf74f09f..6cad7b500f2 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
@@ -38,7 +38,9 @@ function ProviderCard({ title, icon, disabled = false, actionLabel, analytics, .
   const { organizationId = '' } = useParams({ strict: false })
   const className = twMerge(
     'flex h-[52px] items-center gap-2 rounded-md border border-neutral bg-surface-neutral px-4 text-left text-sm font-medium text-neutral transition-colors',
-    disabled ? 'cursor-not-allowed bg-surface-neutral-component text-neutral-subtle' : 'hover:border-brand-strong'
+    disabled ? 'cursor-not-allowed bg-surface-neutral-component text-neutral-subtle' : 'hover:border-brand-strong',
+    // Not available to the organization yet: it opens an access request, not the creation flow.
+    actionLabel && 'border-dashed text-neutral-subtle'
   )
   const content = (
     <>

From d9c647b22ad7e4841b6b184594d2a39dcd8a6131 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 08:46:32 +0200
Subject: [PATCH 5/9] fix(clusters): do not mark a cluster input reset to its
 default as changed

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../cluster-profile-context.tsx               |  8 +++-
 .../cluster-profile/cluster-profile.spec.tsx  | 37 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
index e55b044cfd0..2b74f936fc3 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
@@ -106,6 +106,7 @@ function getConfigurationRequest(
   }
   const nextClusterInputs = { ...configuration?.clusterInputs }
   for (const [componentKey, values] of Object.entries(clusterInputs)) {
+    if (!Object.keys(values).length) continue
     nextClusterInputs[componentKey] = { ...configuration?.clusterInputs[componentKey], ...values }
   }
 
@@ -163,7 +164,12 @@ export function ClusterProfileProvider({ children }: PropsWithChildren) {
   }
 
   const updateClusterInput = (componentKey: string, field: PlatformFieldDescriptor, value: CatalogVariableValue) => {
-    setClusterInputs((currentValues) => updateComponentValue(currentValues, componentKey, field.key, String(value)))
+    // The input shows its default while unsaved: setting it back to what is displayed is no edit.
+    const displayedValue = configuration?.clusterInputs[componentKey]?.[field.key] ?? field.defaultValue ?? ''
+    const nextValue = String(value)
+    setClusterInputs((currentValues) =>
+      updateComponentValue(currentValues, componentKey, field.key, nextValue === displayedValue ? undefined : nextValue)
+    )
   }
 
   const resetChanges = () => {
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index f8a073058f1..1de2e96cef0 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -869,6 +869,43 @@ describe('ClusterProfileFeature', () => {
       expect(mockDeployCluster).not.toHaveBeenCalled()
     })
 
+    it('does not count a cluster input set back to its default as a change', async () => {
+      const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          ...loki,
+          data: {
+            ...createResolution('loki'),
+            requirements: [
+              {
+                key: 'infra.region',
+                label: 'Region',
+                type: 'string',
+                required: false,
+                sensitive: false,
+                constraints: {},
+                defaultValue: 'eu-west-1',
+                status: 'READY',
+              },
+            ],
+          },
+        },
+        alloy,
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+      const region = screen.getByRole('textbox', { name: 'Region' })
+      expect(region).toHaveValue('eu-west-1')
+
+      await userEvent.type(region, '2')
+      expect(screen.getByRole('region', { name: 'Unsaved profile changes' })).toHaveTextContent('1 change ongoing')
+
+      await userEvent.type(region, '{Backspace}')
+
+      await waitFor(() =>
+        expect(screen.queryByRole('region', { name: 'Unsaved profile changes' })).not.toBeInTheDocument()
+      )
+    })
+
     it('does not save edits that were reverted by hand', async () => {
       const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
 

From 86a86b30f3f440b15a3e7626fea78ca4987f67ac Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 08:47:25 +0200
Subject: [PATCH 6/9] feat(clusters): confirm before leaving the Operator
 install step

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../src/lib/cluster-add/cluster-add.spec.tsx  | 46 +++++++++++++++++++
 .../src/lib/cluster-add/cluster-add.tsx       | 24 ++++++++--
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
index 69c3009875b..3aff56b9e6b 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
@@ -3,11 +3,13 @@ import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
 import { type SelfManagedClusterCreationFlowProps } from '../self-managed-cluster-creation/self-managed-cluster-creation-flow'
 import { ClusterAdd } from './cluster-add'
 
+const mockUseBlocker = jest.fn()
 jest.mock('@tanstack/react-router', () => {
   const React = jest.requireActual('react')
   return {
     ...jest.requireActual('@tanstack/react-router'),
     useParams: () => ({ organizationId: 'org-123' }),
+    useBlocker: (options: unknown) => mockUseBlocker(options),
     Link: React.forwardRef(
       ({ children, ...props }: { children?: React.ReactNode }, ref: React.Ref<HTMLAnchorElement>) =>
         React.createElement('a', { ref, ...props }, children)
@@ -42,7 +44,12 @@ jest.mock('../self-managed-cluster-creation/self-managed-cluster-creation-flow',
   ),
 }))
 
+type BlockerOptions = { disabled: boolean; shouldBlockFn: () => boolean; enableBeforeUnload: boolean }
+const getBlocker = () => mockUseBlocker.mock.calls.at(-1)?.[0] as BlockerOptions
+
 describe('ClusterAdd', () => {
+  afterEach(() => jest.restoreAllMocks())
+
   async function openCreationFlow(userEvent: ReturnType<typeof renderWithProviders>['userEvent']) {
     await userEvent.click(screen.getByRole('button', { name: 'AWS' }))
     expect(await screen.findByText('Creation flow')).toBeInTheDocument()
@@ -96,4 +103,43 @@ describe('ClusterAdd', () => {
 
     await waitFor(() => expect(screen.queryByText('Creation flow')).not.toBeInTheDocument())
   })
+
+  describe('leaving the install step', () => {
+    it('does not guard the page before the cluster is created', async () => {
+      const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+      expect(getBlocker().disabled).toBe(true)
+
+      await openCreationFlow(userEvent)
+
+      expect(getBlocker().disabled).toBe(true)
+    })
+
+    it('asks for confirmation before leaving, and warns before the page unloads', async () => {
+      const confirm = jest.spyOn(window, 'confirm')
+      const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+      await openCreationFlow(userEvent)
+      await userEvent.click(screen.getByRole('button', { name: 'Reach install step' }))
+
+      expect(getBlocker()).toMatchObject({ disabled: false, enableBeforeUnload: true })
+      confirm.mockReturnValueOnce(false)
+      expect(getBlocker().shouldBlockFn()).toBe(true)
+      confirm.mockReturnValueOnce(true)
+      expect(getBlocker().shouldBlockFn()).toBe(false)
+    })
+
+    it('lets the flow navigate away once the Operator connects', async () => {
+      const confirm = jest.spyOn(window, 'confirm')
+      const { userEvent } = renderWithProviders(<ClusterAdd />)
+
+      await openCreationFlow(userEvent)
+      await userEvent.click(screen.getByRole('button', { name: 'Reach install step' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Operator connected' }))
+
+      expect(getBlocker().shouldBlockFn()).toBe(false)
+      expect(getBlocker().disabled).toBe(true)
+      expect(confirm).not.toHaveBeenCalled()
+    })
+  })
 })
diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
index 6cad7b500f2..878d244aad1 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
@@ -1,11 +1,11 @@
-import { Link, useParams } from '@tanstack/react-router'
+import { Link, useBlocker, useParams } from '@tanstack/react-router'
 import Azure from 'devicon/icons/azure/azure-original.svg'
 import DigitalOcean from 'devicon/icons/digitalocean/digitalocean-original.svg'
 import GCP from 'devicon/icons/googlecloud/googlecloud-original.svg'
 import Kubernetes from 'devicon/icons/kubernetes/kubernetes-original.svg'
 import posthog from 'posthog-js'
 import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { type ReactElement, type ReactNode, cloneElement, useState } from 'react'
+import { type ReactElement, type ReactNode, cloneElement, useRef, useState } from 'react'
 import { Callout, Heading, Icon, Modal, Section, useModal } from '@qovery/shared/ui'
 import { useSupportChat } from '@qovery/shared/util-hooks'
 import { twMerge } from '@qovery/shared/util-js'
@@ -17,6 +17,9 @@ import {
   type SelfManagedClusterCreationStep,
 } from '../self-managed-cluster-creation/self-managed-cluster-creation-flow'
 
+const LEAVE_INSTALL_STEP_MESSAGE =
+  'The Operator installation instructions will be lost if you leave this page. Leave anyway?'
+
 type ProviderCardProps = {
   title: string
   icon: string | ReactElement
@@ -113,6 +116,17 @@ export function ClusterAdd() {
   const [isCreationFlowOpen, setIsCreationFlowOpen] = useState(false)
   const [creationStep, setCreationStep] = useState<SelfManagedClusterCreationStep>('general')
 
+  // The flow closes itself before navigating once the Operator connects: that navigation must not be blocked.
+  const isFlowClosingRef = useRef(false)
+  // Once the cluster exists, leaving the page would lose the Operator installation instructions.
+  const isInstalling = isCreationFlowOpen && creationStep === 'install'
+
+  useBlocker({
+    disabled: !isInstalling,
+    shouldBlockFn: () => !isFlowClosingRef.current && !window.confirm(LEAVE_INSTALL_STEP_MESSAGE),
+    enableBeforeUnload: isInstalling,
+  })
+
   const openInstallationGuideModal = ({ isDemo = false }: { isDemo?: boolean } = {}) =>
     openModal({
       options: { width: 500 },
@@ -120,6 +134,7 @@ export function ClusterAdd() {
     })
 
   const openCreationFlow = () => {
+    isFlowClosingRef.current = false
     setCreationStep('general')
     setIsCreationFlowOpen(true)
   }
@@ -250,7 +265,10 @@ export function ClusterAdd() {
         <SelfManagedClusterCreationFlow
           organizationId={organizationId}
           onStepChange={setCreationStep}
-          onClose={() => setIsCreationFlowOpen(false)}
+          onClose={() => {
+            isFlowClosingRef.current = true
+            setIsCreationFlowOpen(false)
+          }}
         />
       </Modal>
     </div>

From 4ee9680c6d564639d4159ad7f53e5830c7974e9f Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 09:03:31 +0200
Subject: [PATCH 7/9] test(clusters): name the install step blocker test after
 what it verifies

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
index 3aff56b9e6b..16c9ce35e97 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.spec.tsx
@@ -115,7 +115,7 @@ describe('ClusterAdd', () => {
       expect(getBlocker().disabled).toBe(true)
     })
 
-    it('asks for confirmation before leaving, and warns before the page unloads', async () => {
+    it('asks for confirmation before leaving, and enables the before-unload warning', async () => {
       const confirm = jest.spyOn(window, 'confirm')
       const { userEvent } = renderWithProviders(<ClusterAdd />)
 

From 000045f4e2763155ff39079aa394f751cf1865c3 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 09:07:00 +0200
Subject: [PATCH 8/9] fix(shared): derive catalog input error ids per instance

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../catalog-variable-input.spec.tsx           | 18 +++++++++++++
 .../catalog-variable-input.tsx                | 26 ++++++++++++-------
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
index 95e60866a5b..bcc76b14dd2 100644
--- a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
+++ b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.spec.tsx
@@ -146,6 +146,24 @@ describe('CatalogVariableInput', () => {
     expect(screen.getByRole('combobox', { name: 'Profile' })).not.toHaveValue('large')
   })
 
+  it('keeps error ids unique when two inputs share a field key', () => {
+    const field = { key: 'enabled', label: 'Enabled', type: 'bool' } as const
+    renderWithProviders(
+      <>
+        <CatalogVariableInput {...defaultProps} field={{ ...field, label: 'First' }} layout="row" error="First error" />
+        <CatalogVariableInput
+          {...defaultProps}
+          field={{ ...field, label: 'Second' }}
+          layout="row"
+          error="Second error"
+        />
+      </>
+    )
+
+    expect(screen.getByRole('switch', { name: 'First' })).toHaveAccessibleDescription('First error')
+    expect(screen.getByRole('switch', { name: 'Second' })).toHaveAccessibleDescription('Second error')
+  })
+
   it('does not flag a control without error', () => {
     renderWithProviders(
       <CatalogVariableInput
diff --git a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
index d74b809f5b1..a8e499f070a 100644
--- a/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
+++ b/libs/shared/console-shared/src/lib/catalog-variable-input/catalog-variable-input.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react'
 import {
   Checkbox,
   HighlightText,
@@ -45,18 +46,19 @@ export function CatalogVariableDescription({ description, highlight }: { descrip
   )
 }
 
-const getErrorId = (field: CatalogVariableField) => `${field.key}-error`
+type CatalogVariableControlProps = Omit<CatalogVariableInputProps, 'layout'> & { errorId: string }
 
 function CatalogVariableControl({
   autoFocus,
   booleanControl = 'toggle',
   error,
+  errorId,
   field,
   onChange,
   value,
-}: Omit<CatalogVariableInputProps, 'layout'>) {
+}: CatalogVariableControlProps) {
   const errorProps = {
-    'aria-describedby': error ? getErrorId(field) : undefined,
+    'aria-describedby': error ? errorId : undefined,
     'aria-invalid': error ? true : undefined,
   }
 
@@ -130,11 +132,12 @@ function CatalogVariableInputRow({
   autoFocus,
   booleanControl,
   error,
+  errorId,
   field,
   highlight,
   onChange,
   value,
-}: Omit<CatalogVariableInputProps, 'layout'>) {
+}: CatalogVariableControlProps) {
   return (
     <div className="flex flex-col gap-4 border-b border-neutral p-4 md:flex-row md:items-start md:justify-between">
       <div className="min-w-0 flex-1">
@@ -150,12 +153,13 @@ function CatalogVariableInputRow({
           autoFocus={autoFocus}
           booleanControl={booleanControl}
           error={error}
+          errorId={errorId}
           field={field}
           onChange={onChange}
           value={value}
         />
         {error && (field.type === 'bool' || field.allowedValues?.length) ? (
-          <p id={getErrorId(field)} className="mt-1 text-xs font-medium text-negative">
+          <p id={errorId} className="mt-1 text-xs font-medium text-negative">
             {error}
           </p>
         ) : null}
@@ -174,12 +178,16 @@ export function CatalogVariableInput({
   onChange,
   value,
 }: CatalogVariableInputProps) {
+  // Field keys can repeat on a page (nested fields, requirements): the error id must be unique per instance.
+  const errorId = useId()
+
   if (layout === 'row') {
     return (
       <CatalogVariableInputRow
         autoFocus={autoFocus}
         booleanControl={booleanControl}
         error={error}
+        errorId={errorId}
         field={field}
         highlight={highlight}
         onChange={onChange}
@@ -202,13 +210,13 @@ export function CatalogVariableInput({
             title={field.label}
             description={field.description}
             ariaLabel={field.label}
-            ariaDescribedBy={error ? getErrorId(field) : undefined}
+            ariaDescribedBy={error ? errorId : undefined}
             ariaInvalid={error ? true : undefined}
             autoFocus={autoFocus}
             onChange={onChange}
           />
           {error ? (
-            <p id={getErrorId(field)} className="mt-1 pl-11 text-xs text-negative">
+            <p id={errorId} className="mt-1 pl-11 text-xs text-negative">
               {error}
             </p>
           ) : null}
@@ -222,7 +230,7 @@ export function CatalogVariableInput({
           <Checkbox
             name={field.key}
             id={field.key}
-            aria-describedby={error ? getErrorId(field) : undefined}
+            aria-describedby={error ? errorId : undefined}
             aria-invalid={error ? true : undefined}
             autoFocus={autoFocus}
             checked={typeof value === 'boolean' ? value : false}
@@ -239,7 +247,7 @@ export function CatalogVariableInput({
           <p className="mt-1 pl-6 text-ssm leading-[18px] text-neutral-subtle">{field.description}</p>
         ) : null}
         {error ? (
-          <p id={getErrorId(field)} className="mt-1 pl-6 text-xs text-negative">
+          <p id={errorId} className="mt-1 pl-6 text-xs text-negative">
             {error}
           </p>
         ) : null}

From 81f028bf65f2a041bd2fec681b0e620fa022b3c6 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Mon, 5 Oct 2026 09:12:56 +0200
Subject: [PATCH 9/9] fix(clusters): compare cluster input edits as the inputs
 display them

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../cluster-profile-context.tsx               |  8 +++--
 .../cluster-profile/cluster-profile.spec.tsx  | 35 +++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
index 2b74f936fc3..64f07e48092 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
@@ -26,7 +26,7 @@ export type ProfileValues = Record<string, Record<string, unknown>>
 export type ClusterInputValues = Record<string, Record<string, string>>
 
 // Scalars are compared as the inputs display them: an unset toggle shows as off, an unset text as empty.
-function getDisplayedScalarValue(field: PlatformScalarField, value: unknown) {
+function getDisplayedScalarValue(field: Pick<PlatformFieldDescriptor, 'type' | 'defaultValue'>, value: unknown) {
   return getCatalogVariableValue(field, value) ?? (field.type === 'bool' ? false : '')
 }
 
@@ -165,10 +165,12 @@ export function ClusterProfileProvider({ children }: PropsWithChildren) {
 
   const updateClusterInput = (componentKey: string, field: PlatformFieldDescriptor, value: CatalogVariableValue) => {
     // The input shows its default while unsaved: setting it back to what is displayed is no edit.
-    const displayedValue = configuration?.clusterInputs[componentKey]?.[field.key] ?? field.defaultValue ?? ''
     const nextValue = String(value)
+    const isDisplayedValue =
+      getDisplayedScalarValue(field, nextValue) ===
+      getDisplayedScalarValue(field, configuration?.clusterInputs[componentKey]?.[field.key])
     setClusterInputs((currentValues) =>
-      updateComponentValue(currentValues, componentKey, field.key, nextValue === displayedValue ? undefined : nextValue)
+      updateComponentValue(currentValues, componentKey, field.key, isDisplayedValue ? undefined : nextValue)
     )
   }
 
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index 1de2e96cef0..4ba9bc35d3a 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -906,6 +906,41 @@ describe('ClusterProfileFeature', () => {
       )
     })
 
+    it('does not count a toggle cluster input switched back off as a change', async () => {
+      const [loki, alloy] = createComponentQueries(['loki', 'alloy'])
+      mockUsePlatformComponentConfigurations.mockReturnValue([
+        {
+          ...loki,
+          data: {
+            ...createResolution('loki'),
+            requirements: [
+              {
+                key: 'infra.useSpot',
+                label: 'Use spot instances',
+                type: 'bool',
+                required: false,
+                sensitive: false,
+                constraints: {},
+                status: 'READY',
+              },
+            ],
+          },
+        },
+        alloy,
+      ] as ReturnType<typeof usePlatformComponentConfigurations>)
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+      const useSpot = screen.getByRole('switch', { name: 'Use spot instances' })
+
+      await userEvent.click(useSpot)
+      expect(screen.getByRole('region', { name: 'Unsaved profile changes' })).toHaveTextContent('1 change ongoing')
+
+      await userEvent.click(useSpot)
+
+      await waitFor(() =>
+        expect(screen.queryByRole('region', { name: 'Unsaved profile changes' })).not.toBeInTheDocument()
+      )
+    })
+
     it('does not save edits that were reverted by hand', async () => {
       const { userEvent } = renderWithProviders(<ClusterProfileFeature />)