Feat/rule requires accessibility label (#35)

* feat: add rule requires-accessibility-label

* feat: add breaking example

* docs: update README and add specific docs

* feat: add suggestion for auto-fix

* fix: fix linting in plugin

* refactor: use hasLabelProp

* fix: rewrite hasOneLabeledChild

Author: P0labrD

example-app/.eslintrc

@@ -12,6 +12,7 @@
     "@bam.tech/image-requires-accessible-prop": "error",
     "@bam.tech/do-not-use-role-on-image": "error",
     "@bam.tech/accessibility-props-require-accessible": "error",
-    "@bam.tech/requires-accessibility-role-when-accessible": "error"
+    "@bam.tech/requires-accessibility-role-when-accessible": "error",
+    "@bam.tech/requires-accessibility-label": "error"
   }
 }

example-app/eslint-breaking-examples/break-accessible-requires-accessibilityLabel.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable react-native-a11y/has-valid-accessibility-ignores-invert-colors */
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger an error breaking eslint-plugin-bam-custom-rules:
+// bam-custom-rules/requires-accessibility-label
+
+import { Text, View } from "react-native";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <View accessible />
+      <View accessible>
+        <View accessibilityLabel="" />
+        <Text>this is a text</Text>
+      </View>
+    </>
+  );
+};

packages/eslint-plugin/README.md

@@ -63,6 +63,7 @@ This plugin exports some custom rules that you can optionally use in your projec
 | [do-not-use-role-on-image](docs/rules/do-not-use-role-on-image.md)                                       | Disallow role prop on Image component                           | 🔧  |     |
 | [image-requires-accessible-prop](docs/rules/image-requires-accessible-prop.md)                           | Require accessible prop on image components                     | 🔧  | 💡  |
 | [require-named-effect](docs/rules/require-named-effect.md)                                               | Enforces the use of named functions inside a useEffect          |     |     |
+| [requires-accessibility-label](docs/rules/requires-accessibility-label.md)                               | Enforces label when component accessible                        |     | 💡  |
 | [requires-accessibility-role-when-accessible](docs/rules/requires-accessibility-role-when-accessible.md) | Enforces accessibilityRole or role when component is accessible |     | 💡  |
 
 <!-- end auto-generated rules list -->
@@ -78,7 +79,8 @@ To use a rule, just declare it in your `.eslintrc`:
     "@bam.tech/image-requires-accessible-prop": "error",
     "@bam.tech/do-not-use-role-on-image": "error",
     "@bam.tech/accessibility-props-require-accessible": "error",
-    "@bam.tech/requires-accessibility-role-when-accessible": "error"
+    "@bam.tech/requires-accessibility-role-when-accessible": "error",
+    "@bam.tech/requires-accessibility-label": "error"
   }
 }
 ```

packages/eslint-plugin/docs/rules/requires-accessibility-label.md

@@ -0,0 +1,36 @@
+# Enforces label when component accessible (`@bam.tech/requires-accessibility-label`)
+
+💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+<!-- end auto-generated rule header -->
+
+Please describe the origin of the rule here.
+
+## Rule Details
+
+This rule aims to...
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<View accessible />
+```
+
+```jsx
+<View accessible>
+  <Text>foo</Text>
+  <View accessible accessibilityLabel="foo" />
+</View>
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<View accessible accessibilityLabel="foo" />
+```
+
+```jsx
+<View accessible>
+  <Text>foo</Text>
+</View>
+```

packages/eslint-plugin/lib/rules/requires-accessibility-label.js

@@ -0,0 +1,79 @@
+/**
+ * @fileoverview Enforces label when component accessible
+ * @author Paul Briand
+ */
+"use strict";
+
+const hasLabelProp = require("../utils/hasLabelProp");
+const isAccessible = require("../utils/isAccessible");
+const isText = require("../utils/isText");
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    hasSuggestions: true,
+    type: "problem", // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: "Enforces label when component accessible",
+      recommended: false,
+      url: "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/requires-accessibility-label.md", // URL to the documentation page for this rule
+    },
+    fixable: null, // Or `code` or `whitespace`
+    schema: [], // Add a schema if the rule has options
+    messages: {
+      requiresAccessibilityLabel: "Requires accessibilityLabel",
+      suggestAddingAccessibilityLabel: "Add accessibilityLabel",
+    },
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (isAccessible(node) && !isText(node)) {
+          if (!hasLabelProp(node) && !hasOneLabeledChild(node.parent)) {
+            context.report({
+              node,
+              messageId: "requiresAccessibilityLabel",
+              suggest: [
+                {
+                  messageId: "suggestAddingAccessibilityLabel",
+                  fix: (fixer) => {
+                    const openingTagEnd = node.range[1];
+                    return fixer.insertTextBeforeRange(
+                      [
+                        openingTagEnd - (node.selfClosing ? 2 : 1),
+                        openingTagEnd,
+                      ],
+                      ` accessibilityLabel=""`
+                    );
+                  },
+                },
+              ],
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+const hasOneLabeledChild = (node) => {
+  if (node.type === "JSXElement") {
+    const JSXChildren = node.children.filter(
+      (child) => child.type === "JSXElement"
+    );
+    if (JSXChildren.length === 1) {
+      return (
+        isLabeledComponent(JSXChildren[0].openingElement) ||
+        hasOneLabeledChild(JSXChildren[0])
+      );
+    }
+  }
+};
+
+const isLabeledComponent = (element) =>
+  isText(element) || hasLabelProp(element);

packages/eslint-plugin/lib/utils/hasLabelProp.js

@@ -0,0 +1,13 @@
+module.exports = (element) => {
+  if (element.type === "JSXOpeningElement") {
+    return element.attributes.some((attribute) => {
+      return (
+        attribute.type === "JSXAttribute" &&
+        ["accessibilityLabel", "aria-label", "alt"].includes(
+          attribute.name.name
+        )
+      );
+    });
+  }
+  return false;
+};

packages/eslint-plugin/tests/lib/rules/requires-accessibility-label.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Enforces label when component accessible
+ * @author Paul Briand
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/requires-accessibility-label"),
+  RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve("@typescript-eslint/parser"),
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+const valid = [
+  `<View accessible accessibilityLabel="foo" />`,
+  `<View accessible>
+    <Text>foo</Text>
+  </View>`,
+];
+
+ruleTester.run("requires-accessibility-label", rule, {
+  valid,
+
+  invalid: [
+    {
+      code: `<View accessible />`,
+      errors: ["Requires accessibilityLabel"],
+    },
+    {
+      code: `<View accessible>
+    <Text>foo</Text>
+    <View accessible accessibilityLabel="foo" />
+  </View>`,
+      errors: ["Requires accessibilityLabel"],
+    },
+  ],
+});