feat(DsfrFooter): ✨ gère l’attribut title des liens

fix #884

Author: laruiss

src/components/DsfrFooter/DsfrFooter.types.ts

@@ -24,6 +24,7 @@ export type DsfrFooterLinkProps = {
   onClick?: ($event: MouseEvent) => void
   to?: RouteLocationRaw
   href?: string
+  title?: string
 }
 
 export type DsfrFooterLinkListProps = {
@@ -44,15 +45,15 @@ export type DsfrFooterProps = {
   descText?: string
   beforeMandatoryLinks?: DsfrFooterLinkProps[]
   afterMandatoryLinks?: DsfrFooterLinkProps[]
-  mandatoryLinks?: { label: string, to: RouteLocationRaw | undefined }[]
-  ecosystemLinks?: { label: string, href: string }[]
+  mandatoryLinks?: { label: string, to: RouteLocationRaw | undefined, title?: string }[]
+  ecosystemLinks?: { label: string, href: string, title: string, [key: string]: string }[]
   operatorLinkText?: string
   operatorTo?: RouteLocationRaw | undefined
   operatorImgStyle?: StyleValue
   operatorImgSrc?: string
   operatorImgAlt?: string
   licenceTo?: string
-  licenceLinkProps?: { href: string } | { to: RouteLocationRaw | undefined }
+  licenceLinkProps?: ({ href: string } | { to: RouteLocationRaw | undefined }) & Record<string, string>
   licenceText?: string
   licenceName?: string
 }

src/components/DsfrFooter/DsfrFooter.vue

@@ -53,18 +53,22 @@ const props = withDefaults(defineProps<DsfrFooterProps>(), {
     {
       label: 'info.gouv.fr',
       href: 'https://info.gouv.fr',
+      title: 'Informations gouvernementales, nouvelle fenêtre',
     },
     {
       label: 'service-public.fr',
       href: 'https://service-public.fr',
+      title: 'Informations et démarches administratives, nouvelle fenêtre',
     },
     {
       label: 'legifrance.gouv.fr',
       href: 'https://legifrance.gouv.fr',
+      title: 'Service public de diffusion du droit, nouvelle fenêtre',
     },
     {
       label: 'data.gouv.fr',
       href: 'https://data.gouv.fr',
+      title: 'Plateforme des données publiques, nouvelle fenêtre',
     },
   ],
   operatorLinkText: 'Revenir à l’accueil',
@@ -95,6 +99,12 @@ const isExternalLink = computed(() => {
   const to = props.licenceTo || (props.licenceLinkProps as { to: RouteLocationRaw }).to
   return to && typeof to === 'string' && to.startsWith('http')
 })
+
+const licenceLinkAttrs = computed(() => {
+  const { to, href, ...attrs } = props.licenceLinkProps ?? {}
+  return attrs
+})
+
 const routerLinkLicenceTo = computed(() => {
   return isExternalLink.value ? '' : props.licenceTo
 })
@@ -184,17 +194,19 @@ const externalOperatorLink = computed(() => {
           </p>
           <ul class="fr-footer__content-list">
             <li
-              v-for="(link, index) in ecosystemLinks"
+              v-for="({ href, label, title, ...attrs }, index) in ecosystemLinks"
               :key="index"
               class="fr-footer__content-item"
             >
               <a
                 class="fr-footer__content-link"
-                :href="link.href"
+                :href="href"
                 target="_blank"
                 rel="noopener noreferrer"
+                :title="title"
+                v-bind="attrs"
               >
-                {{ link.label }}
+                {{ label }}
               </a>
             </li>
           </ul>
@@ -225,11 +237,11 @@ const externalOperatorLink = computed(() => {
             <component
               :is="isExternalLink ? 'a' : 'RouterLink'"
               class="fr-link-licence  no-content-after"
-              :to="isExternalLink ? null : routerLinkLicenceTo"
-              :href="aLicenceHref"
+              :to="isExternalLink ? undefined : routerLinkLicenceTo"
+              :href="isExternalLink ? aLicenceHref : undefined"
               :target="isExternalLink ? '_blank' : undefined"
               rel="noopener noreferrer"
-              v-bind="licenceLinkProps"
+              v-bind="licenceLinkAttrs"
             >
               {{ licenceName }}
             </component>