{"id":24295293,"url":"https://github.com/formidablelabs/eslint-plugin-react-native-a11y","last_synced_at":"2025-04-13T11:38:34.531Z","repository":{"id":32718422,"uuid":"139589777","full_name":"FormidableLabs/eslint-plugin-react-native-a11y","owner":"FormidableLabs","description":"React Native specific accessibility linting rules.","archived":false,"fork":false,"pushed_at":"2024-11-04T13:43:26.000Z","size":1818,"stargazers_count":293,"open_issues_count":11,"forks_count":25,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-04-06T07:37:56.194Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-03T13:45:20.000Z","updated_at":"2025-03-31T18:47:17.000Z","dependencies_parsed_at":"2024-01-16T04:32:00.602Z","dependency_job_id":"24308b45-6d81-45be-a73f-39e6a4636da8","html_url":"https://github.com/FormidableLabs/eslint-plugin-react-native-a11y","commit_stats":{"total_commits":103,"total_committers":20,"mean_commits":5.15,"dds":"0.49514563106796117","last_synced_commit":"2a552e802047f9dbbcb41940a8848d55fefca4e0"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Feslint-plugin-react-native-a11y","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Feslint-plugin-react-native-a11y/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Feslint-plugin-react-native-a11y/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Feslint-plugin-react-native-a11y/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/eslint-plugin-react-native-a11y/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248708618,"owners_count":21149028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-16T18:40:04.166Z","updated_at":"2025-04-13T11:38:34.508Z","avatar_url":"https://github.com/FormidableLabs.png","language":"JavaScript","readme":"[![Eslint-plugin-react-native-a11y — Formidable, We build the modern web](https://oss.nearform.com/api/banner?text=eslint-plugin-native-a11y\u0026bg=c99f46)](https://commerce.nearform.com/open-source/)\n\n\n[![Maintenance Status][maintenance-image]](#maintenance-status)\n\nEslint-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.\n\n## Setup\n\n### Pre-Requisites\n\nBefore starting, check you already have ESLint as a `devDependency` of your project.\n\n\u003e Projects created using `react-native init` will already have this, but for Expo depending on your template you may need to follow ESLint's [installation instructions](https://eslint.org/docs/user-guide/getting-started#installation-and-usage).\n\n### Installation\n\nNext, install `eslint-plugin-react-native-a11y`:\n\n```sh\nnpm install eslint-plugin-react-native-a11y --save-dev\n\n# or\n\nyarn add eslint-plugin-react-native-a11y --dev\n```\n\n**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.\n\n## Configuration\n\nThis plugin exposes four recommended configs.\n\n| Name    | Description                                                                        |\n| ------- | ---------------------------------------------------------------------------------- |\n| basic   | Only use basic validation rules common to both iOS \u0026 Android                       |\n| ios     | Use all rules from \"basic\", plus iOS-specific extras                               |\n| android | Use all rules from \"basic\", plus Android-specific extras                           |\n| all     | Use all rules from \"basic\", plus iOS-specific extras, plus Android-specific extras |\n\nIf 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.\n\n\u003e If you are unsure which one to use, in most cases `all` can be safely used.\n\nAdd 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:\n\n```js\n// .eslintrc.js\n\nmodule.exports = {\n  root: true,\n  extends: ['@react-native-community', 'plugin:react-native-a11y/ios'],\n};\n```\n\nAlternatively 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.\n\n```js\n// .eslintrc.js\n\nmodule.exports = {\n  root: true,\n  extends: ['@react-native-community'],\n  rules: {\n    'react-native-a11y/rule-name': 2,\n  },\n};\n```\n\nFor more information on configuring behaviour of an individual rule, please refer to the [ESLint docs](react-native-a11y/rule-name)\n\n## Supported Rules\n\n### Basic\n\n- [has-accessibility-hint](docs/rules/has-accessibility-hint.md): Enforce `accessibilityHint` is used in conjunction with `accessibilityLabel`\n- [has-accessibility-props](docs/rules/has-accessibility-props.md): Enforce that `\u003cTouchable\\*\u003e` components only have either the `accessibilityRole` prop or both `accessibilityTraits` and `accessibilityComponentType` props set\n- [has-valid-accessibility-actions](docs/rules/has-valid-accessibility-actions.md): Enforce both `accessibilityActions` and `onAccessibilityAction` props are valid\n- [has-valid-accessibility-role](docs/rules/has-valid-accessibility-role.md): Enforce `accessibilityRole` property value is valid\n- [has-valid-accessibility-state](docs/rules/has-valid-accessibility-state.md): Enforce `accessibilityState` property value is valid\n- [has-valid-accessibility-states](docs/rules/has-valid-accessibility-states.md): Enforce `accessibilityStates` property value is valid\n- [has-valid-accessibility-component-type](docs/rules/has-valid-accessibility-component-type.md): Enforce `accessibilityComponentType` property value is valid\n- [has-valid-accessibility-traits](docs/rules/has-valid-accessibility-traits.md): Enforce `accessibilityTraits` and `accessibilityComponentType` prop values must be valid\n- [has-valid-accessibility-value](docs/rules/has-valid-accessibility-value.md): Enforce `accessibilityValue` property value is valid\n- [no-nested-touchables](docs/rules/no-nested-touchables.md): Enforce if a view has `accessible={true}`, that there are no touchable elements inside\n- [has-valid-accessibility-descriptors](docs/rules/has-valid-accessibility-descriptors.md): Ensures that Touchable* components have appropriate props to communicate with assistive technologies\n\n### iOS\n\n- [has-valid-accessibility-ignores-invert-colors](docs/rules/has-valid-accessibility-ignores-invert-colors.md): Enforce that certain elements use `accessibilityIgnoresInvertColors` to avoid being inverted by device color settings.\n\n### Android\n\n- [has-valid-accessibility-live-region](docs/rules/has-valid-accessibility-live-region.md): Enforce `accessibilityLiveRegion` prop values must be valid\n- [has-valid-important-for-accessibility](docs/rules/has-valid-important-for-accessibility.md): Enforce `importantForAccessibility` property value is valid\n\n### Rule Options\n\nThe following options are available to customize the recommended rule set.\n\n#### Custom Touchables\n\n`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.\n\n```js\n\"react-native-a11y/has-accessibility-props\": [\n  \"error\",\n  {\n    \"touchables\": [\"TouchableCustom\"]\n  }\n]\n```\n\n#### Custom Invertable Components (iOS)\n\n`react-native-a11y/has-valid-accessibility-ignores-invert-colors` allows you to optionally define an Array of component names to check in addition to `\u003cImage /\u003e`.\n\nFor more information, see the [rule docs](docs/has-valid-accessibility-ignores-invert-colors.md#rule-details).\n\n```js\n\"react-native-a11y/has-valid-accessibility-ignores-invert-colors\": [\n  \"error\",\n  {\n    \"invertableComponents\": [\n      \"FastImage\",\n    ]\n  }\n]\n```\n\n## Creating a new rule\n\nIf you are developing new rules for this project, you can use the `create-rule`\nscript to scaffold the new files.\n\n```\n$ ./scripts/create-rule.js my-new-rule\n```\n\n## Attribution\n\nThis project started as a fork of [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) and a lot of the work was carried out by its [contributors](https://github.com/evcohen/eslint-plugin-jsx-a11y/graphs/contributors), to whom we owe a lot!\n\n## License\n\neslint-plugin-react-native-a11y is licensed under the [MIT License](LICENSE.md).\n\n### Maintenance Status\n\n**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.\n\n[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Feslint-plugin-react-native-a11y","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformidablelabs%2Feslint-plugin-react-native-a11y","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Feslint-plugin-react-native-a11y/lists"}