diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-25 12:29:40 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-25 12:29:40 +0200 |
| commit | 4ac14dec8288183d930684fa07463994f561eecc (patch) | |
| tree | 1deb6b4eac0ffd74741781cc20d356e63ac1d797 /src | |
| parent | 297654f58e351ac6e10c4f7c465bb62d37d4495b (diff) | |
fix: reset focus to top of the page on route change
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/templates/layout/layout.tsx | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx index 0b1fe99..982b099 100644 --- a/src/components/templates/layout/layout.tsx +++ b/src/components/templates/layout/layout.tsx @@ -11,10 +11,11 @@ import NoScript from '@components/atoms/layout/no-script'; import Footer, { type FooterProps } from '@components/organisms/layout/footer'; import Header, { type HeaderProps } from '@components/organisms/layout/header'; import { type NextPageWithLayoutOptions } from '@ts/types/app'; +import useRouteChange from '@utils/hooks/use-route-change'; import useScrollPosition from '@utils/hooks/use-scroll-position'; import useSettings from '@utils/hooks/use-settings'; import Script from 'next/script'; -import { FC, ReactElement, ReactNode, useState } from 'react'; +import { FC, ReactElement, ReactNode, useRef, useState } from 'react'; import { useIntl } from 'react-intl'; import { Person, SearchAction, WebSite, WithContext } from 'schema-dts'; import styles from './layout.module.scss'; @@ -173,6 +174,11 @@ const Layout: FC<LayoutProps> = ({ }; useScrollPosition(updateBackToTopClassName); + const topRef = useRef<HTMLSpanElement>(null); + const giveFocusToTopRef = () => { + if (topRef.current) topRef.current.focus(); + }; + useRouteChange(giveFocusToTopRef); return ( <> @@ -189,7 +195,7 @@ const Layout: FC<LayoutProps> = ({ <noscript> <div className={styles['noscript-spacing']}></div> </noscript> - <span tabIndex={-1}></span> + <span ref={topRef} tabIndex={-1}></span> <ButtonLink target="#main" className="screen-reader-text"> {skipToContent} </ButtonLink> |