eslint-plugin-react-native-a11y

Eslint-plugin-react-native-a11y is a collection of React Native specific ESLint rules for identifying accessibility issues. Building upon the foundation set down by eslint-plugin-jsx-a11y, eslint-plugin-react-native-a11y detects a few of the most commonly made accessibility issues found in react native apps. These rules make it easier for your apps to be navigable by users with screen readers.

Installation

Install ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Next, install eslint-plugin-react-native-a11y:

# npm
npm install eslint-plugin-react-native-a11y --save-dev

# yarn
yarn add eslint-plugin-react-native-a11y --dev

Note: If you installed ESLint globally (using the -g flag in npm, or the global prefix in yarn) then you must also install eslint-plugin-react-native-a11y globally.

Usage

Add react-native-a11y to the plugins section of your .eslintrc configuration file.

{
  "plugins": ["react-native-a11y"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "react-native-a11y/rule-name": 2
  }
}

Alternatively, you can enable all the recommended rules at once by adding plugin:react-native-a11y/recommended to the extends section of your .eslintrc configuration file:

{
  "extends": [
    "plugin:react-native-a11y/recommended"
  ]
}

Supported Rules

• accessibility-label: Enforce that views that have accessible={true}, also have an accessibilityLabel prop
• has-accessibility-props: Enforce all <Touchable\*> components have accessibilityRole prop or both accessibilityTraits and accessibilityComponentType props set
• has-valid-accessibility-role: Enforce accessibilityRole property value is valid
• has-valid-accessibility-states: Enforce accessibilityStates property value is valid
• has-valid-accessibility-component-type: Enforce accessibilityComponentType property value is valid
• has-valid-accessibility-traits: Enforce accessibilityTraits and accessibilityComponentType prop values must be valid
• has-valid-accessibility-live-region: Enforce accessibilityLiveRegion prop values must be valid
• has-valid-important-for-accessibility: Enforce importantForAccessibility property value is valid
• no-nested-touchables: Enforce if a view has accessible={true}, that there are no touchable elements inside

Rule Options

The following options are available to customize the recommended rule set.

Custom Touchables

react-native-a11y/has-accessibility-props and react-native-a11y/no-nested-touchables allow you to define an array of names for custom components that you may have that conform to the same accessibility interfaces as Touchables. Each of these names must start with 'Touchable'.

"react-native-a11y/has-accessibility-props": [
  "error",
  {
    "touchables": ["TouchableCustom"]
  }
]

Creating a new rule

If you are developing new rules for this project, you can use the create-rule script to scaffold the new files.

$ ./scripts/create-rule.js my-new-rule

Attribution

This project started as a fork of eslint-plugin-jsx-a11y and a lot of the work was carried out by its contributors, to whom we owe a lot!

License

eslint-plugin-react-native-a11y is licensed under the MIT License.