Create accessibility config (#30)

* feat: create a11y config

* chore: remove unnecessary rules (rule is the default)

* chore: add type checking for test config

* feat: add a counter-example of a11y rules in example app

Author: alexisdelage

example-app/.eslintrc

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "extends": "plugin:@bam.tech/recommended",
+  "extends": ["plugin:@bam.tech/recommended", "plugin:@bam.tech/a11y"],
   "overrides": [
     {
       "files": ["*.test.tsx"],

example-app/.nvmrc

@@ -0,0 +1 @@
+18

example-app/eslint-breaking-examples/break-react-native-a11y.tsx

@@ -0,0 +1,15 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger one error breaking eslint-plugin-react-native:
+// react-native-a11y/has-valid-accessibility-descriptors
+
+import { Pressable, Text } from "react-native";
+
+export const MyCustomButton = () => {
+  return (
+    <Pressable>
+      <Text>Click here!</Text>
+      <Text>Here is a short summary</Text>
+    </Pressable>
+  );
+};

example-app/package.json

@@ -6,29 +6,31 @@
   "scripts": {
     "start": "node .",
     "lint": "eslint .",
-    "types":"tsc --noEmit"
+    "types": "tsc --noEmit"
   },
   "devDependencies": {
+    "@bam.tech/eslint-plugin": "*",
+    "@bam.tech/typescript-config": "*",
     "@types/jest": "^29.5.2",
     "@types/react": "^18.2.14",
-    "@bam.tech/typescript-config": "*",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "eslint": "^8.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "eslint": "^8.44.0",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
+    "eslint-plugin-react-native-a11y": "^3.3.0",
     "eslint-plugin-testing-library": "^5.11.0",
     "jest": "^29.5.0",
     "prettier": "^2.8.8",
     "typescript": "^4.9.4"
   },
   "private": "true",
   "dependencies": {
+    "expo": "^47.0.13",
     "react": "^18.2.0",
-    "react-native": "^0.72.0",
-    "expo": "^47.0.13"
+    "react-native": "^0.72.0"
   }
 }

packages/eslint-plugin/README.md

@@ -7,8 +7,8 @@ This project is an ESLint plugin that gathers all the rules, plugins and parsers
 Install the plugin and its peer dependencies:
 
 ```bash
-yarn add --dev @bam.tech/eslint-plugin
-npx install-peerdeps --dev @bam.tech/eslint-plugin
+yarn add @bam.tech/eslint-plugin --dev
+npx install-peerdeps @bam.tech/eslint-plugin --dev --yarn
 ```
 
 Then update your `.eslintrc` config file:
@@ -30,10 +30,11 @@ Then update your `.eslintrc` config file:
 
 This plugin exports multiple configurations that can be used in your `.eslintrc` config file:
 
-| Name                    | Description                                                                                                                          |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `@bam.tech/recommended` | The recommended config for all projects                                                                                              |
-| `@bam.tech/tests`       | The recommended config for test files. By default this applies to every file: put it in an `overrides` to filter on your test files. |
+| Name                    | Description                                                                                                                                                  |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `@bam.tech/recommended` | The recommended config for all projects                                                                                                                      |
+| `@bam.tech/tests`       | The recommended config for test files. By default this applies to every file: put it in an `overrides` to filter on your test files.                         |
+| `@bam.tech/a11y`        | [beta] Eslint config to check for accessibility. Still in beta to not break existing projects, but will be merged into the recommended config in the future. |
 
 These configs need some peer dependencies. You can list them with:
 

packages/eslint-plugin/lib/configs/a11y.js

@@ -0,0 +1,11 @@
+// @ts-check
+"use strict";
+
+const { defineConfig } = require("eslint-define-config");
+
+module.exports = defineConfig({
+  extends: ["plugin:react-native-a11y/all"],
+  rules: {
+    "react-native-a11y/has-accessibility-hint": "off",
+  },
+});

packages/eslint-plugin/lib/configs/recommended.js

@@ -33,7 +33,6 @@ module.exports = defineConfig({
     "@typescript-eslint/no-unused-vars": "error",
     "no-console": ["error", { allow: ["warn", "error"] }],
     "no-return-await": "error",
-    "prettier/prettier": ["error", { printWidth: 80 }],
     "react-hooks/exhaustive-deps": "error",
     "react-native/no-color-literals": "off",
     "react-native/no-raw-text": ["error", { skip: ["Trans"] }],

packages/eslint-plugin/lib/configs/tests.js

@@ -1,3 +1,6 @@
+// @ts-check
+"use strict";
+
 const { defineConfig } = require("eslint-define-config");
 
 module.exports = defineConfig({

packages/eslint-plugin/package.json

@@ -32,6 +32,7 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
+    "eslint-plugin-react-native-a11y": "^3.3.0",
     "eslint-plugin-testing-library": "^5.11.0",
     "prettier": "^2.8.8"
   },