From 010e2e68568b3894fcaefc1f7c735b810a29a5c4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 13 Jan 2022 18:57:01 +0100
Subject: fix: remove focus on route change

---
 src/components/Layouts/Layout.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components/Layouts/Layout.tsx')

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 8a57cf6..f5116f8 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, useEffect, useRef } from 'react';
 import Footer from '@components/Footer/Footer';
 import Header from '@components/Header/Header';
 import Main from '@components/Main/Main';
@@ -6,6 +6,7 @@ import Breadcrumb from '@components/Breadcrumb/Breadcrumb';
 import { t } from '@lingui/macro';
 import Head from 'next/head';
 import { config } from '@config/website';
+import { useRouter } from 'next/router';
 
 const Layout = ({
   children,
@@ -14,6 +15,13 @@ const Layout = ({
   children: ReactNode;
   isHome?: boolean;
 }) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const { asPath } = useRouter();
+
+  useEffect(() => {
+    ref.current?.focus();
+  }, [asPath]);
+
   return (
     <>
       <Head>
@@ -36,6 +44,7 @@ const Layout = ({
           title={`${config.name}'s RSS feed`}
         />
       </Head>
+      <span ref={ref} tabIndex={-1} />
       <a href="#main" className="screen-reader-text">{t`Skip to content`}</a>
       <Header isHome={isHome} />
       <Main>{children}</Main>
-- 
cgit v1.2.3

