a11y: corrections title

app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/actions/[idAction]/DetailActionPage.tsx

@@ -24,6 +24,7 @@ import { useAlerte } from 'utils/alerteContext'
 import useMatomo from 'utils/analytics/useMatomo'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
 import { toLongMonthDate } from 'utils/date'
+import { unsafeRandomId } from 'utils/helpers'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
 type DetailActionProps = {
@@ -85,7 +86,7 @@ function DetailActionPage({
   }
 
   // FIXME : dirty fix, problème de l’action
-  const random = Math.random()
+  const random = unsafeRandomId()
 
   useMatomo(
     alerte && alerte.key === AlerteParam.envoiMessage

app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/listes-de-diffusion/ListesDiffusionPage.tsx

@@ -166,10 +166,13 @@ function TitreListe({ liste }: { liste: ListeDeDiffusion }): JSX.Element {
           name={IconName.Info}
           role='img'
           focusable={false}
-          aria-label={informationLabel}
+          aria-labelledby='information-label'
           title={informationLabel}
           className='w-6 h-6 mr-2 fill-current'
         />
+        <span id='information-label' className='sr-only'>
+          {informationLabel}
+        </span>
         {liste.titre}
       </div>
     )

app/(connected)/(with-sidebar)/(with-chat)/offres/RechercheOffresPage.tsx

@@ -309,12 +309,13 @@ function RechercheOffresPage() {
           >
             <IconComponent
               name={collapsed ? IconName.ChevronDown : IconName.ChevronUp}
+              role='img'
+              aria-labelledby='toggle-critere-label'
               title={`${collapsed ? 'Voir' : 'Cacher'} les critères`}
               className='h-6 w-6 fill-primary'
-              aria-hidden={true}
               focusable={false}
             />
-            <span className='sr-only'>
+            <span id='toggle-critere-label' className='sr-only'>
               {collapsed ? 'Voir' : 'Cacher'} les critères
             </span>
           </button>

app/(connected)/(with-sidebar)/(with-chat)/plan-du-site/page.tsx

@@ -6,7 +6,7 @@ import {
   PageHeaderPortal,
   PageRetourPortal,
 } from 'components/PageNavigationPortals'
-import redirectedFromHome from 'utils/redirectedFromHome'
+import { redirectedFromHome } from 'utils/helpers'
 
 export const metadata: Metadata = {
   title: 'Plan du site',

app/(connected)/(with-sidebar)/(without-chat)/agenda/sessions/[idSession]/page.tsx

@@ -12,7 +12,7 @@ import { getBeneficiairesDeLaStructureMilo } from 'services/beneficiaires.servic
 import { getConseillerServerSide } from 'services/conseiller.service'
 import { getDetailsSession } from 'services/sessions.service'
 import { getMandatorySessionServerSide } from 'utils/auth/auth'
-import redirectedFromHome from 'utils/redirectedFromHome'
+import { redirectedFromHome } from 'utils/helpers'
 
 type DetailsSessionParams = {
   idSession: string

app/(connected)/(with-sidebar)/(without-chat)/mes-jeunes/[idJeune]/actions/[idAction]/modification/page.tsx

@@ -15,6 +15,7 @@ import {
 } from 'services/actions.service'
 import { getActionsPredefinies } from 'services/referentiel.service'
 import { getMandatorySessionServerSide } from 'utils/auth/auth'
+import { unsafeRandomId } from 'utils/helpers'
 
 type ModificationActionParams = { idAction: string }
 
@@ -52,7 +53,7 @@ export default async function ModificationAction({
   if (action.status === StatutAction.Qualifiee) notFound()
 
   // FIXME : dirty fix, problème de rafraichissement de l’action
-  const returnTo = `/mes-jeunes/${jeune.id}/actions/${action.id}?misc=${Math.random()}`
+  const returnTo = `/mes-jeunes/${jeune.id}/actions/${action.id}?misc=${unsafeRandomId()}`
   return (
     <>
       <PageHeaderPortal header='Modifier l’action' />

app/(connected)/(with-sidebar)/(without-chat)/mes-jeunes/[idJeune]/actions/[idAction]/qualification/page.tsx

@@ -10,6 +10,7 @@ import {
 import { StatutAction } from 'interfaces/action'
 import { estUserMilo } from 'interfaces/conseiller'
 import { getMandatorySessionServerSide } from 'utils/auth/auth'
+import { unsafeRandomId } from 'utils/helpers'
 
 type QualificationParams = { idAction: string }
 type QualificationSearchParams = Partial<{ liste: string }>
@@ -51,7 +52,7 @@ export default async function Qualification({
   if (action.status !== StatutAction.Terminee) notFound()
 
   // FIXME : dirty fix, problème de l’action
-  const returnTo = `/mes-jeunes/${jeune.id}/actions/${action.id}?misc=${Math.random()}`
+  const returnTo = `/mes-jeunes/${jeune.id}/actions/${action.id}?misc=${unsafeRandomId()}`
   const returnToListe =
     searchParams?.liste === 'pilotage'
       ? '/pilotage'

app/(connected)/(with-sidebar)/(without-chat)/mes-jeunes/edition-rdv/page.tsx

@@ -27,7 +27,7 @@ import {
   getTypesRendezVous,
 } from 'services/evenements.service'
 import { getMandatorySessionServerSide } from 'utils/auth/auth'
-import redirectedFromHome from 'utils/redirectedFromHome'
+import { redirectedFromHome } from 'utils/helpers'
 
 type EditionRdvSearchParams = Partial<{
   idRdv: string

app/(connected)/(with-sidebar)/(without-chat)/mes-jeunes/envoi-message-groupe/page.tsx

@@ -11,7 +11,7 @@ import {
 import { utiliseChat } from 'interfaces/conseiller'
 import { getListesDeDiffusionServerSide } from 'services/listes-de-diffusion.service'
 import { getMandatorySessionServerSide } from 'utils/auth/auth'
-import redirectedFromHome from 'utils/redirectedFromHome'
+import { redirectedFromHome } from 'utils/helpers'
 
 export const metadata: Metadata = { title: 'Message multi-destinataires' }
 

app/(connected)/(with-sidebar)/(without-chat)/mes-jeunes/listes-de-diffusion/edition-liste/EditionListeDiffusionPage.tsx

@@ -30,6 +30,7 @@ import { AlerteParam } from 'referentiel/alerteParam'
 import { ListeDeDiffusionFormData } from 'services/listes-de-diffusion.service'
 import { useAlerte } from 'utils/alerteContext'
 import useMatomo from 'utils/analytics/useMatomo'
+import { unsafeRandomId } from 'utils/helpers'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
 const ConfirmationDeleteListeDiffusionModal = dynamic(
@@ -151,7 +152,7 @@ function EditionListeDiffusionPage({
         await modifierListe(liste.id, payload)
       }
       // FIXME : dirty fix, problème de rafraichissement de la liste
-      router.push(returnTo + '?misc=' + Math.random())
+      router.push(returnTo + '?misc=' + unsafeRandomId())
     } catch (erreur) {
       setShowErreurTraitement(true)
       console.error(erreur)
@@ -188,7 +189,7 @@ function EditionListeDiffusionPage({
       await supprimerListeDeDiffusion(liste!.id)
       setAlerte(AlerteParam.suppressionListeDiffusion)
       // FIXME : dirty fix, problème de rafraichissement de la liste
-      router.push(returnTo + '?misc=' + Math.random())
+      router.push(returnTo + '?misc=' + unsafeRandomId())
     } catch (e) {
       console.error(e)
       setShowErreurTraitement(true)

app/(connected)/(with-sidebar)/(without-chat)/mes-jeunes/listes-de-diffusion/edition-liste/page.tsx

@@ -9,7 +9,7 @@ import {
 } from 'components/PageNavigationPortals'
 import { recupererListeDeDiffusion } from 'services/listes-de-diffusion.service'
 import { getMandatorySessionServerSide } from 'utils/auth/auth'
-import redirectedFromHome from 'utils/redirectedFromHome'
+import { redirectedFromHome } from 'utils/helpers'
 
 type EditionListeDiffusionSearchParams = Partial<{ idListe: string }>
 

app/(connected)/(with-sidebar)/(without-chat)/offres/[typeOffre]/[idOffre]/partage/page.tsx

@@ -14,7 +14,7 @@ import { getImmersionServerSide } from 'services/immersions.service'
 import { getOffreEmploiServerSide } from 'services/offres-emploi.service'
 import { getServiceCiviqueServerSide } from 'services/services-civiques.service'
 import { getMandatorySessionServerSide } from 'utils/auth/auth'
-import redirectedFromHome from 'utils/redirectedFromHome'
+import { redirectedFromHome } from 'utils/helpers'
 
 type PartageOffreParams = { typeOffre: string; idOffre: string }
 

components/Details.tsx

@@ -8,10 +8,7 @@ import React, {
   useState,
 } from 'react'
 
-import InfoAction from 'components/action/InfoAction'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
-import { Action } from 'interfaces/action'
-import { toShortDate } from 'utils/date'
 
 interface DetailsProps {
   summary: string
@@ -46,11 +43,11 @@ function Details(
     >
       <summary
         className={`text-m-bold text-primary relative flex justify-between items-center cursor-pointer ${expanded ? 'mb-5' : ''}`}
+        title={`${expanded ? 'Cacher' : 'Voir'} ${summary}`}
       >
         {summary}
         <IconComponent
           name={expanded ? IconName.ChevronUp : IconName.ChevronDown}
-          title={`${expanded ? 'Cacher' : 'Voir'} ${summary}`}
           className='h-6 w-6 fill-current'
           focusable={false}
           aria-hidden={true}

components/chat/ChatRoom.tsx

@@ -283,14 +283,16 @@ function ChatRoom(
                   />
                   {afficherNotificationMessageImportant && (
                     <>
+                      {/* TODO tooltip https://inclusive-components.design/tooltips-toggletips/ */}
                       <IconComponent
                         name={IconName.DecorativePoint}
                         className='absolute right-[-8px] top-[-8px] w-3 h-3 fill-warning'
-                        focusable={false}
-                        aria-hidden={true}
+                        role='img'
+                        aria-labelledby='deja-configure-label'
                         title='Un message important est déjà configuré'
+                        focusable={false}
                       />
-                      <span className='sr-only'>
+                      <span id='deja-configure-label' className='sr-only'>
                         Un message important est déjà configuré
                       </span>
                     </>

components/chat/HeaderChat.tsx

@@ -151,7 +151,6 @@ function HeaderChat(
                 >
                   <IconComponent
                     name={flag!.icon}
-                    title={flag!.label}
                     className='inline w-6 h-6 fill-[current-color]'
                     focusable={false}
                     aria-hidden={true}

components/chat/ListeConversations.tsx

@@ -14,6 +14,7 @@ import IllustrationComponent, {
 } from 'components/ui/IllustrationComponent'
 import SpinningLoader from 'components/ui/SpinningLoader'
 import { BeneficiaireEtChat } from 'interfaces/beneficiaire'
+import { unsafeRandomId } from 'utils/helpers'
 
 interface ListeConversationsProps {
   conversations: BeneficiaireEtChat[] | undefined
@@ -92,7 +93,7 @@ function ListeConversations(
       {conversations && conversations.length > 0 && (
         <ButtonLink
           // FIXME : dirty fix, problème de rafraichissement des listes de diffusion
-          href={'/mes-jeunes/envoi-message-groupe?misc=' + Math.random()}
+          href={'/mes-jeunes/envoi-message-groupe?misc=' + unsafeRandomId()}
           style={ButtonStyle.PRIMARY}
           className='absolute bottom-8 self-center'
         >

components/chat/MessagesDuJour.tsx

@@ -3,18 +3,18 @@ import React, { FormEvent, Fragment, useEffect, useRef, useState } from 'react'
 import DisplayMessageBeneficiaire from 'components/chat/DisplayMessageBeneficiaire'
 import DisplayMessageConseiller from 'components/chat/DisplayMessageConseiller'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
-import { BeneficiaireEtChat, Chat } from 'interfaces/beneficiaire'
+import { BeneficiaireEtChat } from 'interfaces/beneficiaire'
 import { fromConseiller, Message } from 'interfaces/message'
 import {
   getMessagesDuMemeJour,
   modifierMessage as _modifierMessage,
   supprimerMessage as _supprimerMessage,
 } from 'services/messages.service'
-import { getPreviousItemId } from 'utils/algo'
 import { trackEvent } from 'utils/analytics/matomo'
 import { useChatCredentials } from 'utils/chat/chatCredentialsContext'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
 import { toLongMonthDate, toShortDate } from 'utils/date'
+import { getPreviousItemId } from 'utils/helpers'
 
 export default function MessagesDuJour({
   beneficiaireEtChat,

components/jeune/BeneficiaireIndications.tsx

@@ -16,7 +16,7 @@ export function BeneficiaireListeItem({
         name={IconName.PeopleFill}
         focusable={false}
         role='img'
-        aria-describedby={`icon-beneficiaire-list-item-${id}`}
+        aria-labelledby={`icon-beneficiaire-list-item-${id}`}
         className='w-6 h-6 fill-primary mr-2'
         title={infoLabel}
       />
@@ -61,7 +61,7 @@ export function BeneficiaireIndicationPresent({
       <IconComponent
         name={IconName.Check}
         role='img'
-        aria-describedby={`icon-indication-present-${id}`}
+        aria-labelledby={`icon-indication-present-${id}`}
         focusable={false}
         className='w-6 h-6 fill-success mr-2'
         title={infoLabel}
@@ -86,7 +86,7 @@ export function BeneficiaireIndicationReaffectaction({
         name={IconName.Info}
         focusable={false}
         role='img'
-        aria-describedby={`icon-indication-reaffectation-${id}`}
+        aria-labelledby={`icon-indication-reaffectation-${id}`}
         className='w-6 h-6 fill-accent_3 mr-2'
         title={infoLabel}
       />

components/jeune/BlocInformationJeune.tsx

@@ -153,13 +153,15 @@ function DossierExterne({
           rel='noopener noreferrer'
         >
           Dossier jeune i-milo{' '}
-          <span className='sr-only'>(nouvelle fenêtre)</span>
+          <span id='nouvelle-fenetre' className='sr-only'>
+            (nouvelle fenêtre)
+          </span>
           <IconComponent
             name={IconName.OpenInNew}
             focusable={false}
             role='img'
-            title='ouvrir'
-            aria-hidden={true}
+            title='(nouvelle fenêtre)'
+            aria-labelledby='nouvelle-fenetre'
             className='ml-2 w-4 h-4 fill-current'
           />
         </a>

components/jeune/FormulaireBeneficiaireFranceTravail.tsx

@@ -6,7 +6,7 @@ import { InputError } from 'components/ui/Form/InputError'
 import Label from 'components/ui/Form/Label'
 import { ValueWithError } from 'components/ValueWithError'
 import { BeneficiaireFranceTravailFormData } from 'interfaces/json/beneficiaire'
-import isEmailValid from 'utils/isEmailValid'
+import { isEmailValid } from 'utils/helpers'
 
 type FormulaireBeneficiaireFranceTravailProps = {
   aAccesMap: boolean

components/offres/OffreEmploiDetail.tsx

@@ -171,14 +171,19 @@ export default function OffreEmploiDetail({
                   <dd className={`${ddStyle} flex`}>
                     {offre.experience.libelle}
                     {offre.experience.exigee && (
-                      <IconComponent
-                        name={IconName.Error}
-                        title='Expérience exigée'
-                        aria-label='Expérience exigée'
-                        focusable={false}
-                        className='inline ml-2 h-5 w-5 fill-primary'
-                        role='img'
-                      />
+                      <>
+                        <IconComponent
+                          name={IconName.Error}
+                          role='img'
+                          title='Expérience exigée'
+                          aria-labelledby='experience-label'
+                          focusable={false}
+                          className='inline ml-2 h-5 w-5 fill-primary'
+                        />
+                        <span id='experience-label' className='sr-only'>
+                          Expérience exigée
+                        </span>
+                      </>
                     )}
                   </dd>
                 </>

components/rdv/AgendaRow.tsx

@@ -22,9 +22,7 @@ export function AgendaRow({ evenement }: { evenement: EvenementListItem }) {
   const heure = toFrenchTime(date)
   const heureA11y = toFrenchTime(date, { a11y: true })
   const duree = toFrenchDuration(evenement.duree)
-  const dureeA11y = toFrenchDuration(evenement.duree, {
-    a11y: true,
-  })
+  const dureeA11y = toFrenchDuration(evenement.duree, { a11y: true })
 
   const urlRdv = pathPrefix + '/edition-rdv?idRdv=' + evenement.id
   const urlSessionMilo = '/agenda/sessions/' + evenement.id
@@ -34,15 +32,21 @@ 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 className='sr-only'>durée {dureeA11y}</span>
-          <span className='inline-flex items-center' aria-hidden={true}>
+          {heure} -{' '}
+          <span className='inline-flex items-center'>
             <IconComponent
               name={IconName.ScheduleOutline}
               focusable={false}
-              title='durée'
+              role='img'
+              aria-labelledby={evenement.id + '--duree'}
               className='inline w-[1em] h-[1em] fill-current mr-1'
             />
-            {duree}
+            <span
+              id={evenement.id + '--duree'}
+              aria-label={'durée ' + dureeA11y}
+            >
+              {duree}
+            </span>
           </span>
         </div>
       </TD>