| 1 | # jsx-a11y/no-interactive-element-to-noninteractive-role
|
|---|
| 2 |
|
|---|
| 3 | 💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
|
|---|
| 4 |
|
|---|
| 5 | <!-- end auto-generated rule header -->
|
|---|
| 6 |
|
|---|
| 7 | Interactive HTML elements indicate _controls_ in the user interface. Interactive elements include `<a href>`, `<button>`, `<input>`, `<select>`, `<textarea>`.
|
|---|
| 8 |
|
|---|
| 9 | Non-interactive HTML elements and non-interactive ARIA roles indicate _content_ and _containers_ in the user interface. Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<img>`, `<li>`, `<ul>` and `<ol>`.
|
|---|
| 10 |
|
|---|
| 11 | [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
|
|---|
| 12 |
|
|---|
| 13 | ## How do I resolve this error?
|
|---|
| 14 |
|
|---|
| 15 | ### Case: The element should be a container, like an article
|
|---|
| 16 |
|
|---|
| 17 | Wrap your interactive element in a `<div>` with the desired role.
|
|---|
| 18 |
|
|---|
| 19 | ```jsx
|
|---|
| 20 | <div role="article">
|
|---|
| 21 | <button>Save</button>
|
|---|
| 22 | </div>
|
|---|
| 23 | ```
|
|---|
| 24 |
|
|---|
| 25 | ### Case: The element should be content, like an image
|
|---|
| 26 |
|
|---|
| 27 | Put the content inside your interactive element.
|
|---|
| 28 |
|
|---|
| 29 | ```jsx
|
|---|
| 30 | <div
|
|---|
| 31 | role="button"
|
|---|
| 32 | onClick={() => {}}
|
|---|
| 33 | onKeyPress={() => {}}
|
|---|
| 34 | tabIndex="0">
|
|---|
| 35 | <div role="img" aria-label="Save" />
|
|---|
| 36 | </div>
|
|---|
| 37 | ```
|
|---|
| 38 |
|
|---|
| 39 | ## Rule options
|
|---|
| 40 |
|
|---|
| 41 | The recommended options for this rule allow the `tr` element to be given a role of `presentation` (or its semantic equivalent `none`). Under normal circumstances, an element with an interactive role should not be semantically neutralized with `presentation` (or `none`).
|
|---|
| 42 |
|
|---|
| 43 | Options are provided as an object keyed by HTML element name; the value is an array of interactive roles that are allowed on the specified element.
|
|---|
| 44 |
|
|---|
| 45 | ```js
|
|---|
| 46 | {
|
|---|
| 47 | 'no-interactive-element-to-noninteractive-role': [
|
|---|
| 48 | 'error',
|
|---|
| 49 | {
|
|---|
| 50 | tr: ['none', 'presentation'],
|
|---|
| 51 | },
|
|---|
| 52 | ]
|
|---|
| 53 | }
|
|---|
| 54 | ```
|
|---|
| 55 |
|
|---|
| 56 | Under the recommended options, the following code is valid. It would be invalid under the strict rules.
|
|---|
| 57 |
|
|---|
| 58 | ```jsx
|
|---|
| 59 | <tr role="presentation" />
|
|---|
| 60 | ```
|
|---|
| 61 |
|
|---|
| 62 | ## Accessibility guidelines
|
|---|
| 63 |
|
|---|
| 64 | - [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
|
|---|
| 65 |
|
|---|
| 66 | ### Resources
|
|---|
| 67 |
|
|---|
| 68 | - [ARIA Spec, States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties)
|
|---|
| 69 | - [Chrome Audit Rules, AX_ARIA_04](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04)
|
|---|
| 70 | - [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
|
|---|
| 71 | - [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
|
|---|
| 72 | - [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
|
|---|
| 73 | - [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
|
|---|
