FIX give each multiselect checkbox its own accessible name

frontend/src/components/Initializers/AdditionalInitializers.styles.ts

@@ -85,4 +85,14 @@ export const useAdditionalInitializersStyles = makeStyles({
     flexDirection: 'column',
     gap: tokens.spacingVerticalXXS,
   },
+  srOnly: {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: '0',
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0,0,0,0)',
+    whiteSpace: 'nowrap',
+  },
 })

frontend/src/components/Initializers/InitializerParametersDialog.test.tsx

@@ -84,6 +84,18 @@ describe('InitializerParametersDialog', () => {
     expect(screen.getByTestId('param-label')).toHaveAttribute('type', 'text')
   })
 
+  it('should give each multiselect checkbox its own accessible name', () => {
+    render(
+      <TestWrapper>
+        <InitializerParametersDialog {...baseProps} initializer={allKindsInitializer} />
+      </TestWrapper>,
+    )
+
+    expect(screen.getByRole('group', { name: 'tags' })).toBeInTheDocument()
+    expect(screen.getByRole('checkbox', { name: 'a' })).toBeInTheDocument()
+    expect(screen.getByRole('checkbox', { name: 'b' })).toBeInTheDocument()
+  })
+
   it('shows a no-parameters message and submits null for a parameterless initializer', async () => {
     const user = userEvent.setup()
     const onSubmit = jest.fn().mockResolvedValue(undefined)

frontend/src/components/Initializers/InitializerParametersDialog.tsx

@@ -187,23 +187,28 @@ function ParameterField({ parameter, value, disabled, onChange }: ParameterField
     const selected = Array.isArray(value) ? value : []
     return (
       <Field label={label} hint={parameter.description ?? undefined}>
-        <div className={styles.checkboxGroup} role="group" aria-label={parameter.name}>
-          {(parameter.choices ?? []).map((choice) => (
-            <Checkbox
-              key={choice}
-              id={`param-${parameter.name}-${choice}`}
-              label={choice}
-              checked={selected.includes(choice)}
-              disabled={disabled}
-              onChange={(_, data) => {
-                const next = data.checked
-                  ? [...selected, choice]
-                  : selected.filter((entry) => entry !== choice)
-                onChange(parameter.name, next)
-              }}
-              data-testid={`param-${parameter.name}-${choice}`}
-            />
-          ))}
+        <div className={styles.checkboxGroup} role="group" aria-labelledby={`param-${parameter.name}-group-label`}>
+          <span id={`param-${parameter.name}-group-label`} className={styles.srOnly}>{label}</span>
+          {(parameter.choices ?? []).map((choice) => {
+            const choiceLabelId = `param-${encodeURIComponent(parameter.name)}-${encodeURIComponent(choice)}-label`
+            return (
+              <Checkbox
+                key={choice}
+                id={`param-${parameter.name}-${choice}`}
+                aria-labelledby={choiceLabelId}
+                label={{ children: choice, id: choiceLabelId }}
+                checked={selected.includes(choice)}
+                disabled={disabled}
+                onChange={(_, data) => {
+                  const next = data.checked
+                    ? [...selected, choice]
+                    : selected.filter((entry) => entry !== choice)
+                  onChange(parameter.name, next)
+                }}
+                data-testid={`param-${parameter.name}-${choice}`}
+              />
+            )
+          })}
         </div>
       </Field>
     )