---
url: /docs/guide/usage/linter/rules/jsx_a11y/interactive-supports-focus.md
---

### What it does

Enforce that elements with interactive roles and interaction handlers
(mouse or key press) must be focusable.

### Why is this bad?

Elements that handle user interaction (e.g., `onClick`) but are not
natively focusable (like `<div>` or `<span>`) must be made focusable so
that keyboard-only users and assistive technology users can reach and
activate them.

Without a `tabIndex`, these elements are unreachable via keyboard navigation,
creating a barrier for users who cannot use a mouse.

### Examples

Examples of **incorrect** code for this rule:

```jsx
<span onClick={submitForm} role="button">Submit</span>
<a onClick={showNextPage} role="button">Next page</a>
```

Examples of **correct** code for this rule:

```jsx
<div aria-hidden onClick={() => void 0} />
<span onClick={doSomething} tabIndex={0} role="button">Click me!</span>
<span onClick={doSomething} tabIndex={-1} role="menuitem">Click me too!</span>
<a href="javascript:void(0);" onClick={doSomething}>Click ALL the things!</a>
<button onClick={doSomething}>Click the button :)</button>
```

## Configuration

This rule accepts a configuration object with the following properties:

### tabbable

type: `string[]`

default: `["button", "checkbox", "link", "searchbox", "spinbutton", "switch", "textbox"]`

An array of interactive ARIA roles that should be considered tabbable (require `tabIndex={0}`).
Interactive roles not in this list are only required to be focusable (`tabIndex={-1}` is sufficient).
Defaults to `["button", "checkbox", "link", "searchbox", "spinbutton", "switch", "textbox"]`.

## How to use

## Version

This rule was added in v1.63.0.

## References