Click handler on a non-interactive element

ui/click-on-non-interactivewarningaccessibility

Why it matters

A <div onClick> can't be focused or activated by keyboard and isn't announced as a control.

Fix

Use a <button type="button">, or add role, tabIndex={0} and an onKeyDown for Enter/Space.

Credit

  • From W3C Web Accessibility Initiative

    WCAG 2.1.1 requires all functionality to be operable by keyboard.

  • From Vercel

    The Web Interface Guidelines require button for actions and links for navigation, never div onClick.

References

See it

Use real buttons and links