Merge pull request #1535 from SocialGouv/a11y/label-tdlink

a11y: label tdlink
SocialGouv · Nov 27, 2024 · 336b72c · 336b72c
2 parents 6bd55e8 + 293c505
commit 336b72c
Show file tree

Hide file tree

Showing 37 changed files with 373 additions and 282 deletions.
diff --git a/app/(connected)/(with-sidebar)/(with-chat)/etablissement/EtablissementPage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/etablissement/EtablissementPage.tsx
@@ -146,7 +146,15 @@ function EtablissementPage() {
                       )}
                     </TD>
                   )}
-                  <TD>
+                  <TD
+                    aria-label={
+                      jeune.dateDerniereActivite
+                        ? toRelativeDateTime(jeune.dateDerniereActivite, {
+                            a11y: true,
+                          })
+                        : ''
+                    }
+                  >
                     {jeune.dateDerniereActivite &&
                       toRelativeDateTime(jeune.dateDerniereActivite)}
                   </TD>
@@ -157,10 +165,7 @@ function EtablissementPage() {
                   </TD>
                   <TDLink
                     href={'etablissement/beneficiaires/' + jeune.base.id}
-                    label={
-                      'Accéder à la fiche de ' +
-                      getNomBeneficiaireComplet(jeune.base)
-                    }
+                    labelPrefix='Accéder à la fiche de'
                   />
                 </TR>
               ))}

diff --git a/...nected)/(with-sidebar)/(with-chat)/mes-jeunes/listes-de-diffusion/ListesDiffusionPage.tsx b/...nected)/(with-sidebar)/(with-chat)/mes-jeunes/listes-de-diffusion/ListesDiffusionPage.tsx
@@ -140,7 +140,7 @@ function ListesDiffusionPage({ listesDiffusion }: ListesDiffusionPageProps) {
                 <TD>{liste.beneficiaires.length} destinataire(s)</TD>
                 <TDLink
                   href={`/mes-jeunes/listes-de-diffusion/edition-liste?idListe=${liste.id}`}
-                  label={`Consulter la liste ${liste.titre}`}
+                  labelPrefix='Consulter la liste'
                 />
               </TR>
             ))}

diff --git a/.../(with-sidebar)/(without-chat)/agenda/sessions/[idSession]/cloture/ClotureSessionPage.tsx b/.../(with-sidebar)/(without-chat)/agenda/sessions/[idSession]/cloture/ClotureSessionPage.tsx
@@ -229,6 +229,8 @@ function ClotureSessionPage({
                         : 'before:fixed before:inset-0 before:z-10 cursor-pointer'
                     }`}
                   >
+                    {/* FIXME title != label */}
+                    {/* FIXME title pas hoverable à cause de "before:z-10" ? */}
                     <input
                       disabled={
                         beneficiaire.statut === StatutBeneficiaire.PRESENT

diff --git a/components/action/ActionRow.tsx b/components/action/ActionRow.tsx
@@ -2,7 +2,6 @@ import { DateTime } from 'luxon'
 import { usePathname } from 'next/navigation'
 import React from 'react'
 
-import propsStatutsActions from 'components/action/propsStatutsActions'
 import TagStatutAction from 'components/action/TagStatutAction'
 import { TagCategorie } from 'components/ui/Indicateurs/Tag'
 import TD from 'components/ui/Table/TD'
@@ -36,11 +35,6 @@ export default function ActionRow({
 
   const dateEcheance = toLongMonthDate(action.dateEcheance)
 
-  function statutAction(): string {
-    if (actionEstEnRetard) return 'en retard'
-    return `${propsStatutsActions[action.status].label}`
-  }
-
   return (
     <TR isSelected={isChecked}>
       <TD className='relative'>
@@ -86,7 +80,7 @@ export default function ActionRow({
       </TD>
       <TDLink
         href={`${pathPrefix}/${jeuneId}/actions/${action.id}`}
-        label={`Voir le détail de l'action ${statutAction()} du ${dateEcheance} : ${action.titre}`}
+        labelPrefix='Voir le détail de l’action'
       />
     </TR>
   )

diff --git a/components/action/ActionRowPilotage.tsx b/components/action/ActionRowPilotage.tsx
@@ -50,7 +50,7 @@ export default function ActionRowPilotage({
       </TD>
       <TDLink
         href={`/mes-jeunes/${action.beneficiaire.id}/actions/${action.id}`}
-        label={`Accéder au détail de l’action terminée le ${dateFinReelle} : ${action.titre}`}
+        labelPrefix='Accéder au détail de l’action de'
       />
     </TR>
   )

diff --git a/components/favoris/offres/OffreRow.tsx b/components/favoris/offres/OffreRow.tsx
@@ -21,7 +21,7 @@ export default function OffreRow({ offre }: { offre: Offre }) {
       </TD>
       <TDLink
         href={`/offres/${offre.urlParam}/${offre.id}`}
-        label={'Ouvrir l’offre ' + offre.titre}
+        labelPrefix={'Ouvrir l’offre ' + offre.titre}
       />
     </TR>
   )

diff --git a/components/jeune/OngletDemarches.tsx b/components/jeune/OngletDemarches.tsx
@@ -297,7 +297,7 @@ function DemarcheRow({
       </TD>
       <TDLink
         href={`${pathPrefix}/${beneficiaireId}/demarches/${demarche.id}`}
-        label={`Voir le détail de la démarche ${demarche.statut} ${demarche.label} du ${dateEcheance} : ${demarche.titre}`}
+        labelPrefix='Voir le détail de la démarche'
       />
     </TR>
   )

diff --git a/components/jeune/TableauBeneficiairesMilo.tsx b/components/jeune/TableauBeneficiairesMilo.tsx
@@ -195,7 +195,7 @@ export default function TableauBeneficiairesMilo({
 
               <TDLink
                 href={`/mes-jeunes/${beneficiaire.id}`}
-                label={getRowLabel(beneficiaire)}
+                labelPrefix='Accéder à la fiche de'
                 className='!p-2 row-span-2 h-full flex items-center justify-center layout_m:row-span-1'
               />
             </TR>

diff --git a/components/jeune/TableauBeneficiairesPasMilo.tsx b/components/jeune/TableauBeneficiairesPasMilo.tsx
@@ -126,7 +126,7 @@ export default function TableauBeneficiairesPasMilo({
 
               <TDLink
                 href={`/mes-jeunes/${beneficiaire.id}`}
-                label={getRowLabel(beneficiaire)}
+                labelPrefix='Accéder à la fiche de'
                 className='!p-2 row-span-2 h-full flex items-center justify-center layout_m:row-span-1'
               />
             </TR>

diff --git a/components/pilotage/TableauAnimationsAClore.tsx b/components/pilotage/TableauAnimationsAClore.tsx
@@ -44,7 +44,7 @@ export default function TableauAnimationsAClore({
                 </TD>
                 <TDLink
                   href={`/mes-jeunes/edition-rdv?idRdv=${ac.id}`}
-                  label={`Accéder au détail de l’animation collective : ${ac.titre}`}
+                  labelPrefix='Accéder au détail de l’animation collective du'
                 />
               </TR>
             ))}

diff --git a/components/pilotage/TableauSessionsImilo.tsx b/components/pilotage/TableauSessionsImilo.tsx
@@ -37,7 +37,7 @@ export default function TableauSessionsImilo({
               </TD>
               <TDLink
                 href={`/agenda/sessions/${session.id}`}
-                label={`Accéder au détail de la session : ${session.titre}`}
+                labelPrefix='Accéder au détail de la session du'
               />
             </TR>
           ))}

diff --git a/components/rdv/AgendaRow.tsx b/components/rdv/AgendaRow.tsx
@@ -32,7 +32,7 @@ export function AgendaRow({ evenement }: { evenement: EvenementListItem }) {
       <TD className='!rounded-tl-base !rounded-bl-none !p-0 !pt-2 !pl-2 layout_base:!rounded-l-base layout_base:flex layout_base:flex-col layout_base:justify-center layout_base:!p-2'>
         <div className='text-m-bold'>{longMonthDate}</div>
         <div>
-          {heure} -{' '}
+          <span aria-label={heureA11y}>{heure} - </span>
           <span className='inline-flex items-center'>
             <IconComponent
               name={IconName.ScheduleOutline}
@@ -74,7 +74,7 @@ export function AgendaRow({ evenement }: { evenement: EvenementListItem }) {
       <TDLink
         className='row-span-2 flex items-center justify-center !p-2 !pl-4 layout_base:row-span-1 layout_base:!p-2'
         href={evenement.isSession ? urlSessionMilo : urlRdv}
-        label={`Consulter l’événement du ${longMonthDate} à ${heureA11y} avec ${evenement.labelBeneficiaires}`}
+        labelPrefix='Consulter l’événement du'
       />
     </TR>
   )
@@ -118,17 +118,17 @@ function Inscrits({
   if (!aUneCapaciteLimite)
     return (
       <p>
-        <span className='text-m-bold'>{nombreParticipants}</span> inscrit
-        {aPlusieursParticipants ? 's' : ''}
+        <span className='text-m-bold'>{nombreParticipants}</span>{' '}
+        {aPlusieursParticipants ? 'inscrits' : 'inscrit'}
       </p>
     )
   else if (aUneCapaciteLimite && aAtteintLaCapaciteLimite)
     return <p className='text-base-bold text-warning'>Complet</p>
   else
     return (
       <p>
-        <span className='text-m-bold'>{nombreParticipants}</span> inscrit
-        {nombreParticipants !== 1 ? 's' : ''} /{maxParticipants}
+        <span className='text-m-bold'>{nombreParticipants}</span>{' '}
+        {nombreParticipants !== 1 ? 'inscrits' : 'inscrit'} /{maxParticipants}
       </p>
     )
 }

diff --git a/components/rdv/AnimationCollectiveRow.tsx b/components/rdv/AnimationCollectiveRow.tsx
@@ -16,12 +16,7 @@ import {
 } from 'interfaces/evenement'
 import { trackEvent } from 'utils/analytics/matomo'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
-import {
-  toFrenchDuration,
-  toFrenchTime,
-  toLongMonthDate,
-  toMonthday,
-} from 'utils/date'
+import { toFrenchDuration, toFrenchTime, toLongMonthDate } from 'utils/date'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
 export function AnimationCollectiveRow({
@@ -39,9 +34,10 @@ export function AnimationCollectiveRow({
     animationCollective.estCache ?? false
   )
 
-  function getHref(ac: AnimationCollective): string {
-    if (ac.isSession) return `agenda/sessions/${ac.id}`
-    else return `/mes-jeunes/edition-rdv?idRdv=${ac.id}`
+  function getHref(): string {
+    if (animationCollective.isSession)
+      return `agenda/sessions/${animationCollective.id}`
+    else return `/mes-jeunes/edition-rdv?idRdv=${animationCollective.id}`
   }
 
   async function permuterVisibiliteSession(visibilite: boolean) {
@@ -65,7 +61,9 @@ export function AnimationCollectiveRow({
       <TD className='col-start-1 col-end-3 !rounded-tl-base !rounded-bl-none !p-0 !pt-2 !pl-2 layout_base:col-end-2 layout_base:!rounded-l-base layout_base:flex layout_base:flex-col layout_base:justify-center layout_base:!p-2'>
         <div className='text-m-bold'>{toLongMonthDate(date)}</div>
         <div>
-          {toFrenchTime(date)} -{' '}
+          <span aria-label={toFrenchTime(date, { a11y: true })}>
+            {toFrenchTime(date)} -{' '}
+          </span>
           <span className='inline-flex items-center'>
             <IconComponent
               name={IconName.ScheduleOutline}
@@ -109,8 +107,8 @@ export function AnimationCollectiveRow({
 
       <TDLink
         className='row-span-3 flex items-center justify-center !p-2 !pl-4 layout_base:row-span-1 layout_base:!p-2'
-        href={getHref(animationCollective)}
-        label={labelLien(animationCollective)}
+        href={getHref()}
+        labelPrefix={`Consulter ${animationCollective.type} du`}
       />
     </TR>
   )
@@ -134,14 +132,8 @@ function statusProps({ type, statut }: AnimationCollective): {
   }
 }
 
-function labelLien(ac: AnimationCollective): string {
-  return `Consulter ${ac.type} ${ac.titre} du ${toMonthday(
-    ac.date
-  )} à ${toFrenchTime(ac.date)}`
-}
-
-function TagStatut(ac: AnimationCollective): ReactElement {
-  const { label, color } = statusProps(ac)
+function TagStatut(animationCollective: AnimationCollective): ReactElement {
+  const { label, color } = statusProps(animationCollective)
   return (
     <_TagStatut
       label={label}
@@ -212,8 +204,8 @@ function Inscrits({
     <div>
       {!aUneCapaciteLimite && (
         <>
-          <span className='text-m-bold'>{nombreParticipants}</span> inscrit
-          {aPlusieursParticipants ? 's' : ''}
+          <span className='text-m-bold'>{nombreParticipants}</span>{' '}
+          {aPlusieursParticipants ? 'inscrits' : 'inscrit'}
         </>
       )}
 
@@ -223,8 +215,9 @@ function Inscrits({
 
       {aUneCapaciteLimite && !aAtteintLaCapaciteLimite && (
         <>
-          <span className='text-m-bold'>{nombreParticipants}</span> inscrit
-          {nombreParticipants !== 1 ? 's' : ''} /{nombreMaxParticipants}
+          <span className='text-m-bold'>{nombreParticipants}</span>{' '}
+          {nombreParticipants !== 1 ? 'inscrits' : 'inscrit'} /
+          {nombreMaxParticipants}
         </>
       )}
     </div>

diff --git a/components/rdv/EvenementRow.tsx b/components/rdv/EvenementRow.tsx
@@ -7,24 +7,23 @@ import { TagType } from 'components/ui/Indicateurs/Tag'
 import TD from 'components/ui/Table/TD'
 import TDLink from 'components/ui/Table/TDLink'
 import TR from 'components/ui/Table/TR'
-import {
-  BaseBeneficiaire,
-  getNomBeneficiaireComplet,
-} from 'interfaces/beneficiaire'
 import { EvenementListItem } from 'interfaces/evenement'
-import { toFrenchTime, toMonthday, toShortDate } from 'utils/date'
+import {
+  toFrenchDuration,
+  toFrenchTime,
+  toMonthday,
+  toShortDate,
+} from 'utils/date'
 
 interface EvenementRowProps {
   evenement: EvenementListItem
   idConseiller: string
-  beneficiaire: BaseBeneficiaire
   withIndicationPresenceBeneficiaire?: boolean
 }
 
 export function EvenementRow({
   evenement,
   idConseiller,
-  beneficiaire,
   withIndicationPresenceBeneficiaire = false,
 }: EvenementRowProps) {
   const pathPrefix = usePathname()?.startsWith('/etablissement')
@@ -34,17 +33,16 @@ export function EvenementRow({
   const date = DateTime.fromISO(evenement.date)
   const shortDate = toShortDate(date)
   const fullDate = toMonthday(date)
-  const timeAndDuration = `${toFrenchTime(date)} - ${evenement.duree} min`
-
-  const labelBeneficiaires = getNomBeneficiaireComplet(beneficiaire)
+  const timeAndDuration = `${toFrenchTime(date)} - ${toFrenchDuration(evenement.duree)}`
+  const timeAndDurationA11y = `${toFrenchTime(date, { a11y: true })} - ${toFrenchDuration(evenement.duree, { a11y: true })}`
 
   const urlRdv = pathPrefix + '/edition-rdv?idRdv=' + evenement.id
   const urlSessionMilo = '/agenda/sessions/' + evenement.id
 
   return (
     <TR>
       <TD
-        aria-label={fullDate + ' - ' + timeAndDuration}
+        aria-label={fullDate + ' - ' + timeAndDurationA11y}
         className='rounded-l-base'
       >
         {shortDate} - {timeAndDuration}
@@ -97,32 +95,22 @@ export function EvenementRow({
       </TD>
 
       <TD className='rounded-r-base'>
-        {evenement.createur?.id === idConseiller && (
-          <>
-            <span className='sr-only'>oui</span>
-            <IconComponent
-              name={IconName.CheckCircleFill}
-              aria-hidden={true}
-              focusable={false}
-              className='h-6 fill-primary'
-            />
-          </>
-        )}
-        {evenement.createur?.id !== idConseiller && (
-          <>
-            <span className='sr-only'>non</span>
-            <IconComponent
-              name={IconName.Cancel}
-              aria-hidden={true}
-              focusable={false}
-              className='h-6 fill-grey_700'
-            />
-          </>
-        )}
+        <IconComponent
+          name={
+            evenement.createur?.id === idConseiller
+              ? IconName.CheckCircleFill
+              : IconName.Cancel
+          }
+          aria-hidden={true}
+          focusable={false}
+          className='inline mr-2 h-6 w-6 fill-primary'
+        />
+        {evenement.createur?.id === idConseiller ? 'oui' : 'non'}
       </TD>
+
       <TDLink
         href={evenement.isSession ? urlSessionMilo : urlRdv}
-        label={`Consulter l’événement du ${fullDate} avec ${labelBeneficiaires}`}
+        labelPrefix='Consulter l’événement du'
       />
     </TR>
   )

diff --git a/components/rdv/TableauRdvsBeneficiaire.tsx b/components/rdv/TableauRdvsBeneficiaire.tsx
@@ -74,7 +74,6 @@ export default function TableauRdvsBeneficiaire({
               <EvenementRow
                 key={rdv.id}
                 evenement={rdv}
-                beneficiaire={beneficiaire}
                 idConseiller={idConseiller}
                 withIndicationPresenceBeneficiaire={isRdvPasses}
               />

diff --git a/components/ui/IconComponent.tsx b/components/ui/IconComponent.tsx
@@ -242,7 +242,11 @@ type IconComponentProps = ComponentPropsWithoutRef<'svg'> & {
   name: IconName
   title?: string
 }
-export default function IconComponent({ name, ...props }: IconComponentProps) {
+export default function IconComponent({
+  name,
+  className,
+  ...props
+}: IconComponentProps) {
   const Icon = iconsByName[name]
-  return <Icon {...props} />
+  return <Icon className={className + ' z-50'} {...props} />
 }