Merge pull request #600 from WilliamDASILVA/fix/aria-describedby

fix(DsfrInput): 🐛 Corrige la typo sur l'attribut aria-describedby
dnum-mi · Sep 4, 2023 · 1b5f205 · 1b5f205
2 parents f8409b9 + 566d5c9
commit 1b5f205
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git 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
@@ -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)"
     />
   </div>