add has-valid-accessibility-descriptors (#128)

Author: jpdriver

README.md

@@ -85,6 +85,7 @@ For more information on configuring behaviour of an individual rule, please refe
 - [has-valid-accessibility-traits](docs/rules/has-valid-accessibility-traits.md): Enforce `accessibilityTraits` and `accessibilityComponentType` prop values must be valid
 - [has-valid-accessibility-value](docs/rules/has-valid-accessibility-value.md): Enforce `accessibilityValue` property value is valid
 - [no-nested-touchables](docs/rules/no-nested-touchables.md): Enforce if a view has `accessible={true}`, that there are no touchable elements inside
+- [has-valid-accessibility-descriptors](docs/rules/has-valid-accessibility-descriptors.md): Ensures that Touchable* components have appropriate props to communicate with assistive technologies
 
 ### iOS
 - [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.

__tests__/src/rules/has-valid-accessibility-descriptors-test.js

@@ -0,0 +1,83 @@
+/* eslint-env jest */
+/**
+ * @fileoverview Ensures that Touchable* components have appropriate props to communicate with assistive technologies
+ * @author JP Driver
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import rule from '../../../src/rules/has-valid-accessibility-descriptors';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message:
+    'Missing a11y props. Expected one of: accessibilityRole OR BOTH accessibilityLabel + accessibilityHint OR BOTH accessibilityActions + onAccessibilityAction',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('has-valid-accessibility-descriptors', rule, {
+  valid: [
+    {
+      code: '<View></View>;',
+    },
+    {
+      code: `<Pressable accessibilityRole="button">
+              <Text>Back</Text>
+             </Pressable>`,
+    },
+    {
+      code: `<TouchableOpacity
+              accessibilityLabel="Accessibility label."
+              accessibilityHint="Accessibility hint.">
+              <Text>Back</Text>
+             </TouchableOpacity>`,
+    },
+    {
+      code: `<TouchableOpacity
+              accessibilityActions={[
+                {name: 'cut', label: 'cut'},
+                {name: 'copy', label: 'copy'},
+                {name: 'paste', label: 'paste'},
+              ]}
+              onAccessibilityAction={(event) => {
+                switch (event.nativeEvent.actionName) {
+                  case 'cut':
+                    Alert.alert('Alert', 'cut action success');
+                    break;
+                  case 'copy':
+                    Alert.alert('Alert', 'copy action success');
+                    break;
+                  case 'paste':
+                    Alert.alert('Alert', 'paste action success');
+                    break;
+                }
+              }}
+            />`,
+    },
+    {
+      code: `<TextInput accessibilityLabel="Accessibility label." />`,
+      errors: [expectedError],
+    },
+  ].map(parserOptionsMapper),
+  invalid: [
+    {
+      code: `<TouchableOpacity>
+              <Text>Back</Text>
+             </TouchableOpacity>`,
+      errors: [expectedError],
+    },
+    {
+      code: `<TextInput />`,
+      errors: [expectedError],
+    },
+  ].map(parserOptionsMapper),
+});

docs/rules/has-valid-accessibility-descriptors.md

@@ -0,0 +1,29 @@
+# has-valid-accessibility-descriptors
+
+Ensures that Touchable* components have appropriate props to communicate with assistive technologies.
+
+The rule will trigger when a Touchable* component does not have **any** of the following props:-
+
+- `accessibiltyRole`
+- `accessibilityLabel`
+- `accessibilityActions`
+
+In some cases, fixing this may then trigger other rules for related props (e.g. if you add `accessibilityActions` to fix this but are missing `onAccessibilityAction`)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<Pressable accessibilityRole="button">
+  <Text>Back</Text>
+</Pressable>
+```
+
+### Fail
+```jsx
+<Pressable>
+  <Text>Back</Text>
+</Pressable>
+```

src/index.js

@@ -14,6 +14,7 @@ const basicRules = {
   'react-native-a11y/has-accessibility-props': 'error',
   'react-native-a11y/has-valid-accessibility-actions': 'error',
   'react-native-a11y/has-valid-accessibility-component-type': 'error',
+  'react-native-a11y/has-valid-accessibility-descriptors': 'error',
   'react-native-a11y/has-valid-accessibility-role': 'error',
   'react-native-a11y/has-valid-accessibility-state': 'error',
   'react-native-a11y/has-valid-accessibility-states': 'error',
@@ -37,6 +38,7 @@ module.exports = {
     'has-accessibility-props': require('./rules/has-accessibility-props'),
     'has-valid-accessibility-actions': require('./rules/has-valid-accessibility-actions'),
     'has-valid-accessibility-component-type': require('./rules/has-valid-accessibility-component-type'),
+    'has-valid-accessibility-descriptors': require('./rules/has-valid-accessibility-descriptors'),
     'has-valid-accessibility-ignores-invert-colors': require('./rules/has-valid-accessibility-ignores-invert-colors'),
     'has-valid-accessibility-live-region': require('./rules/has-valid-accessibility-live-region'),
     'has-valid-accessibility-role': require('./rules/has-valid-accessibility-role'),

src/rules/has-valid-accessibility-descriptors.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Ensures that Touchable* components have appropriate props to communicate with assistive technologies
+ * @author JP Driver
+ * @flow
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import type { JSXOpeningElement } from 'ast-types-flow';
+import { elementType, hasAnyProp } from 'jsx-ast-utils';
+import type { ESLintContext } from '../../flow/eslint';
+import isTouchable from '../util/isTouchable';
+import { generateObjSchema } from '../util/schemas';
+
+const errorMessage =
+  'Missing a11y props. Expected one of: accessibilityRole OR BOTH accessibilityLabel + accessibilityHint OR BOTH accessibilityActions + onAccessibilityAction';
+
+const schema = generateObjSchema();
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: (context: ESLintContext) => ({
+    JSXOpeningElement: (node: JSXOpeningElement) => {
+      if (isTouchable(node, context) || elementType(node) === 'TextInput') {
+        if (
+          !hasAnyProp(node.attributes, [
+            'accessibilityRole',
+            'accessibilityLabel',
+            'accessibilityActions',
+          ])
+        ) {
+          context.report({
+            node,
+            message: errorMessage,
+          });
+        }
+      }
+    },
+  }),
+};