A11y Helpers

Functions to help achieve accessiblilty standards across our platform.

useFocus

useFocus hook allows us to set the focus on any element. This hook returns a react ref and a function to set the focus to the ref.

AppSearch.tsx

import React from 'react'
import { Button } from '@rhythm/buttons'
import { TextInput } from '@rhythm/inputs'
import { useFocus } from '@shared/a11y-helpers'


export const AppSearch: React.FC<AppSearch> = () => {
    const [appSearchRef, setAppSearchFocus] = useFocus()
    return (
        <>
            <TextInput ref={appSearchRef}>
            <Button onClick={setAppSearchFocus}>Click to search.</Button>
        </>
    )
}