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.

1 files 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>