diff options
Diffstat (limited to 'src/components')
| -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> |