interactiveElementsFocusable

Reports interactive elements that are not focusable via keyboard.

✅ This rule is included in the jsx logical preset.

Elements with interactive roles and event handlers must be focusable. Users navigating with keyboards need to be able to reach all interactive elements. When interactive elements are not focusable, they become inaccessible to keyboard-only users.

This rule reports elements that have interactive roles (like button, link, etc.) and event handlers but lack a way to be focused via keyboard - either through being inherently focusable (like <button>) or having an explicit tabIndex attribute.

Examples

❌ Incorrect

<div role="button" onClick={() => {}} />

<span role="link" onClick={() => {}} />

<div role="checkbox" onClick={() => {}} />

<div role="menuitem" onKeyDown={() => {}} />

✅ Correct

<button onClick={() => {}} />

<div role="button" tabIndex={0} onClick={() => {}} />

<span role="link" tabIndex={0} onClick={() => {}} />

<div role="menuitem" tabIndex={-1} onKeyDown={() => {}} />

<a href="#section" onClick={() => {}} />

When Not To Use It

If you are using a framework that automatically manages focus for interactive elements, you may want to disable this rule.

Further Reading

• MDN: Keyboard-navigable JavaScript widgets
• WCAG 2.1.1: Keyboard
• WAI-ARIA Authoring Practices: Keyboard Navigation Conventions

Equivalents in Other Linters

• ESLint: jsx-a11y/interactive-elements-focusable