eslint-plugin-aria-hidden-non-interactive

An ESLint plugin to add the aria-hidden attribute to non-interactive elements with click handlers in JSX. The aria-hidden attribute can be used to hide non-interactive content from the accessibility API.

Note: This plugin is only recommended to use if the website doesn't need to support full accessibility.

Installation

You'll first need to install ESLint:

npm install eslint --save-dev

Next, install eslint-plugin-aria-hidden-non-interactive:

npm install eslint-plugin-aria-hidden-non-interactive --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-aria-hidden-non-interactive globally.

Usage

Add aria-hidden-non-interactive to the plugins section of your .eslintrc configuration file. Then, configure the rule under the rules section:

{
  "plugins": ["aria-hidden-non-interactive"],
  "rules": {
    "aria-hidden-non-interactive/require-aria-hidden": "error"
  }
}

Supported Rules

• require-aria-hidden: Enforces the presence of the aria-hidden attribute on non-interactive elements with click handlers. If the attribute is missing, ESLint will automatically fix it by adding aria-hidden="true".