eslint-plugin-rn-a11y

eslint-plugin-rn-a11y is ESLint plugin for Accessibility in React Native.
This is ported(some rules, utils) and extended eslint-plugin-react-native-a11y.

Install

yarn add -D eslint-plugin-rn-a11y

Configuration

This plugin has several presets.
They can be set to the extends property of eslintrc.

• plugin:rn-a11y/basic: Common basic rules of iOS and Android.
• plugin:rn-a11y/iOS: iOS-specific rules, includes basic.
• plugin:rn-a11y/android: Android-specific rules, includes basic.
• plugin:rn-a11y/wcag: WCAG2.x rules, includes basic.
• plugin:rn-a11y/all: Includes basic, iOS, wcag, and android.

For example:

// eslintrc.js

module.exports = {
  /* ... */
  extends: ['plugin:rn-a11y/basic'],
  /* ... */
}

Supported Rules

See: Rules.

Options

Some rules have options. Check each rules for available options.
For example, to set the limit option with no-long-alt:

// eslintrc.js

module.exports = {
  /* ... */
  rules: {
    'rn-a11y/no-long-alt': [
      'error',
      {
        limit: 100,
      },
    ],
  },
  /* ... */
}

Set Custom Component Name

If you want to include custom components in rules, set the component name to rules in .eslintrc.js as shown below.
(When using TouchableXXX and Pressable, specify those as the Touchable property.)

// eslintrc.js

const Image = ['MyPict']
const Touchable = ['MyTouchableOpacity', 'MyPressable']

const CustomComponents = {
  Image,
  Touchable,
}

module.exports = {
  /* ... */
  rules: {
    'rn-a11y/no-nested-touchables': ['error', CustomComponents],
    'rn-a11y/touchable-has-alt': ['error', CustomComponents],
    'rn-a11y/no-long-alt': ['error', { ...CustomComponents, limit: 100 }], // if specifying rule options
  },
}

Custom component settings are for each rule. It cannot be set in common with other rules.

Support

• Node: ^10.12.0 or above.
• React Native: 0.57 or above.
• ESLint: 6 or above.

This plugin is not compatible with less than React Native 0.57, please use eslint-plugin-react-native-a11y if using it.
React (not React Native) is not supported, please use eslint-plugin-jsx-a11y

Contribution

Contribution is welcome!

Please see Contribution Guide.

License

MIT

1. Currently, some rules are by eslint-plugin-react-native-a11y. Those licenses belong to them.

• has-accessibility-hints
• has-valid-accessibility-actions
• no-nested-touchable

2. The utility function findChild is also a port from this plugin.
   There are changes for this plugin, and I have added comments in the relevant places.

3. JSX type definitions are ported from ast-types-flow to TypeScript.