eslint-plugin-triple-rn-a11y

eslint-plugin-triple-rn-a11y is a set of accessibility rules specifically designed for React Native applications. These rules align with the React Native Accessibility Guidelines. To see the full list of rules, please refer to the Rules section.

For comprehensive accessibility checks, it’s recommended to use this plugin alongside eslint-plugin-react-native-a11y. While eslint-plugin-triple-rn-a11y verifies the presence of essential props, eslint-plugin-react-native-a11y ensures that these props are correctly configured.

Setup

Pre-requisites

Before you start, check if your project already has ESLint installed. If you don't have ESLint installed, follow the following installation instructions.

Installation

To install the plugin, run the following command:

npm install eslint-plugin-triple-rn-a11y --save-dev
# or
yarn add eslint-plugin-triple-rn-a11y --dev

Configuration

The plugin exposes a recommended configuration that includes all the rules. To enable this configuration, add the following to your .eslint.config.mjs file:

import tripleRnA11y from "eslint-plugin-triple-rn-a11y";

export default [
  tripleRnA11y.configs.recommended,
  // Other configurations
];

Alternatively, you can enable individual rules by adding them to the rules section of your .eslintrc file:

import tripleRnA11y from "eslint-plugin-triple-rn-a11y";

export default [
  {
    plugins: {
      'triple-rn-a11y': tripleRnA11y,
    }
    rules: {
      'triple-rn-a11y/accessibility-hint': 'error',
      'triple-rn-a11y/accessibility-label': 'error',
      'triple-rn-a11y/accessibility-role': 'error',
    }
  }
]

Supported Rules

💼 Configurations enabled in.
✅ Set in the recommended configuration.

| Name                | Description | 💼 | | :------------------------------------------------------- | :------------------------------------------------------------------------ | :-- | | accessibility-hint | Enforce accessibilityHint prop is present on touchables. | ✅ | | accessibility-label | Enforce accessibilityLabel prop is present on Image components. | ✅ | | accessibility-role | Enforce accessibilityRole prop is present on all React Native components. | ✅ |

Rule Options

The following option is available for all rules:

Additional components

You can specify additional components that should be checked by the rule. For example, to check the Button component in addition to the default components, you can add the following configuration, where accessibility-hint can be replaced with the rule name:

{
  "rules": {
    "triple-rn-a11y/accessibility-hint": [
      "error",
      {
        "additionalComponents": ["Button"]
      }
    ]
  }
}