Merge pull request #1233 from MaitreManuel/fix-title-dsfr-pagination-again

Correction améliorée de l'accessibilité de DsfrPagination

Author: laruiss

src/components/DsfrPagination/DsfrPagination.spec.ts

@@ -87,39 +87,6 @@ describe('DsfrPagination', () => {
     })
   })
 
-  it('should render a list of links with appropriate title', async () => {
-    // Given
-    const pages = makePages(6)
-
-    // When
-    const { getByRole } = render(Pagination, {
-      global: { components: { VIcon } },
-      props: {
-        pages,
-        currentPage: 2,
-        truncLimit: 4,
-        firstPageTitle: 'Première page',
-        lastPageTitle: 'Dernière page',
-        nextPageTitle: 'Page suivante',
-        prevPageTitle: 'Page précédente',
-        currentPageTitleSuffix: ' - page courante',
-        ellipsisTitle: 'Pages intermédiaires non affichées',
-      },
-    })
-
-    const nextLink = getByRole('link', { name: 'Page suivante' })
-    const prevLink = getByRole('link', { name: 'Page précédente' })
-    const firstLink = getByRole('link', { name: 'Première page' })
-    const lastLink = getByRole('link', { name: 'Dernière page' })
-    const currentLink = getByRole('link', { current: 'page' })
-    // Then
-    expect(nextLink.getAttribute('title')).toBe('Page suivante')
-    expect(prevLink.getAttribute('title')).toBe('Page précédente')
-    expect(firstLink.getAttribute('title')).toBe('Première page')
-    expect(lastLink.getAttribute('title')).toBe('Dernière page')
-    expect(currentLink.getAttribute('title')).toBe('page 3 - page courante')
-  })
-
   it('renders navigation with default aria-label', () => {
     // Given
     const pages = makePages(3)
@@ -201,7 +168,7 @@ describe('DsfrPagination', () => {
       if (link.ariaCurrent === 'page') {
         expect(link.getAttribute('title')).toBe(`page ${index + 1} - page courante`)
       } else {
-        expect(link.getAttribute('title')).toBe(`page ${index + 1}`)
+        expect(link.getAttribute('title')).toBe(null)
       }
     })
   })

src/components/DsfrPagination/DsfrPagination.vue

@@ -38,6 +38,19 @@ const toPreviousPage = () => toPage(Math.max(0, props.currentPage - 1))
 const toNextPage = () => toPage(Math.min(props.pages.length - 1, props.currentPage + 1))
 const toLastPage = () => toPage(props.pages.length - 1)
 const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.currentPage
+const pageTitle = (page: Page) => {
+  if (isCurrentPage(page) && page.title) {
+    if (props.currentPageTitleSuffix) {
+      return `${page.title}${props.currentPageTitleSuffix}`
+    }
+
+    if (page.label !== page.title) {
+      return page.title
+    }
+  }
+
+  return undefined
+}
 </script>
 
 <template>
@@ -52,7 +65,6 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
           :href="pages[0]?.href"
           class="fr-pagination__link fr-pagination__link--first"
           :class="{ 'fr-pagination__link--disabled': currentPage === 0 }"
-          :title="firstPageTitle"
           :aria-disabled="currentPage === 0 ? true : undefined"
           @click.prevent="currentPage === 0 ? null : tofirstPage()"
         >
@@ -64,7 +76,6 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
           :href="pages[Math.max(currentPage - 1, 0)]?.href"
           class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
           :class="{ 'fr-pagination__link--disabled': currentPage === 0 }"
-          :title="prevPageTitle"
           :aria-disabled="currentPage === 0 ? true : undefined"
           @click.prevent="currentPage === 0 ? null : toPreviousPage()"
         >{{ prevPageTitle }}</a>
@@ -79,7 +90,7 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
         <a
           :href="page?.href"
           class="fr-pagination__link fr-unhidden-lg"
-          :title="(isCurrentPage(page) && page.title) ? (currentPageTitleSuffix) ? page.title + currentPageTitleSuffix : page.title : (page.title !== page.label) ? page.title : undefined"
+          :title="pageTitle(page)"
           :aria-current="isCurrentPage(page) ? 'page' : undefined"
           @click.prevent="toPage(pages.indexOf(page))"
         >
@@ -103,7 +114,6 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
           :href="pages[Math.min(currentPage + 1, pages.length - 1)]?.href"
           class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
           :class="{ 'fr-pagination__link--disabled': currentPage === pages.length - 1 }"
-          :title="nextPageTitle"
           :disabled="currentPage === pages.length - 1 ? true : undefined"
           :aria-disabled="currentPage === pages.length - 1 ? true : undefined"
           @click.prevent="currentPage === pages.length - 1 ? null : toNextPage()"
@@ -114,7 +124,6 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
           :href="pages.at(-1)?.href"
           class="fr-pagination__link fr-pagination__link--last"
           :class="{ 'fr-pagination__link--disabled': currentPage === pages.length - 1 }"
-          :title="lastPageTitle"
           :disabled="currentPage === pages.length - 1 ? true : undefined"
           :aria-disabled="currentPage === pages.length - 1 ? true : undefined"
           @click.prevent="currentPage === pages.length - 1 ? null : toLastPage()"
@@ -129,8 +138,8 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
 <style scoped>
 .fr-pagination__link:hover {
   background-image: linear-gradient(
-  deg, rgba(224,224,224,0.5), rgba(224,224,224,0.5));
-  }
+    deg, rgba(224,224,224,0.5), rgba(224,224,224,0.5));
+}
 .fr-pagination__link--disabled {
   color: currentColor;
   cursor: not-allowed;