a11y-hooks v0.1.4

React a11y hooks 🎣♿

A set of hooks to make it easy for everyone to make their site more accessible and improve their ux.

table of contents:

• useFocus
• useDetectKeyboard

useFocus

• Programmatically focuses bound element on mount or whenever shouldFocus is set to true.
• check here for example usage.

const bind = useFocus(arguments?: {
  shouldFocus?: boolean;
  ref?: React.RefObject<HTMLElement>;
})

  ...
   <input {...bind} />

Arguments

useDetectKeyboard

useDetectKeyboard(className?: string)

• Adds class .user-is-tabbing to document body if user is using tab, this way things like focus styles can be hidden only when the user is navigating via keyboard.
• check here for example usage.

// in your app.js
function App() {
  useDetectKeyboard();
}

• also returns a boolean

// with styled components
 function App() {
  const usesTab: boolean = useDetectKeyboard();

  return (
    <GlobalStyles usesTab={usesTab}>
  )

Arguments