a11y: fix navigation title login

SocialGouv · Nov 4, 2024 · 1febc14 · 1febc14
1 parent 19c5ff1
commit 1febc14
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 68 deletions.
diff --git a/app/(connected)/layout.tsx b/app/(connected)/layout.tsx
@@ -1,6 +1,7 @@
 import { Metadata } from 'next'
 import React, { ReactNode } from 'react'
 
+import A11yPageTitle from 'components/A11yPageTitle'
 import { MODAL_ROOT_ID } from 'components/globals'
 import LiensEvitement from 'components/LiensEvitement'
 import { estPassEmploi } from 'interfaces/conseiller'
@@ -33,6 +34,7 @@ export default async function LayoutWhenConnected({
   return (
     <>
       <AppContextProviders conseiller={conseiller} portefeuille={portefeuille}>
+        <A11yPageTitle />
         <LiensEvitement />
 
         {children}

diff --git a/app/(connexion)/login/cej/page.tsx b/app/(connexion)/login/cej/page.tsx
@@ -8,7 +8,8 @@ import {
 } from 'app/(connexion)/login/layout'
 
 export const metadata: Metadata = {
-  title: "Connexion dans l'espace conseiller CEJ",
+  title:
+    "Connexion dans l'espace conseiller - Outil du Contrat d’Engagement Jeune",
 }
 
 export default async function LoginCEJ({

diff --git a/app/(connexion)/login/layout.tsx b/app/(connexion)/login/layout.tsx
@@ -2,12 +2,15 @@ import { redirect } from 'next/navigation'
 import React, { ReactNode, Suspense } from 'react'
 
 import LayoutLoginClient from 'app/(connexion)/login/LayoutLoginClient'
+import A11yPageTitle from 'components/A11yPageTitle'
 import { MODAL_ROOT_ID } from 'components/globals'
 import { getSessionServerSide } from 'utils/auth/auth'
 
 export default function LayoutLogin({ children }: { children: ReactNode }) {
   return (
     <>
+      <A11yPageTitle />
+
       <Suspense>
         <LayoutLoginClient>{children}</LayoutLoginClient>
       </Suspense>

diff --git a/app/(connexion)/login/page.tsx b/app/(connexion)/login/page.tsx
@@ -8,7 +8,8 @@ import {
 import LoginHubPage from 'app/(connexion)/login/LoginHubPage'
 
 export const metadata: Metadata = {
-  title: 'Sélection de l’espace de connexion',
+  title:
+    'Sélection de l’espace de connexion - Outil du Contrat d’Engagement Jeune et du pass emploi',
 }
 
 export default async function LoginHub({

diff --git a/app/(connexion)/login/passemploi/page.tsx b/app/(connexion)/login/passemploi/page.tsx
@@ -8,7 +8,7 @@ import {
 import LoginPassEmploiPage from 'app/(connexion)/login/passemploi/LoginPassEmploiPage'
 
 export const metadata: Metadata = {
-  title: "Connexion dans l'espace conseiller Pass Emploi",
+  title: "Connexion dans l'espace conseiller - Outil du pass emploi",
 }
 
 export default async function LoginPassEmploi({

diff --git a/components/A11yPageTitle.tsx b/components/A11yPageTitle.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import React, { useEffect, useRef, useState } from 'react'
+
+export default function A11yPageTitle() {
+  const pathname = usePathname()
+  const refContainer = useRef<HTMLDivElement>(null)
+
+  const [pageTitle, setPageTitle] = useState<string>()
+
+  useEffect(() => {
+    setPageTitle(document.title)
+    refContainer.current?.focus()
+  }, [pathname])
+
+  return (
+    <div ref={refContainer} tabIndex={-1} className='sr-only'>
+      {pageTitle}
+    </div>
+  )
+}
diff --git a/components/LiensEvitement.tsx b/components/LiensEvitement.tsx
@@ -1,69 +1,51 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { ID_CHAT, ID_CONTENU, ID_MENU } from 'components/globals'
 import { useMobileViewport } from 'utils/mobileViewportContext'
 
 export default function LiensEvitement() {
   const pathname = usePathname()
-  const refContainer = useRef<HTMLDivElement>(null)
-
   const isMobileViewport = useMobileViewport()
 
-  const [pageTitle, setPageTitle] = useState<string>()
   const [pageHasChatAside, setPageHasChatAside] = useState<boolean>(false)
 
-  useEffect(() => {
-    setPageTitle(document.title)
-  }, [pathname])
-
-  useEffect(() => {
-    if (refContainer.current) {
-      refContainer.current.focus()
-    }
-  }, [pageTitle])
-
   useEffect(() => {
     setPageHasChatAside(Boolean(document.getElementById(ID_CHAT)))
-  }, [pageTitle])
+  }, [pathname])
 
   if (isMobileViewport) return null
 
   return (
-    <>
-      <div ref={refContainer} tabIndex={-1} className='sr-only'>
-        {pageTitle}
-      </div>
-      <ul className='sr-only focus-within:not-sr-only'>
-        <li>
-          <a
-            href={`#${ID_CONTENU}`}
-            className='text-primary_darken hover:text-primary'
-          >
-            Aller au contenu
-          </a>
-        </li>
+    <ul className='sr-only focus-within:not-sr-only'>
+      <li>
+        <a
+          href={`#${ID_CONTENU}`}
+          className='text-primary_darken hover:text-primary'
+        >
+          Aller au contenu
+        </a>
+      </li>
+      <li>
+        <a
+          href={`#${ID_MENU}`}
+          className='text-primary_darken hover:text-primary'
+        >
+          Aller au menu
+        </a>
+      </li>
+      {pageHasChatAside && (
         <li>
           <a
-            href={`#${ID_MENU}`}
+            href={`#${ID_CHAT}`}
             className='text-primary_darken hover:text-primary'
           >
-            Aller au menu
+            Aller aux conversations
           </a>
         </li>
-        {pageHasChatAside && (
-          <li>
-            <a
-              href={`#${ID_CHAT}`}
-              className='text-primary_darken hover:text-primary'
-            >
-              Aller aux conversations
-            </a>
-          </li>
-        )}
-      </ul>
-    </>
+      )}
+    </ul>
   )
 }
diff --git a/tests/pages/LoginCEJPage.server.test.tsx b/tests/pages/LoginCEJPage.server.test.tsx
@@ -34,7 +34,8 @@ describe('LoginCEJPage server side', () => {
 
     // Then
     expect(metadata).toEqual({
-      title: "Connexion dans l'espace conseiller CEJ",
+      title:
+        "Connexion dans l'espace conseiller - Outil du Contrat d’Engagement Jeune",
     })
     expect(LoginCEJPage).toHaveBeenCalledWith({}, {})
   })

diff --git a/tests/pages/LoginHubPage.server.test.tsx b/tests/pages/LoginHubPage.server.test.tsx
@@ -34,7 +34,8 @@ describe('LoginPage server side', () => {
 
     // Then
     expect(metadata).toEqual({
-      title: 'Sélection de l’espace de connexion',
+      title:
+        'Sélection de l’espace de connexion - Outil du Contrat d’Engagement Jeune et du pass emploi',
     })
     expect(LoginHubPage).toHaveBeenCalledWith({}, {})
   })

diff --git a/tests/pages/LoginPassEmploiPage.server.test.tsx b/tests/pages/LoginPassEmploiPage.server.test.tsx
@@ -36,7 +36,7 @@ describe('LoginPassEmploiPage server side', () => {
 
     // Then
     expect(metadata).toEqual({
-      title: "Connexion dans l'espace conseiller Pass Emploi",
+      title: "Connexion dans l'espace conseiller - Outil du pass emploi",
     })
     expect(LoginPassEmploiPage).toHaveBeenCalledWith(
       {

diff --git a/utils/AppContextProviders.tsx b/utils/AppContextProviders.tsx
@@ -43,32 +43,32 @@ export default function AppContextProviders({
   })
 
   return (
-    <ConseillerProvider conseiller={conseiller}>
-      <PortefeuilleProvider portefeuille={portefeuilleTrie}>
-        <ActualitesProvider>
-          <ChatCredentialsProvider>
-            <ChatsProvider>
-              <CurrentConversationProvider>
-                <ShowRubriqueListeDeDiffusionProvider>
-                  <ListeDeDiffusionSelectionneeProvider>
-                    <AlerteProvider>
-                      <MobileViewportProvider>
+    <MobileViewportProvider>
+      <ConseillerProvider conseiller={conseiller}>
+        <PortefeuilleProvider portefeuille={portefeuilleTrie}>
+          <ActualitesProvider>
+            <ChatCredentialsProvider>
+              <ChatsProvider>
+                <CurrentConversationProvider>
+                  <ShowRubriqueListeDeDiffusionProvider>
+                    <ListeDeDiffusionSelectionneeProvider>
+                      <AlerteProvider>
                         <ThemeProvider
                           defaultTheme={'neutral'}
                           themes={['neutral', 'darker']}
                           forcedTheme={theme}
                         >
                           {children}
                         </ThemeProvider>
-                      </MobileViewportProvider>
-                    </AlerteProvider>
-                  </ListeDeDiffusionSelectionneeProvider>
-                </ShowRubriqueListeDeDiffusionProvider>
-              </CurrentConversationProvider>
-            </ChatsProvider>
-          </ChatCredentialsProvider>
-        </ActualitesProvider>
-      </PortefeuilleProvider>
-    </ConseillerProvider>
+                      </AlerteProvider>
+                    </ListeDeDiffusionSelectionneeProvider>
+                  </ShowRubriqueListeDeDiffusionProvider>
+                </CurrentConversationProvider>
+              </ChatsProvider>
+            </ChatCredentialsProvider>
+          </ActualitesProvider>
+        </PortefeuilleProvider>
+      </ConseillerProvider>
+    </MobileViewportProvider>
   )
 }