Rules: add pressable-has-accessibility-role

__tests__/src/rules/pressable-has-accessibility-role-test.js

@@ -0,0 +1,45 @@
+/**
+ * @fileoverview Forbid "pressable" element without an explicit "accessibilityRole" attribute rule.
+ * @author forxtu
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import rule from '../../../src/rules/pressable-has-accessibility-role';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message:
+    'Missing an explicit "accessibilityRole" attribute for pressable element',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('pressable-has-accessibility-role', rule, {
+  valid: [
+    {
+      code: `<Pressable onPress={() => {}} accessibilityRole="button"></Pressable>`,
+    },
+    {
+      code: `<Text onPress={() => {}} accessibilityRole="link"></Text>`,
+    },
+  ].map(parserOptionsMapper),
+  invalid: [
+    {
+      code: `<Pressable onPress={() => {}}></Pressable>`,
+      errors: [expectedError],
+    },
+    {
+      code: `<Text onPress={() => {}}></Text>`,
+      errors: [expectedError],
+    },
+  ].map(parserOptionsMapper),
+});

docs/rules/pressable-has-accessibility-role.md

@@ -0,0 +1,33 @@
+# pressable-has-accessibility-role
+
+Forbid "pressable" element without an explicit "accessibilityRole" attribute. By pressable element we mean an element that has "onPress" attribute.
+
+### References
+
+1. [React Native Docs - accessibilityRole](https://reactnative.dev/docs/accessibility)
+
+## Rule Details
+
+This rule aims to improve accessibility enforcing developers to add explicit "accessibilityRole" attribute to the pressable elements.
+
+### Options
+
+- "off" or 0 - turn the rule off
+- "warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
+- "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
+
+### Succeed
+
+```js
+<Pressable onPress={() => {}} accessibilityRole="button"></Pressable>
+```
+
+### Fail
+
+```js
+<Pressable onPress={() => {}}></Pressable>
+```
+
+## When Not To Use It
+
+If you don't need additional accessibility for pressable elements.

src/index.js

@@ -20,6 +20,7 @@ const basicRules = {
   'react-native-a11y/has-valid-accessibility-traits': 'error',
   'react-native-a11y/has-valid-accessibility-value': 'error',
   'react-native-a11y/no-nested-touchables': 'error',
+  'react-native-a11y/pressable-has-accessibility-role': 'error',
 };
 
 const iOSRules = {
@@ -46,6 +47,7 @@ module.exports = {
     'has-valid-accessibility-value': require('./rules/has-valid-accessibility-value'),
     'has-valid-important-for-accessibility': require('./rules/has-valid-important-for-accessibility'),
     'no-nested-touchables': require('./rules/no-nested-touchables'),
+    'pressable-has-accessibility-role': require('./rules/pressable-has-accessibility-role'),
   },
   configs: {
     basic: {

src/rules/pressable-has-accessibility-role.js

@@ -0,0 +1,54 @@
+/**
+ * @fileoverview Forbid "pressable" element without an explicit "accessibilityRole" attribute.
+ * @author forxtu
+ * @flow
+ */
+
+import { hasProp } from 'jsx-ast-utils';
+
+// Utils
+import { generateObjSchema } from '../util/schemas';
+
+// Types
+import type { JSXOpeningElement } from 'ast-types-flow';
+import type { ESLintContext } from '../../flow/eslint';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+const errorMessage =
+  'Missing an explicit "accessibilityRole" attribute for pressable element';
+
+const schema = generateObjSchema();
+
+module.exports = {
+  meta: {
+    docs: {
+      description:
+        'Forbid "pressable" element without an explicit "accessibilityRole" attribute',
+      category: 'Possible Errors',
+      recommended: true,
+      url:
+        'https://github.com/FormidableLabs/eslint-plugin-react-native-a11y/tree/master/docs/rules/pressable-has-accessibility-role.md',
+    },
+    fixable: null,
+    schema: [schema],
+  },
+  create: (context: ESLintContext) => ({
+    JSXOpeningElement: (node: JSXOpeningElement) => {
+      const hasOnPressAttr = hasProp(node.attributes, 'onPress');
+      const hasAccessibilityRoleAttr = hasProp(
+        node.attributes,
+        'accessibilityRole'
+      );
+
+      if (hasOnPressAttr && !hasAccessibilityRoleAttr) {
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      }
+    },
+  }),
+};