From 791329c57a0bc8d6ab856178cb9d687a55985a8e Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
 <16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Thu, 3 Sep 2026 20:18:43 +0100
Subject: [PATCH 1/5] FIX: associate converter parameters with visible labels

---
 .../Chat/ConverterPanel/ConverterParams.tsx   | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
index fbccf69a4c..5f2217c686 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
@@ -7,15 +7,19 @@ interface ParamInputProps {
   param: Parameter
   value: string
   isMissing: boolean
+  labelId: string
+  describedBy?: string
   onChange: (name: string, value: string) => void
 }
 
-function ConverterParameterChoiceViewer({ param, value, onChange }: ParamInputProps) {
+function ConverterParameterChoiceViewer({ param, value, labelId, describedBy, onChange }: ParamInputProps) {
   const stringDefault = typeof param.default === 'string' ? param.default : ''
   return (
     <Select
       value={value ?? stringDefault}
       onChange={(_, data) => onChange(param.name, data.value)}
+      aria-labelledby={labelId}
+      aria-describedby={describedBy}
       data-testid={`param-${param.name}`}
     >
       {(param.choices ?? []).map((choice) => (
@@ -27,7 +31,7 @@ function ConverterParameterChoiceViewer({ param, value, onChange }: ParamInputPr
   )
 }
 
-function ParameterFileViewer({ param, value, isMissing, onChange, onBrowse }: ParamInputProps & { onBrowse: (name: string) => void }) {
+function ParameterFileViewer({ param, value, isMissing, labelId, describedBy, onChange, onBrowse }: ParamInputProps & { onBrowse: (name: string) => void }) {
   const styles = useConverterPanelStyles()
   const stringDefault = typeof param.default === 'string' ? param.default : 'Select a file...'
 
@@ -37,6 +41,9 @@ function ParameterFileViewer({ param, value, isMissing, onChange, onBrowse }: Pa
         value={value ?? ''}
         placeholder={stringDefault}
         onChange={(_, data) => onChange(param.name, data.value)}
+        aria-labelledby={labelId}
+        aria-describedby={describedBy}
+        aria-invalid={isMissing || undefined}
         className={isMissing ? styles.paramInputError : undefined}
         data-testid={`param-${param.name}`}
       />
@@ -53,7 +60,7 @@ function ParameterFileViewer({ param, value, isMissing, onChange, onBrowse }: Pa
   )
 }
 
-function ConverterParameterViewer({ param, value, isMissing, onChange }: ParamInputProps) {
+function ConverterParameterViewer({ param, value, isMissing, labelId, describedBy, onChange }: ParamInputProps) {
   const styles = useConverterPanelStyles()
   const stringDefault = typeof param.default === 'string' ? param.default : undefined
 
@@ -62,6 +69,9 @@ function ConverterParameterViewer({ param, value, isMissing, onChange }: ParamIn
       value={value ?? ''}
       placeholder={stringDefault}
       onChange={(_, data) => onChange(param.name, data.value)}
+      aria-labelledby={labelId}
+      aria-describedby={describedBy}
+      aria-invalid={isMissing || undefined}
       className={isMissing ? styles.paramInputError : undefined}
       data-testid={`param-${param.name}`}
     />
@@ -97,9 +107,13 @@ export default function ConverterParams({ converter, paramValues, paramsExpanded
       </Button>
       {paramsExpanded && (converter.parameters ?? []).map((param) => {
         const isMissing = showValidation && param.required && !paramValues[param.name]?.trim()
+        const labelId = `converter-param-${param.name}-label`
+        const errorId = isMissing ? `converter-param-${param.name}-error` : undefined
+        const hintId = param.type_name !== 'bool' && !param.choices ? `converter-param-${param.name}-hint` : undefined
+        const describedBy = [errorId, hintId].filter(Boolean).join(' ') || undefined
         return (
           <div key={param.name} className={styles.paramBlock}>
-            <span className={styles.paramLabel}>
+            <span id={labelId} className={styles.paramLabel}>
               <Text size={200} weight="semibold">{param.name}{param.required ? ' *' : ''}</Text>
               {param.description && (
                 <Tooltip content={param.description} relationship="description">
@@ -112,20 +126,23 @@ export default function ConverterParams({ converter, paramValues, paramsExpanded
                 checked={(paramValues[param.name] ?? (typeof param.default === 'string' ? param.default : 'false')).toLowerCase() === 'true'}
                 onChange={(_, data) => onParamChange(param.name, data.checked ? 'true' : 'false')}
                 label={(paramValues[param.name] ?? (typeof param.default === 'string' ? param.default : 'false')).toLowerCase() === 'true' ? 'True' : 'False'}
+                aria-labelledby={labelId}
+                aria-describedby={describedBy}
+                aria-invalid={isMissing || undefined}
                 data-testid={`param-${param.name}`}
               />
             ) : param.choices ? (
-              <ConverterParameterChoiceViewer param={param} value={paramValues[param.name]} isMissing={isMissing} onChange={onParamChange} />
+              <ConverterParameterChoiceViewer param={param} value={paramValues[param.name]} isMissing={isMissing} labelId={labelId} describedBy={describedBy} onChange={onParamChange} />
             ) : /path|file/i.test(param.name) || /path|file/i.test(param.description ?? '') ? (
-              <ParameterFileViewer param={param} value={paramValues[param.name]} isMissing={isMissing} onChange={onParamChange} onBrowse={onFileBrowse} />
+              <ParameterFileViewer param={param} value={paramValues[param.name]} isMissing={isMissing} labelId={labelId} describedBy={describedBy} onChange={onParamChange} onBrowse={onFileBrowse} />
             ) : (
-              <ConverterParameterViewer param={param} value={paramValues[param.name]} isMissing={isMissing} onChange={onParamChange} />
+              <ConverterParameterViewer param={param} value={paramValues[param.name]} isMissing={isMissing} labelId={labelId} describedBy={describedBy} onChange={onParamChange} />
             )}
             {isMissing && (
-              <Text size={100} className={styles.paramErrorText}>Required</Text>
+              <Text id={errorId} size={100} className={styles.paramErrorText}>Required</Text>
             )}
             {param.type_name !== 'bool' && !param.choices && (
-              <Text size={100} className={styles.hintText}>{param.type_name}</Text>
+              <Text id={hintId} size={100} className={styles.hintText}>{param.type_name}</Text>
             )}
           </div>
         )

From bd3430b1b8325c35326aac84b63d14bb7e2bfd2d Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
 <16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Thu, 3 Sep 2026 20:18:56 +0100
Subject: [PATCH 2/5] TEST: cover converter parameter accessible names

---
 .../ConverterPanel/ConverterParams.test.tsx   | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx

diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
new file mode 100644
index 0000000000..d3b726506e
--- /dev/null
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import type { ConverterCatalogEntry } from '../../../types'
+import ConverterParams from './ConverterParams'
+
+const converter: ConverterCatalogEntry = {
+  converter_type: 'TestConverter',
+  supported_input_types: ['text'],
+  supported_output_types: ['text'],
+  is_llm_based: false,
+  parameters: [
+    { name: 'key', type_name: 'str', required: true, default: null, description: 'Cipher key' },
+    { name: 'append_description', type_name: 'bool', required: false, default: 'false' },
+    { name: 'mode', type_name: 'str', required: false, default: 'safe', choices: ['safe', 'strict'] },
+    { name: 'image_path', type_name: 'str', required: false, default: null, description: 'Image file path' },
+  ],
+}
+
+function renderParams(showValidation = false) {
+  return render(
+    <FluentProvider theme={webLightTheme}>
+      <ConverterParams
+        converter={converter}
+        paramValues={{}}
+        paramsExpanded
+        showValidation={showValidation}
+        onParamChange={jest.fn()}
+        onFileBrowse={jest.fn()}
+        onToggleExpanded={jest.fn()}
+      />
+    </FluentProvider>,
+  )
+}
+
+describe('ConverterParams accessibility', () => {
+  it('associates visible parameter names with every control variant', () => {
+    renderParams()
+
+    expect(screen.getByRole('textbox', { name: 'key *' })).toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: 'append_description' })).toBeInTheDocument()
+    expect(screen.getByRole('combobox', { name: 'mode' })).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'image_path' })).toBeInTheDocument()
+  })
+
+  it('connects required validation text to the input', () => {
+    renderParams(true)
+
+    const keyInput = screen.getByRole('textbox', { name: 'key *' })
+    expect(keyInput).toHaveAttribute('aria-invalid', 'true')
+    expect(keyInput).toHaveAccessibleDescription(expect.stringContaining('Required'))
+  })
+})

From 6c6589251750e4d7bad37880d190a48363cf7881 Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
 <16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Thu, 3 Sep 2026 20:19:38 +0100
Subject: [PATCH 3/5] TEST: use accessible description matcher

---
 .../src/components/Chat/ConverterPanel/ConverterParams.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
index d3b726506e..8905d0f3f8 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
@@ -48,6 +48,6 @@ describe('ConverterParams accessibility', () => {
 
     const keyInput = screen.getByRole('textbox', { name: 'key *' })
     expect(keyInput).toHaveAttribute('aria-invalid', 'true')
-    expect(keyInput).toHaveAccessibleDescription(expect.stringContaining('Required'))
+    expect(keyInput).toHaveAccessibleDescription(/Required/)
   })
 })

From fe699da5ff833eff0e6d7bd34ebcffd2ac8e8a7f Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
 <16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Thu, 3 Sep 2026 20:21:58 +0100
Subject: [PATCH 4/5] FIX: expose converter parameter required state

---
 .../components/Chat/ConverterPanel/ConverterParams.tsx   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
index 5f2217c686..ad1aa1687b 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
@@ -20,6 +20,7 @@ function ConverterParameterChoiceViewer({ param, value, labelId, describedBy, on
       onChange={(_, data) => onChange(param.name, data.value)}
       aria-labelledby={labelId}
       aria-describedby={describedBy}
+      aria-required={param.required || undefined}
       data-testid={`param-${param.name}`}
     >
       {(param.choices ?? []).map((choice) => (
@@ -43,6 +44,7 @@ function ParameterFileViewer({ param, value, isMissing, labelId, describedBy, on
         onChange={(_, data) => onChange(param.name, data.value)}
         aria-labelledby={labelId}
         aria-describedby={describedBy}
+        aria-required={param.required || undefined}
         aria-invalid={isMissing || undefined}
         className={isMissing ? styles.paramInputError : undefined}
         data-testid={`param-${param.name}`}
@@ -71,6 +73,7 @@ function ConverterParameterViewer({ param, value, isMissing, labelId, describedB
       onChange={(_, data) => onChange(param.name, data.value)}
       aria-labelledby={labelId}
       aria-describedby={describedBy}
+      aria-required={param.required || undefined}
       aria-invalid={isMissing || undefined}
       className={isMissing ? styles.paramInputError : undefined}
       data-testid={`param-${param.name}`}
@@ -114,7 +117,10 @@ export default function ConverterParams({ converter, paramValues, paramsExpanded
         return (
           <div key={param.name} className={styles.paramBlock}>
             <span id={labelId} className={styles.paramLabel}>
-              <Text size={200} weight="semibold">{param.name}{param.required ? ' *' : ''}</Text>
+              <Text size={200} weight="semibold">
+                {param.name}
+                {param.required ? <span aria-hidden="true"> *</span> : null}
+              </Text>
               {param.description && (
                 <Tooltip content={param.description} relationship="description">
                   <span className={styles.paramInfo}><InfoRegular fontSize={12} /></span>
@@ -128,6 +134,7 @@ export default function ConverterParams({ converter, paramValues, paramsExpanded
                 label={(paramValues[param.name] ?? (typeof param.default === 'string' ? param.default : 'false')).toLowerCase() === 'true' ? 'True' : 'False'}
                 aria-labelledby={labelId}
                 aria-describedby={describedBy}
+                aria-required={param.required || undefined}
                 aria-invalid={isMissing || undefined}
                 data-testid={`param-${param.name}`}
               />

From b59e1beefb1d827bc63faf5fc33e71910a14bdda Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
 <16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Thu, 3 Sep 2026 20:22:11 +0100
Subject: [PATCH 5/5] TEST: verify required parameter semantics

---
 .../Chat/ConverterPanel/ConverterParams.test.tsx           | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
index 8905d0f3f8..b467edad25 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterParams.test.tsx
@@ -37,16 +37,17 @@ describe('ConverterParams accessibility', () => {
   it('associates visible parameter names with every control variant', () => {
     renderParams()
 
-    expect(screen.getByRole('textbox', { name: 'key *' })).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'key' })).toBeInTheDocument()
     expect(screen.getByRole('switch', { name: 'append_description' })).toBeInTheDocument()
     expect(screen.getByRole('combobox', { name: 'mode' })).toBeInTheDocument()
     expect(screen.getByRole('textbox', { name: 'image_path' })).toBeInTheDocument()
   })
 
-  it('connects required validation text to the input', () => {
+  it('connects required validation text and state to the input', () => {
     renderParams(true)
 
-    const keyInput = screen.getByRole('textbox', { name: 'key *' })
+    const keyInput = screen.getByRole('textbox', { name: 'key' })
+    expect(keyInput).toHaveAttribute('aria-required', 'true')
     expect(keyInput).toHaveAttribute('aria-invalid', 'true')
     expect(keyInput).toHaveAccessibleDescription(/Required/)
   })