Käyttötarkoitus
Käytä useNonInteractiveFocus-hookia, kun haluat siirtää kohdistuksen elementtiin, joka ei normaalisti ole interaktiivinen.
Kohdistus voidaan siirtää esimerkiksi otsikkoon, tekstiin tai niitä ympäröivään elementtiin, kun ruudunlukijan käyttäjän on tärkeää saada tietoa muutoksesta sivulla.
Saavutettavuus
Kohdistuksen voi korostaa visuaalisesti focus tai focus-visible CSS-pseudoluokan avulla, jolloin se näytetään aina tai vain näppäimistöä käytettäessä.
const focusToElement = useNonInteractiveFocus({
focusRing: FocusRing.offsetDark,
focusRingType: FocusRingType.focus,
});
Esimerkit
Kohdistuksen siirtäminen, kun komponentti renderöidään
function UseFocusHeadingExample() {
const headingRef = useRef<HTMLHeadingElement>(null);
const focusToElement = useNonInteractiveFocus({
focusRing: FocusRing.offsetDark,
focusRingType: FocusRingType.focus,
});
useEffect(() => {
focusToElement(headingRef);
}, [focusToElement]);
return (
<Heading as="h2" ref={headingRef} mt={0} mb={6}>
Esimerkkiotsikko
</Heading>
);
}
function UseFocusExample() {
const [isVisible, setIsVisible] = useState(false);
return (
<>
{isVisible && <UseFocusHeadingExample />}
<Button appearance="outline" onClick={() => setIsVisible(!isVisible)}>
{isVisible && <span>Piilota komponentti</span>}
{!isVisible && <span>Näytä komponentti</span>}
</Button>
</>
);
}
render(<UseFocusExample />);
Kohdistus komponentin ref-objektin avulla
function UseFocusExample() {
const headingRef = useRef<HTMLHeadingElement>(null);
const focusToElement = useNonInteractiveFocus({
focusRing: FocusRing.offsetDark,
focusRingType: FocusRingType.focus,
});
const handleOnClick = () => {
focusToElement(headingRef);
};
return (
<>
<Heading as="h2" ref={headingRef} mt={0} mb={6}>
Esimerkkiotsikko
</Heading>
<Button appearance="outline" onClick={handleOnClick}>
Siirrä kohdistus otsikkoon
</Button>
</>
);
}
Kohdistus HTML-elementin avulla
HTML-elementin voi etsiä myös sopivan selektorin avulla, mikäli kyseiselle elementille ei voi suoraan välittää ref-objektia.
Esimerkissä kohdistus siirtyy Result-komponentin h2-otsikkoon.
function UseFocusExample() {
const containerRef = useRef<HTMLDivElement>(null);
const focusToElement = useNonInteractiveFocus({
focusRing: FocusRing.offsetDark,
focusRingType: FocusRingType.focus,
});
const handleOnClick = () => {
if (containerRef.current?.querySelector("h2")) {
focusToElement(containerRef.current.querySelector("h2")!);
}
};
return (
<div ref={containerRef}>
<Result variant="success" title="Hakemus vastaanotettu" msg="Voit seurata asiasi etenemistä OmaKelan etusivulta.">
<Button appearance="outline" onClick={handleOnClick}>
Siirrä kohdistus otsikkoon
</Button>
</Result>
</div>
);
}
Kohdistus React-komponenttien ulkopuolella
React-komponenttien ulkopuolella voi käyttää focusNonInteractiveElement-funktiota.
Huomioitavaa selaintuessa