← Back to rules

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

What it does

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 an interactive element to a non-interactive element. Non-interactive ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.

Why is this bad?

Using a non-interactive role on an interactive element can confuse assistive technology users.

Examples

Examples of incorrect code for this rule:

<button role="img">Save</button>

Examples of correct code for this rule:

<div role="img">
  <button>Save</button>
</div>

Configuration

This rule accepts a configuration object with the following properties:

type: object

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-interactive-element-to-noninteractive-role": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["jsx-a11y"],
  rules: {
    "jsx-a11y/no-interactive-element-to-noninteractive-role": "error",
  },
});

CLI

oxlint --deny jsx-a11y/no-interactive-element-to-noninteractive-role --jsx-a11y-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground