fix: enable title on svg

SocialGouv · Sep 13, 2022 · 30c4dc4 · 30c4dc4
1 parent 0e43b11
commit 30c4dc4
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 27 deletions.
diff --git a/components/chat/ChatRoom.tsx b/components/chat/ChatRoom.tsx
@@ -120,14 +120,14 @@ export default function ChatRoom({ jeunesChats }: ChatRoomProps) {
             onClick={fermerMenu}
             aria-label='Fermer le menu principal'
             aria-expanded={true}
-            title='Fermer le menu principal'
             className='w-fit p-1 -ml-4 mb-6 hover:bg-primary_darken hover:rounded-[50%]'
           >
             <IconComponent
               name={IconName.Close}
               className='w-10 h-10 fill-blanc'
               aria-hidden={true}
               focusable={false}
+              title='Fermer le menu principal'
             />
           </button>
           <div className='grow flex flex-col justify-between'>
@@ -148,7 +148,6 @@ export default function ChatRoom({ jeunesChats }: ChatRoomProps) {
                 type='button'
                 onClick={ouvrirMenu}
                 aria-controls='menu-mobile'
-                title='Ouvrir le menu principal'
                 aria-expanded={showMenu}
                 className='absolute left-4 top-[calc(50%-1.25rem)]'
               >
@@ -157,6 +156,7 @@ export default function ChatRoom({ jeunesChats }: ChatRoomProps) {
                   className='w-10 h-10 fill-primary layout_s:hidden'
                   aria-hidden={true}
                   focusable={false}
+                  title='Ouvrir le menu principal'
                 />
               </button>
             </nav>

diff --git a/components/chat/Conversation.tsx b/components/chat/Conversation.tsx
@@ -210,22 +210,23 @@ export default function Conversation({
               ? 'Ne plus suivre la conversation'
               : 'Suivre la conversation'
           }
-          title={
-            jeuneChat.flaggedByConseiller
-              ? 'Ne plus suivre la conversation'
-              : 'Suivre la conversation'
-          }
           className='p-3 border-none rounded-full mr-2 bg-primary_lighten'
           onClick={toggleFlag}
         >
-          <IconComponent
-            name={
-              jeuneChat.flaggedByConseiller
-                ? IconName.FlagFilled
-                : IconName.Flag
-            }
-            className='w-6 h-6 fill-primary'
-          />
+          {jeuneChat.flaggedByConseiller && (
+            <IconComponent
+              name={IconName.FlagFilled}
+              title='Ne plus suivre la conversation'
+              className='w-6 h-6 fill-primary'
+            />
+          )}
+          {!jeuneChat.flaggedByConseiller && (
+            <IconComponent
+              name={IconName.Flag}
+              title='Suivre la conversation'
+              className='w-6 h-6 fill-primary'
+            />
+          )}
         </button>
       </div>
       <span className='border-b border-grey_500 mx-4 mb-6 short:hidden' />

diff --git a/components/jeune/TableauJeunes.tsx b/components/jeune/TableauJeunes.tsx
@@ -298,7 +298,6 @@ export default function TableauJeunes({
                       <span className='flex items-baseline'>
                         {jeune.isReaffectationTemporaire && (
                           <span
-                            title='bénéficiaire temporaire'
                             aria-label='bénéficiaire temporaire'
                             className='self-center mr-2'
                           >
@@ -307,6 +306,7 @@ export default function TableauJeunes({
                               aria-hidden={true}
                               focusable={false}
                               className='w-4 h-4'
+                              title='bénéficiaire temporaire'
                             />
                           </span>
                         )}

diff --git a/components/ui/Form/BulleMessageSensible.tsx b/components/ui/Form/BulleMessageSensible.tsx
@@ -2,13 +2,11 @@ import IconComponent, { IconName } from 'components/ui/IconComponent'
 
 export default function BulleMessageSensible() {
   return (
-    <span
-      aria-label='Attention à nos propos. Ne sont autorisés, ni les commentaires insultants ou excessifs, ni les données trop personnelles ou sensibles.'
-      title='Attention à nos propos. Ne sont autorisés, ni les commentaires insultants ou excessifs, ni les données trop personnelles ou sensibles.'
-    >
+    <span aria-label='Attention à nos propos. Ne sont autorisés, ni les commentaires insultants ou excessifs, ni les données trop personnelles ou sensibles.'>
       <IconComponent
         name={IconName.InfoOutline}
         className='h-6 w-6 fill-primary '
+        title='Attention à nos propos. Ne sont autorisés, ni les commentaires insultants ou excessifs, ni les données trop personnelles ou sensibles.'
       />
     </span>
   )

diff --git a/components/ui/Form/Multiselection.tsx b/components/ui/Form/Multiselection.tsx
@@ -32,26 +32,28 @@ export default function Multiselection({
         >
           {withInfo && (
             <div className='flex items-center text-base-bold text-accent_3'>
-              <div title={infoLabel} aria-label={infoLabel} className='mr-2'>
+              <div aria-label={infoLabel} className='mr-2'>
                 <IconComponent
                   name={IconName.Info}
                   focusable={false}
                   aria-hidden={true}
                   className='w-6 h-6 fill-accent_3'
+                  title={infoLabel}
                 />
               </div>
               {value}
             </div>
           )}
           {!withInfo && value}
 
-          <button type='reset' title='Enlever' onClick={() => unselect(id)}>
+          <button type='reset' onClick={() => unselect(id)}>
             <span className='sr-only'>Enlever {typeSelection}</span>
             <IconComponent
               name={IconName.Remove}
               focusable={false}
               aria-hidden={true}
               className='w-8 h-8'
+              title='Enlever'
             />
           </button>
         </li>

diff --git a/components/ui/Form/ResettableTextInput.tsx b/components/ui/Form/ResettableTextInput.tsx
@@ -61,7 +61,6 @@ const ResettableTextInput = forwardRef(
         />
         <button
           type='reset'
-          title='Effacer'
           className={`w-8 cursor-[inherit]`}
           onClick={applyReset}
           disabled={disabled}
@@ -73,6 +72,7 @@ const ResettableTextInput = forwardRef(
             aria-hidden={true}
             className='w-6 h-6'
             fill='currentColor'
+            title='Effacer'
           />
         </button>
       </div>

diff --git a/next.config.js b/next.config.js
@@ -48,7 +48,7 @@ module.exports = {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
+      use: [{ loader: '@svgr/webpack', options: { titleProp: true } }],
     })
 
     // https://www.elastic.co/guide/en/apm/agent/rum-js/current/install-the-agent.html#using-bundlers

diff --git a/pages/mes-rendezvous.tsx b/pages/mes-rendezvous.tsx
@@ -129,25 +129,25 @@ function MesRendezvous({
             du {debutPeriode} au {finPeriode}
           </p>
           <button
-            title='Aller à la semaine précédente'
             aria-label='Aller à la semaine précédente'
             onClick={allerRdvsPasses}
           >
             <IconComponent
               name={IconName.ChevronLeft}
               className='w-6 h-6 fill-primary hover:fill-primary_darken'
               focusable='false'
+              title='Aller à la semaine précédente'
             />
           </button>
           <button
-            title='Aller à la semaine suivante'
             aria-label='Aller à la semaine suivante'
             onClick={allerRdvsSemaineFuture}
           >
             <IconComponent
               name={IconName.ChevronRight}
               className='w-6 h-6 fill-primary ml-8 hover:fill-primary_darken'
               focusable='false'
+              title='Aller à la semaine suivante'
             />
           </button>
         </div>

diff --git a/pages/reaffectation.tsx b/pages/reaffectation.tsx
@@ -275,7 +275,6 @@ function Reaffectation(_: ReaffectationProps) {
                 isRechercheJeunesEnabled ? 'hover:bg-primary_lighten' : ''
               } disabled:cursor-not-allowed disabled:border-disabled`}
               type='submit'
-              title='Rechercher'
               disabled={!isRechercheJeunesEnabled}
             >
               <span className='sr-only'>Rechercher conseiller initial</span>
@@ -286,6 +285,7 @@ function Reaffectation(_: ReaffectationProps) {
                 className={`w-4 h-4 ${
                   isRechercheJeunesEnabled ? '' : 'fill-disabled'
                 }`}
+                title='Rechercher'
               />
             </button>
           </div>