Merge pull request #982 from dnum-mi/fix/rgaa

Fix: 🐛 Amélioration de quelques composants suite audit RGAA

Author: laruiss

src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue

@@ -42,7 +42,7 @@ watch(expanded, (newValue, oldValue) => {
     :aria-label="navigationLabel"
   >
     <button
-      v-show="!expanded"
+      v-if="!expanded"
       class="fr-breadcrumb__button"
       :aria-expanded="expanded"
       :aria-controls="breadcrumbId"

src/components/DsfrFooter/DsfrFooter.vue

@@ -240,6 +240,7 @@ const externalOperatorLink = computed(() => {
               :to="isExternalLink ? undefined : routerLinkLicenceTo"
               :href="isExternalLink ? aLicenceHref : undefined"
               :target="isExternalLink ? '_blank' : undefined"
+              :title="isExternalLink ? `${licenceName} (nouvelle fenêtre)` : licenceName"
               rel="noopener noreferrer"
               v-bind="licenceLinkAttrs"
             >

src/components/DsfrHeader/DsfrHeader.vue

@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<DsfrHeaderProps>(), {
   quickLinksAriaLabel: 'Menu secondaire',
   showSearchLabel: 'Recherche',
   menuLabel: 'Menu',
-  menuModalLabel: 'Menu modal',
+  menuModalLabel: 'Menu',
   closeMenuModalLabel: 'Fermer',
   homeLabel: 'Accueil',
 })
@@ -68,7 +68,10 @@ const showMenu = () => {
   modalOpened.value = true
   menuOpened.value = true
   searchModalOpened.value = false
-  document.getElementById('close-button')?.focus()
+  // Sans le setTimeout, le focus n'est pas fait
+  setTimeout(() => {
+    document.getElementById('close-button')?.focus()
+  })
 }
 const showSearchModal = () => {
   modalOpened.value = true
@@ -142,7 +145,7 @@ provide(registerNavigationLinkKey, () => {
                   class="fr-btn--menu  fr-btn"
                   :data-fr-opened="showMenu"
                   aria-controls="header-navigation"
-                  aria-haspopup="menu"
+                  aria-haspopup="dialog"
                   :aria-label="menuLabel"
                   :title="menuLabel"
                   data-testid="open-menu-btn"

src/components/DsfrModal/DsfrModal.vue

@@ -94,6 +94,7 @@ const iconProps = computed(() => dsfrIcon.value
     <dialog
       id="fr-modal-1"
       ref="modal"
+      aria-modal="true"
       :aria-labelledby="modalId"
       :role="role"
       class="fr-modal"

src/components/DsfrTable/DsfrTable.vue

@@ -6,6 +6,8 @@ import DsfrTableRow, { type DsfrTableRowProps } from './DsfrTableRow.vue'
 import type { DsfrTableProps } from './DsfrTable.types'
 import {getRandomId} from "@/utils/random-utils";
 
+import { getRandomId } from '@/utils/random-utils'
+
 export type { DsfrTableProps }
 
 const props = withDefaults(defineProps<DsfrTableProps>(), {
@@ -24,6 +26,7 @@ const getRowData = (row: DsfrTableProps['rows']) => {
 }
 
 const currentPage = ref(props.currentPage)
+const selectId = getRandomId()
 const optionSelected = ref(props.resultsDisplayed)
 const pageCount = computed(() =>
   props.rows.length > optionSelected.value
@@ -109,6 +112,7 @@ const selectId = getRandomId('resultPerPage')
                 <select
                   :id="selectId"
                   v-model="optionSelected"
+                  title="Résultats par page - le nombre résultats est mis à jour dès sélection d’une valeur"
                   @change="emit('update:currentPage')"
                 >
                   <option
@@ -120,26 +124,37 @@ const selectId = getRandomId('resultPerPage')
                   </option>
                 </select>
               </div>
-              <div class="flex ml-1">
-                <span class="self-center">Page {{ currentPage }} sur {{ pageCount }}</span>
+              <div class="flex ml-1"
+                   aria-live="polite"
+                   aria-atomic="true"
+              >
+                <p class="self-center fr-m-0">Page {{ currentPage }} sur {{ pageCount }}</p>
               </div>
               <div class="flex ml-1">
                 <button
                   class="fr-icon-arrow-left-s-first-line"
                   @click="goFirstPage()"
-                />
+                >
+                  <span class="fr-sr-only">Première page du tableau</span>
+                </button>
                 <button
                   class="fr-icon-arrow-left-s-line"
                   @click="goPreviousPage()"
-                />
+                >
+                  <span class="fr-sr-only">Page précédente du tableau</span>
+                </button>
                 <button
                   class="fr-icon-arrow-right-s-line"
                   @click="goNextPage()"
-                />
+                >
+                  <span class="fr-sr-only">Page suivante du tableau</span>
+                </button>
                 <button
                   class="fr-icon-arrow-right-s-last-line"
                   @click="goLastPage()"
-                />
+                >
+                  <span class="fr-sr-only">Dernière page du tableau</span>
+                </button>
               </div>
             </div>
           </td>

src/composables/useCollapsable.ts

@@ -54,6 +54,7 @@ export const useCollapsable = () => {
    */
   const onTransitionEnd = (expanded: boolean): void => {
     collapsing.value = false
+    collapse.value?.querySelector('a')?.focus()
     if (collapse.value && expanded === false) {
       collapse.value.style.removeProperty('--collapse-max-height')
     }