diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-13 18:57:01 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-13 18:57:01 +0100 |
| commit | 010e2e68568b3894fcaefc1f7c735b810a29a5c4 (patch) | |
| tree | b743920579275456fc47b3fcae5b7261baca28b9 | |
| parent | 02ee023272c4f28fd866de40dd2b15a7f7b75a4a (diff) | |
fix: remove focus on route change
| -rw-r--r-- | src/components/Layouts/Layout.tsx | 11 |
1 files changed, 10 insertions, 1 deletions
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> |