Käyttötarkoitus
SkipLink
-komponenttia käytetään hyppylinkin toteutukseen, jonka tarkoituksena on tarjota nopea tapa siirtyä suoraan sivun pääsisältöön.
function SkipLinkExample() {
const linkRef = useRef();
const focusToElement = useNonInteractiveFocus();
const handleOnClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
if (document?.querySelector("h1")) {
focusToElement(document.querySelector("h1"));
}
};
return (
<>
<Button onClick={() => linkRef.current.focus()}>Näytä linkki</Button>
<SkipLink ref={linkRef} href="#main-content" onClick={handleOnClick}>
Siirry sisältöön
</SkipLink>
</>
);
}