@studyflash/eslint-plugin-react-native-a11y

React Native accessibility rules for ESLint 9 and 10 (flat config). Catches the accessibility mistakes that make an app unusable with VoiceOver and TalkBack, and unaddressable by UI automation.

Install

pnpm add -D @studyflash/eslint-plugin-react-native-a11y

ESLint must already be a devDependency of your project.

Configure

// eslint.config.js
import reactNativeA11y from '@studyflash/eslint-plugin-react-native-a11y';

export default [reactNativeA11y.configs.flat.all];

Four presets live under configs.flat:

| Name | Description | | ------- | ---------------------------------------------------------------------------------- | | basic | Rules common to iOS and Android | | ios | basic plus iOS-specific rules | | android | basic plus Android-specific rules | | all | basic plus iOS-specific plus Android-specific rules |

Use all unless the project targets one platform only.

To pick rules yourself, register the plugin and enable rules by name:

// eslint.config.js
import reactNativeA11y from '@studyflash/eslint-plugin-react-native-a11y';

export default [
  {
    plugins: { 'react-native-a11y': reactNativeA11y },
    rules: {
      'react-native-a11y/icon-only-has-accessibility-label': 'error',
    },
  },
];

The legacy extends: ['plugin:react-native-a11y/all'] form still works on ESLint 8 and earlier.

Rules

Basic

• has-accessibility-hint: accessibilityHint is used together with accessibilityLabel
• has-accessibility-props: <Touchable*> has either accessibilityRole or both accessibilityTraits and accessibilityComponentType
• has-valid-accessibility-actions: accessibilityActions and onAccessibilityAction are set together and valid
• has-valid-accessibility-descriptors: <Touchable*> and <TextInput> carry a role, label, or actions
• has-valid-accessibility-role: accessibilityRole is a known value
• has-valid-accessibility-state: accessibilityState is a known value
• has-valid-accessibility-states: accessibilityStates is a known value
• has-valid-accessibility-component-type: accessibilityComponentType is a known value
• has-valid-accessibility-traits: accessibilityTraits is a known value
• has-valid-accessibility-value: accessibilityValue has the right shape
• icon-only-has-accessibility-label: a touchable that renders no text has an accessibilityLabel
• no-nested-touchables: a view with accessible={true} contains no touchables

iOS

• has-valid-accessibility-ignores-invert-colors: accessibilityIgnoresInvertColors is set on invertable components

Android

• has-valid-accessibility-live-region: accessibilityLiveRegion is a known value
• has-valid-important-for-accessibility: importantForAccessibility is a known value

Opt-in (not in any preset)

• has-test-id: touchables have a testID, for test and automation targeting

Options

Custom touchables

has-accessibility-props, has-valid-accessibility-descriptors, icon-only-has-accessibility-label and no-nested-touchables accept extra component names to treat as touchables:

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

Custom invertable components (iOS)

has-valid-accessibility-ignores-invert-colors accepts extra component names to treat like <Image>:

'react-native-a11y/has-valid-accessibility-ignores-invert-colors': ['error', { invertableComponents: ['FastImage'] }],

Text components

icon-only-has-accessibility-label accepts the component names that count as text (default Text, TextInput, Animated.Text; any name ending in Text always counts):

'react-native-a11y/icon-only-has-accessibility-label': ['error', { textComponents: ['Text', 'Typography'] }],

Development

pnpm install
pnpm test
pnpm run create my-new-rule   # scaffolds rule, test and docs

Attribution

Continues eslint-plugin-react-native-a11y by FormidableLabs, which itself started from eslint-plugin-jsx-a11y. MIT, see LICENSE.md.