diff --git a/frontend/src/components/Initializers/AdditionalInitializers.styles.ts b/frontend/src/components/Initializers/AdditionalInitializers.styles.ts index 04b43a0acf..a0b3c865e6 100644 --- a/frontend/src/components/Initializers/AdditionalInitializers.styles.ts +++ b/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', + }, }) diff --git a/frontend/src/components/Initializers/InitializerParametersDialog.test.tsx b/frontend/src/components/Initializers/InitializerParametersDialog.test.tsx index 6b5d43ec94..3543a0e3ed 100644 --- a/frontend/src/components/Initializers/InitializerParametersDialog.test.tsx +++ b/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( + + + , + ) + + 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) diff --git a/frontend/src/components/Initializers/InitializerParametersDialog.tsx b/frontend/src/components/Initializers/InitializerParametersDialog.tsx index 8315a94fc2..5848addbe2 100644 --- a/frontend/src/components/Initializers/InitializerParametersDialog.tsx +++ b/frontend/src/components/Initializers/InitializerParametersDialog.tsx @@ -187,23 +187,28 @@ function ParameterField({ parameter, value, disabled, onChange }: ParameterField const selected = Array.isArray(value) ? value : [] return ( -
- {(parameter.choices ?? []).map((choice) => ( - { - const next = data.checked - ? [...selected, choice] - : selected.filter((entry) => entry !== choice) - onChange(parameter.name, next) - }} - data-testid={`param-${parameter.name}-${choice}`} - /> - ))} +
+ {label} + {(parameter.choices ?? []).map((choice) => { + const choiceLabelId = `param-${encodeURIComponent(parameter.name)}-${encodeURIComponent(choice)}-label` + return ( + { + const next = data.checked + ? [...selected, choice] + : selected.filter((entry) => entry !== choice) + onChange(parameter.name, next) + }} + data-testid={`param-${parameter.name}-${choice}`} + /> + ) + })}
)