# jsx-a11y/no-noninteractive-element-to-interactive-role

> Disallow interactive ARIA roles on non-interactive elements

A `role` only changes what a screen reader announces. An `<h2 role="button">` is announced as a button, but you can't reach it with the Tab key, it doesn't react to Enter or Space, and it's no longer in the list of headings. Keep the element and put a real `<button>` or `<a>` inside or around it.

Non-interactive elements include headings, `<p>`, `<li>`, `<img>`, `<article>`, `<main>` and `<table>`. `<div>` and `<span>` don't mean anything by themselves, so they can take any role. Only a `role` written as a string is checked.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"jsx-a11y/no-noninteractive-element-to-interactive-role" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
const title = <h2 role="button" onClick={toggle}>Details</h2>;
const avatar = <img src={user.photo} alt={user.name} role="link" />;
```

Not reported:

{/* good */}
```jsx
const title = (
  <h2>
    <button onClick={toggle}>Details</button>
  </h2>
);

const avatar = (
  <a href={user.url}>
    <img src={user.photo} alt={user.name} />
  </a>
);

const custom = <div role="button" tabIndex={0} onClick={toggle} />;
```

## Options

The option is an object that maps an element to the roles it's allowed to have. The default lets lists be menus, tabs and trees:

```json
{
  "ul": ["menu", "menubar", "radiogroup", "tablist", "tree", "treegrid"],
  "ol": ["menu", "menubar", "radiogroup", "tablist", "tree", "treegrid"],
  "li": ["menuitem", "menuitemcheckbox", "menuitemradio", "row", "tab", "treeitem"],
  "fieldset": ["radiogroup", "presentation"]
}
```

Your object replaces the default, so repeat the entries you want to keep.

{/* good */}
```jsx
const tabs = (
  <ul role="tablist">
    <li role="tab">Profile</li>
  </ul>
);
```

{/* good {"options": [{"table": ["grid"]}]} */}
```jsx
const sheet = <table role="grid" />;
```

{/* bad {"options": [{"table": ["grid"]}]} */}
```jsx
const tabs = <ul role="tablist" />;
```