From 9dfbd6e7e8749543b318fc7937501d102129bd1b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 16 Dec 2023 18:40:32 +0100
Subject: fix(layout): reset focus on route change

I mistakenly removed the `giveFocusToTop` on route change but Next
router is still not fully accessible. It is important for keyboard
users to be redirected at the top of the page when changing page so we
need to reset the focus.
---
 src/components/templates/layout/layout.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 2a6ac2e..16c9180 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -1,6 +1,13 @@
-import type { FC, ReactElement, ReactNode } from 'react';
+import {
+  useRef,
+  type FC,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+} from 'react';
 import { useIntl } from 'react-intl';
 import type { NextPageWithLayoutOptions } from '../../../types';
+import { useOnRouteChange } from '../../../utils/hooks';
 import { ButtonLink, Main } from '../../atoms';
 import styles from './layout.module.scss';
 import { SiteFooter } from './site-footer';
@@ -34,12 +41,19 @@ export const Layout: FC<LayoutProps> = ({ children, isHome }) => {
     }),
   };
 
+  const topRef = useRef<HTMLSpanElement>(null);
   const topId = 'top';
   const mainId = 'main';
 
+  const giveFocusToTop = useCallback(() => {
+    if (topRef.current) topRef.current.focus();
+  }, []);
+
+  useOnRouteChange(giveFocusToTop);
+
   return (
     <>
-      <span id={topId} />
+      <span id={topId} ref={topRef} tabIndex={-1} />
       <noscript>
         <div className={styles['noscript-spacing']} />
       </noscript>
-- 
cgit v1.2.3