noNoninteractiveElementToInteractiveRole
Summary
Section titled Summary- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/noNoninteractiveElementToInteractiveRole - 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:
Description
Section titled DescriptionEnforce that interactive ARIA roles are not assigned to non-interactive HTML elements.
Non-interactive HTML elements indicate content and containers in the user interface.
Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol>.
Interactive HTML elements indicate controls in the user interface.
Interactive elements include <a href>, <button>, <input>, <select>, <textarea>.
WAI-ARIA roles should not be used to convert a non-interactive element to an interactive element.
Interactive ARIA roles include button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch and textbox.
Examples
Section titled ExamplesInvalid
Section titled Invalid<h1 role="button">Some text</h1>code-block.jsx:1:5 lint/a11y/noNoninteractiveElementToInteractiveRole FIXABLE ━━━━━━━━━━━━━━━━━━━━
✖ The HTML element h1 is non-interactive and should not have an interactive role.
> 1 │ <h1 role=“button”>Some text</h1>
│ ^^^^^^^^^^^^^
2 │
ℹ Replace h1 with a div or a span.
ℹ Unsafe fix: Remove the role attribute.
1 │ <h1·role=“button”>Some·text</h1>
│ -------------
Valid
Section titled Valid<span role="button">Some text</span>Accessibility guidelines
Section titled Accessibility guidelinesResources
Section titled Resources- WAI-ARIA roles
- WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets
- Fundamental Keyboard Navigation Conventions
- Mozilla Developer Network - ARIA Techniques
How to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "noNoninteractiveElementToInteractiveRole": "error" } } }}