FormidableLabs
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.
Setup
Pre-Requisites
Before starting, check you already have ESLint as a devDependency of your project.
Projects created using
react-native initwill already have this, but for Expo depending on your template you may need to follow ESLint's installation instructions.
Installation
Next, install eslint-plugin-react-native-a11y:
npm install eslint-plugin-react-native-a11y --save-dev
# or
yarn add eslint-plugin-react-native-a11y --devNote: 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.
Configuration
This plugin exposes four recommended configs.
| Name | Description |
|---|---|
| basic | Only use basic validation rules common to both iOS & Android |
| ios | Use all rules from "basic", plus iOS-specific extras |
| android | Use all rules from "basic", plus Android-specific extras |
| all | Use all rules from "basic", plus iOS-specific extras, plus Android-specific extras |
If your project only supports a single platform, you may get the best experience using a platform-specific config. This will both avoid reporting issues which do not affect your platform and also results in slightly faster linting for larger projects.
If you are unsure which one to use, in most cases
allcan be safely used.
Add the config you want to use to the extends section of your ESLint config using the pattern plugin:react-native-a11y/ followed by your config name, as shown below:
// .eslintrc.js
module.exports = {
root: true,
extends: ['@react-native-community', 'plugin:react-native-a11y/ios'],
};Alternatively if you do not want to use one of the pre-defined configs — or want to override the behaviour of a specific rule — you can always include a list rules and configurations in the rules section of your ESLint config.
// .eslintrc.js
module.exports = {
root: true,
extends: ['@react-native-community'],
rules: {
'react-native-a11y/rule-name': 2,
},
};For more information on configuring behaviour of an individual rule, please refer to the ESLint docs
Supported Rules
Basic
- has-accessibility-hint: Enforce
accessibilityHintis used in conjunction withaccessibilityLabel - has-accessibility-props: Enforce that
<Touchable\*>components only have either theaccessibilityRoleprop or bothaccessibilityTraitsandaccessibilityComponentTypeprops set - has-valid-accessibility-actions: Enforce both
accessibilityActionsandonAccessibilityActionprops are valid - has-valid-accessibility-role: Enforce
accessibilityRoleproperty value is valid - has-valid-accessibility-state: Enforce
accessibilityStateproperty value is valid - has-valid-accessibility-states: Enforce
accessibilityStatesproperty value is valid - has-valid-accessibility-component-type: Enforce
accessibilityComponentTypeproperty value is valid - has-valid-accessibility-traits: Enforce
accessibilityTraitsandaccessibilityComponentTypeprop values must be valid - has-valid-accessibility-value: Enforce
accessibilityValueproperty value is valid - no-nested-touchables: Enforce if a view has
accessible={true}, that there are no touchable elements inside - has-valid-accessibility-descriptors: Ensures that Touchable* components have appropriate props to communicate with assistive technologies
iOS
- has-valid-accessibility-ignores-invert-colors: Enforce that certain elements use
accessibilityIgnoresInvertColorsto avoid being inverted by device color settings.
Android
- has-valid-accessibility-live-region: Enforce
accessibilityLiveRegionprop values must be valid - has-valid-important-for-accessibility: Enforce
importantForAccessibilityproperty value is valid
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.
"react-native-a11y/has-accessibility-props": [
"error",
{
"touchables": ["TouchableCustom"]
}
]Custom Invertable Components (iOS)
react-native-a11y/has-valid-accessibility-ignores-invert-colors allows you to optionally define an Array of component names to check in addition to <Image />.
For more information, see the rule docs.
"react-native-a11y/has-valid-accessibility-ignores-invert-colors": [
"error",
{
"invertableComponents": [
"FastImage",
]
}
]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-ruleAttribution
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.
Maintenance Status
Active: Nearform is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.