Merge pull request #1136 from MaitreManuel/fix-title-dsfr-pagination-dsfr-share

DsfrPagination & DsfrShare corrections sur les attributs title

Author: laruiss

src/components/DsfrPagination/DsfrPagination.spec.ts

@@ -8,16 +8,16 @@ describe('DsfrPagination', () => {
   it('should render a list of links to give quick access to several pages', async () => {
     // Given
     const pages = [
-      { label: '1', href: '/#', title: 'Page 1' },
-      { label: '2', href: '/#', title: 'Page 2' },
-      { label: '3', href: '/#', title: 'Page 3' },
-      { label: '4', href: '/#', title: 'Page 4' },
-      { label: '5', href: '/#', title: 'Page 5' },
+      { label: '1', href: '/#' },
+      { label: '2', href: '/#' },
+      { label: '3', href: '/#' },
+      { label: '4', href: '/#' },
+      { label: '5', href: '/#' },
     ]
     const currentPage = 1
 
     // When
-    const { getByTitle, emitted } = render(Pagination, {
+    const { getByText, emitted } = render(Pagination, {
       global: {
         components: {
           VIcon,
@@ -29,7 +29,7 @@ describe('DsfrPagination', () => {
       },
     })
 
-    const thirdLink = getByTitle('Page 3')
+    const thirdLink = getByText('3')
     await fireEvent.click(thirdLink)
 
     // Then

src/components/DsfrPagination/DsfrPagination.vue

@@ -48,7 +48,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()"
         >
@@ -60,7 +59,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>
@@ -72,7 +70,6 @@ const isCurrentPage = (page: Page) => props.pages.indexOf(page) === props.curren
         <a
           :href="page?.href"
           class="fr-pagination__link fr-unhidden-lg"
-          :title="page.title"
           :aria-current="isCurrentPage(page) ? 'page' : undefined"
           @click.prevent="toPage(pages.indexOf(page))"
         >
@@ -86,7 +83,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()"
@@ -97,7 +93,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()"
@@ -112,7 +107,7 @@ 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;

src/components/DsfrShare/DsfrShare.spec.ts

@@ -8,7 +8,7 @@ describe('DsfrShare', () => {
     const copyLabel = 'Label de la copie dans le presse-papier'
     const mail = {
       to: 'mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]',
-      label: 'Partager par mail personnalisé',
+      label: 'Partager par mail personnalisé - nouvelle fenêtre',
     }
     const networks = [
       {
@@ -47,7 +47,7 @@ describe('DsfrShare', () => {
     }
 
     const mailToLinkElement = getByText(mail.label)
-    expect(mailToLinkElement).toHaveAttribute('title', mail.label)
+    expect(mailToLinkElement).toHaveAttribute('title', `${mail.label} - nouvelle fenêtre`)
     expect(mailToLinkElement).toHaveAttribute('href', mail.to)
 
     const copyButtonElement = getByText(copyLabel)

src/components/DsfrShare/DsfrShare.vue

@@ -49,7 +49,7 @@ const openWindow = ({ url, label }: { url: string, label: string }) => {
         <a
           class="fr-btn fr-btn--mail"
           :href="mail.to"
-          :title="mail.label"
+          :title="`${mail.label} - nouvelle fenêtre`"
           target="_blank"
           rel="noopener noreferrer"
         >