Merge pull request #1141 from SocialGouv/feat/us-2096-lien-evitement

feat(US-209): Ajoute lien d'évitement

components/LienEvitement.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from 'next/router'
+import React, { useEffect, useRef } from 'react'
+
+import styles from 'styles/components/Layouts.module.css'
+
+export default function LienEvitement() {
+  const router = useRouter()
+  const refContainer = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (refContainer.current) {
+      refContainer.current.focus()
+    }
+  }, [router.pathname])
+
+  return (
+    <>
+      <div ref={refContainer} tabIndex={-1} />
+      <div className='h-0 overflow-hidden focus-within:h-auto focus-within:bg-blanc '>
+        <a
+          href='#contenu'
+          title='Aller au contenu'
+          className='text-primary_darken hover:text-primary'
+        >
+          Aller au contenu
+        </a>
+      </div>
+    </>
+  )
+}

components/layouts/Layout.tsx

@@ -24,6 +24,9 @@ import { usePortefeuillePotentiellementPasRecupere } from 'utils/portefeuilleCon
 const ChatManager = dynamic(import('components/layouts/ChatManager'), {
   ssr: false,
 })
+const LienEvitement = dynamic(import('components/LienEvitement'), {
+  ssr: false,
+})
 const SidebarLayout = dynamic(import('components/layouts/SidebarLayout'), {
   ssr: false,
 })
@@ -53,7 +56,6 @@ export default function Layout({ children }: LayoutProps) {
     usePortefeuillePotentiellementPasRecupere()
 
   const containerRef = useRef<HTMLDivElement>(null)
-  const mainRef = useRef<HTMLDivElement>(null)
   const [hasMessageNonLu, setHasMessageNonLu] = useState(false)
 
   const pageCouranteEstMessagerie = router.pathname === '/messagerie'
@@ -75,10 +77,6 @@ export default function Layout({ children }: LayoutProps) {
       window.removeEventListener('resize', resizeContainerToInnerHeight, true)
   }, [])
 
-  useEffect(() => {
-    if (mainRef.current) mainRef.current.scrollTo(0, 0)
-  }, [router.asPath, mainRef])
-
   useEffect(() => {
     if (!conseiller) {
       Promise.all([
@@ -119,6 +117,7 @@ export default function Layout({ children }: LayoutProps) {
   return (
     <>
       <AppHead hasMessageNonLu={hasMessageNonLu} titre={pageTitle} />
+      <LienEvitement />
 
       {!conseiller && <SpinningLoader />}
 
@@ -134,7 +133,6 @@ export default function Layout({ children }: LayoutProps) {
               <SidebarLayout />
 
               <div
-                ref={mainRef}
                 className={`${styles.page} ${
                   withChat ? styles.page_when_chat : ''
                 }`}
@@ -147,6 +145,7 @@ export default function Layout({ children }: LayoutProps) {
 
                 <main
                   role='main'
+                  id='contenu'
                   className={`${styles.content} ${
                     withChat ? styles.content_when_chat : ''
                   }`}
@@ -178,8 +177,9 @@ export default function Layout({ children }: LayoutProps) {
                 pageEstMessagerie={true}
               />
 
-              <div ref={mainRef} className={styles.page}>
+              <div className={styles.page}>
                 <main
+                  id='contenu'
                   role='main'
                   className={`${styles.content} ${styles.messagerie_full_screen}`}
                 >

styles/components/Layouts.module.css

@@ -73,6 +73,7 @@
   background-color: theme('colors.primary_lighten');
 }
 
+
 @media screen and (min-width: theme('screens.layout_s')) {
   .container {
     --sidebar-width: 10vw;

tests/components/Layout.test.tsx

@@ -105,6 +105,13 @@ describe('<Layout />', () => {
       })
     })
 
+    it("affiche le lien d'évitement", () => {
+      // Then
+      expect(
+        screen.getByRole('link', { name: 'Aller au contenu' })
+      ).toHaveAttribute('href', '#contenu')
+    })
+
     it('affiche le titre de la page', () => {
       // Then
       expect(
@@ -117,7 +124,7 @@ describe('<Layout />', () => {
     })
 
     it('contient la région (landmark) main', () => {
-      expect(screen.getByRole('main')).toBeInTheDocument()
+      expect(screen.getByRole('main')).toHaveAttribute('id', 'contenu')
     })
 
     it("affiche le fil d'ariane", () => {