diff --git a/src/components/DsfrInput/DsfrInput.spec.ts b/src/components/DsfrInput/DsfrInput.spec.ts index 93ac8cb7..a7530e11 100644 --- a/src/components/DsfrInput/DsfrInput.spec.ts +++ b/src/components/DsfrInput/DsfrInput.spec.ts @@ -10,7 +10,6 @@ describe('DsfrInput', () => { // When const { getByText } = render(DsfrInput, { - stubs: ['v-icon'], props: { labelVisible, label, @@ -29,7 +28,6 @@ describe('DsfrInput', () => { // When const { getByText } = render(DsfrInput, { - stubs: ['v-icon'], props: { labelVisible, label, @@ -40,4 +38,33 @@ describe('DsfrInput', () => { expect(getByText(label)).toHaveClass('fr-label') expect(getByText(label)).toHaveClass('invisible') }) + + it('should render DsfrInput with proper aria-describedby attribute if descriptionId is provided', () => { + // Given + const descriptionId = 'labelId' + + // When + const { container } = render(DsfrInput, { + props: { + descriptionId, + }, + }) + + // Then + const inputNode = container.querySelector('input') + expect(inputNode).toHaveAttribute('aria-describedby', 'labelId') + }) + + it('should render DsfrInput without any aria-describedby attribute if descriptionId not provided', () => { + // When + const { container } = render(DsfrInput, { + props: { + descriptionId: undefined, + }, + }) + + // Then + const inputNode = container.querySelector('input') + expect(inputNode).not.toHaveAttribute('aria-describedby') + }) }) diff --git a/src/components/DsfrInput/DsfrInput.vue b/src/components/DsfrInput/DsfrInput.vue index 645ccdd0..8142f09c 100644 --- a/src/components/DsfrInput/DsfrInput.vue +++ b/src/components/DsfrInput/DsfrInput.vue @@ -82,7 +82,7 @@ defineExpose({ 'fr-input--valid': isValid, }" :value="modelValue" - :aria-aria-describedby="descriptionId || undefined" + :aria-describedby="descriptionId || undefined" @input="$emit('update:modelValue', $event.target.value)" /> @@ -104,7 +104,7 @@ defineExpose({ 'fr-input--valid': isValid, }" :value="modelValue" - :aria-aria-describedby="descriptionId || undefined" + :aria-describedby="descriptionId || undefined" @input="$emit('update:modelValue', $event.target.value)" />