Feat/rule do not use role on image (#32)

* chore: remove console.log

* feat: add role do-not-use-role-on-image

* docs: update docs for rule do-not-use-role-on-image

* feat: replace 'img' value to 'image' in fixing method

* docs: add example in example-app

* chore: add no-console rule in eslint-plugin package

Author: P0labrD

example-app/.eslintrc

@@ -9,6 +9,7 @@
   ],
   "rules": {
     "@bam.tech/require-named-effect": "error",
-    "@bam.tech/image-requires-accessible-prop": "error"
+    "@bam.tech/image-requires-accessible-prop": "error",
+    "@bam.tech/do-not-use-role-on-image": "error"
   }
 }

example-app/eslint-breaking-examples/break-do-not-use-role-on-image.tsx

@@ -0,0 +1,26 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger an error breaking eslint-plugin-bam-custom-rules:
+// bam-custom-rules/do-not-use-role-on-image
+
+import { Image } from "react-native";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <Image
+        source={{ uri: "" }}
+        accessibilityIgnoresInvertColors
+        accessible
+        role="button"
+      />
+      <Image
+        source={{ uri: "" }}
+        accessibilityIgnoresInvertColors
+        accessible
+        role="img"
+      />
+    </>
+  );
+};
+

packages/eslint-plugin/.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
           "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/{{name}}.md",
       },
     ],
+    "no-console": ["error", { allow: ["warn", "error"] }],
   },
   env: {
     node: true,

packages/eslint-plugin/README.md

@@ -59,6 +59,7 @@ This plugin exports some custom rules that you can optionally use in your projec
 
 | Name                                                                           | Description                                            | 🔧  | 💡  |
 | :----------------------------------------------------------------------------- | :----------------------------------------------------- | :-- | :-- |
+| [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 |     |     |
 
@@ -72,7 +73,8 @@ To use a rule, just declare it in your `.eslintrc`:
   "plugins": ["@bam.tech"],
   "rules": {
     "@bam.tech/require-named-effect": "error",
-    "@bam.tech/image-requires-accessible-prop": "error"
+    "@bam.tech/image-requires-accessible-prop": "error",
+    "@bam.tech/do-not-use-role-on-image": "error"
   }
 }
 ```

packages/eslint-plugin/docs/rules/do-not-use-role-on-image.md

@@ -0,0 +1,21 @@
+# Disallow role prop on Image component (`@bam.tech/do-not-use-role-on-image`)
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
+Enforces the use of `accessibilityRole` instead of `role` on an image component.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Image source={{ uri: "" }} role="button" />
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<Image source={{ uri: "" }} accessibilityRole="button" />
+```

packages/eslint-plugin/lib/rules/do-not-use-role-on-image.js

@@ -0,0 +1,56 @@
+/**
+ * @fileoverview role prop does not work on react-native Image component
+ * @author Paul Briand
+ */
+"use strict";
+
+const isImage = require("../utils/isImage");
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: "problem", // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: "Disallow role prop on Image component",
+      recommended: false,
+      url: "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/do-not-use-role-on-image.md", // URL to the documentation page for this rule
+    },
+    fixable: "code", // Or `code` or `whitespace`
+    schema: [], // Add a schema if the rule has options
+    messages: {
+      doNotUseRoleOnImage:
+        "Use 'accessibilityRole' instead of 'role' on Image component",
+    },
+  },
+
+  create(context) {
+    return {
+      JSXAttribute: (node) => {
+        if (node.name.name === "role" && isImage(node.parent))
+          context.report({
+            node,
+            messageId: "doNotUseRoleOnImage",
+            fix: (fixer) => {
+              const roleFixer = fixer.replaceTextRange(
+                [node.range[0], node.range[0] + 4],
+                "accessibilityRole"
+              );
+              if (node.value.type === "Literal" && node.value.value === "img")
+                return [
+                  roleFixer,
+                  fixer.replaceTextRange(
+                    [node.range[1] - 4, node.range[1] - 1],
+                    "image"
+                  ),
+                ];
+              return roleFixer;
+            },
+          });
+      },
+    };
+  },
+};

packages/eslint-plugin/lib/rules/image-requires-accessible-prop.js

@@ -29,7 +29,6 @@ module.exports = {
   create(context) {
     return {
       JSXOpeningElement: (node) => {
-        console.log(node);
         if (
           isImage(node) &&
           !node.attributes.some((attr) => attr.name.name === "accessible")

packages/eslint-plugin/tests/lib/rules/do-not-use-role-on-image.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview role prop does not work on react-native Image component
+ * @author Paul Briand
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/do-not-use-role-on-image"),
+  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 = [`<Image source={{uri:""}} accessibilityRole='button' />`];
+
+const invalid = [
+  {
+    code: `<Image source={{uri:""}} role='button' />`,
+    errors: ["Use 'accessibilityRole' instead of 'role' on Image component"],
+    output: `<Image source={{uri:""}} accessibilityRole='button' />`,
+  },
+  {
+    code: `<Image source={{uri:""}} role='img' />`,
+    errors: ["Use 'accessibilityRole' instead of 'role' on Image component"],
+    output: `<Image source={{uri:""}} accessibilityRole='image' />`,
+  },
+];
+ruleTester.run("image-requires-accessible-prop", rule, {
+  valid,
+  invalid,
+});