noInteractiveElementToNoninteractiveRole

Este conteúdo não está disponível em sua língua ainda.

JSX and TSX

Summary

Rule available since: v1.3.0
Diagnostic Category: lint/a11y/noInteractiveElementToNoninteractiveRole
This rule is recommended, which means is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Same as jsx-a11y/no-interactive-element-to-noninteractive-role

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noInteractiveElementToNoninteractiveRole": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that non-interactive ARIA roles are not assigned to interactive HTML elements.

Interactive HTML elements indicate controls in the user interface. Interactive elements include <a href>, <button>, <input>, <select>, <textarea>. 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>.

WAI-ARIA roles 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.

Examples

Invalid

1
<input role="img" />;

code-block.jsx:1:1 lint/a11y/noInteractiveElementToNoninteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  ✖ Interactive elements should not be assigned non-interactive roles.
  
  > 1 │ <input role=“img” />;
      │ ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  ℹ Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  ℹ Unsafe fix: Remove the role attribute.
  
    1 │ <input·role=“img”·/>;
      │        -----------

Valid

1
<input role="button" />;

1
<canvas role="img" />;