Merge pull request #1055 from CopperGiraffe/fix-id-datatable

fix: 🐛 Ajout d’unicité sur les IDs d’un composant DataTable

Author: laruiss

src/components/DsfrDataTable/DsfrDataTable.vue

@@ -32,6 +32,7 @@ export type DsfrDataTableProps = {
   pages?: Page[]
   pagination?: boolean
   paginationOptions?: number[]
+  paginationAriaLabel?: string
   currentPage?: number
   rowsPerPage?: number
   bottomActionBarClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>
@@ -50,6 +51,7 @@ const props = withDefaults(defineProps<DsfrDataTableProps>(), {
     10,
     20,
   ],
+  paginationAriaLabel: 'Pagination',
 })
 
 const emit = defineEmits<{
@@ -280,12 +282,12 @@ function copyToClipboard (text: string) {
             <div class="flex  gap-2  items-center">
               <label
                 class="fr-label"
-                for="pagination-options"
+                :for="`${id}-pagination-options`"
               >
                 Résultats par page :
               </label>
               <select
-                id="pagination-options"
+                :id="`${id}-pagination-options`"
                 v-model="rowsPerPage"
                 class="fr-select"
                 @change="onPaginationOptionsChange()"
@@ -314,6 +316,7 @@ function copyToClipboard (text: string) {
             <DsfrPagination
               v-model:current-page="currentPage"
               :pages="pages"
+              :aria-label="paginationAriaLabel"
               @update:current-page="selection.length = 0"
             />
           </div>

src/components/DsfrPagination/DsfrPagination.types.ts

@@ -8,4 +8,5 @@ export type DsfrPaginationProps = {
   nextPageTitle?: string
   prevPageTitle?: string
   truncLimit?: number
+  ariaLabel?: string
 }

src/components/DsfrPagination/DsfrPagination.vue

@@ -12,6 +12,7 @@ const props = withDefaults(defineProps<DsfrPaginationProps>(), {
   lastPageTitle: 'Dernière page',
   nextPageTitle: 'Page suivante',
   prevPageTitle: 'Page précédente',
+  ariaLabel: 'Pagination',
 })
 
 const emit = defineEmits<{ (e: 'update:current-page', payload: number): void }>()
@@ -39,7 +40,7 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
   <nav
     role="navigation"
     class="fr-pagination"
-    aria-label="Pagination"
+    :aria-label="ariaLabel"
   >
     <ul class="fr-pagination__list">
       <li>