fix: ♿ Corrige des attributs aria-*

Author: laruiss

src/components/DsfrCheckbox/DsfrCheckbox.spec.js

@@ -12,7 +12,7 @@ describe('DsfrCheckbox', () => {
     const validMessage = 'Message de succès'
 
     // When
-    const { getByText, getByLabelText } = render(CheckBox, {
+    const { getByText, getByLabelText, getByRole } = render(CheckBox, {
       global: {
         components: {
           VIcon,
@@ -26,11 +26,14 @@ describe('DsfrCheckbox', () => {
       },
     })
 
+    const input = getByRole('checkbox')
     const labelEl = getByText(label)
     const inputCheckBox = getByLabelText(label)
 
     // Then
     expect(labelEl).toHaveClass('fr-label')
+    expect(input.checked).toBe(true)
+    expect(input).toHaveAttribute('aria-checked', 'true')
     expect(inputCheckBox).toBeInTheDocument()
     expect(labelEl.getAttribute('for')).toBe(inputCheckBox.id)
     expect(inputCheckBox.getAttribute('type')).toBe('checkbox')
@@ -40,12 +43,12 @@ describe('DsfrCheckbox', () => {
   it('should render a checkbox with label in div', () => {
     // Given
     const label = 'Check box label'
-    const modelValue = true
+    const modelValue = false
     const disabled = true
     const errorMessage = 'Message d’erreur'
 
     // When
-    const { getByText, getByLabelText } = render(CheckBox, {
+    const { getByText, getByLabelText, getByRole } = render(CheckBox, {
       global: {
         components: {
           VIcon,
@@ -60,12 +63,15 @@ describe('DsfrCheckbox', () => {
       },
     })
 
+    const input = getByRole('checkbox')
     const labelEl = getByText(label)
     const inputCheckBox = getByLabelText(label)
 
     // Then
     expect(labelEl).toHaveClass('fr-label')
     expect(inputCheckBox).toBeInTheDocument()
+    expect(input.checked).toBe(false)
+    expect(input).toHaveAttribute('aria-checked', 'false')
     expect(labelEl.getAttribute('for')).toBe(inputCheckBox.id)
     expect(inputCheckBox.getAttribute('type')).toBe('checkbox')
     expect(inputCheckBox).toHaveAttribute('disabled')

src/components/DsfrCheckbox/DsfrCheckbox.vue

@@ -10,7 +10,9 @@
       :id="id"
       :name="name"
       type="checkbox"
+      role="checkbox"
       :checked="modelValue"
+      :aria-checked="modelValue"
       :disabled="disabled"
       :data-testid="`input-checkbox-${id}`"
       :data-test="`input-checkbox-${id}`"

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -10,12 +10,16 @@
       :disabled="disabled"
     >
       <legend
-        id="checkboxes-legend"
+        :id="titleId"
         class="fr-fieldset__legend fr-text--regular"
       >
         {{ legend }}
       </legend>
-      <div class="fr-fieldset__content">
+      <div
+        class="fr-fieldset__content"
+        role="group"
+        :aria-labelledby="titleId"
+      >
         <DsfrCheckbox
           v-for="option in options"
           :id="option.id"
@@ -43,6 +47,7 @@
 
 <script>
 import DsfrCheckbox from './DsfrCheckbox.vue'
+import { getRandomId } from '../../utils/random-utils.js'
 
 export default {
   name: 'DsfrCheckboxSet',
@@ -52,6 +57,12 @@ export default {
   },
 
   props: {
+    titleId: {
+      type: String,
+      default () {
+        return getRandomId('checkbox', 'group')
+      },
+    },
     disabled: Boolean,
     inline: Boolean,
     errorMessage: {

src/components/DsfrTabs/DsfrTabItem.vue

@@ -15,6 +15,10 @@
       @click="$emit('click', $event)"
       @keydown.right="$emit('next')"
       @keydown.left="$emit('previous')"
+      @keydown.down="$emit('next')"
+      @keydown.up="$emit('previous')"
+      @keydown.home="$emit('first')"
+      @keydown.end="$emit('last')"
     >
       <span
         v-if="icon"
@@ -49,7 +53,7 @@ export default {
     },
   },
 
-  emits: ['click', 'next', 'previous'],
+  emits: ['click', 'next', 'previous', 'first', 'last'],
 
   watch: {
     selected (newValue, oldValue) {