Rules: add pressable-has-accessibility-role

[forxtu]

This rule aims to improve accessibility enforcing developers to add explicit accessibilityRole attribute to the pressable* elements.

By pressable element we mean an element that has "onPress" attribute.*

Use case

As a developer I want to provide the best a11y for users, all pressable elements should have accessibilityRole attribute.

Proposal

Adds the pressable-has-accessibility-role rule to the plugin to check if pressable elements have accessibilityRole attribute or not. If an element doesn't have an onPress attribute linter will not check this element.

References

• React Native Docs - accessibilityRole

Let me know your thoughts, thanks 🙂

[abhayarawal]

looks good, nice work!

[jpdriver]

hey @forxtu -- first off thank you for all your work and for opening this PR. to be honest... i'm not sure this is quite the right approach though 😬

as far as i know requiring accessibilityRole whenever you have an onPress isn't always a hard and fast rule.

for instance, here are some code samples from RN Tester:

<TouchableOpacity
  accessible={true}
  onPress={() => {
    ...
  }}
  accessibilityLabel="element 19"
  accessibilityState={{
    ...
  }}
  accessibilityHint={accessibilityHint}>
    <Text style={{color: 'white'}}>
      {`Selectable TouchableOpacity Example ${touchableHint}`}
    </Text>
</TouchableOpacity>

• from AccessibilityExample.js

<Button
  accessible={true}
  accessibilityActions={[
    ...
  ]}
  onAccessibilityAction={event => {
    ...
  }}
  onPress={() => Alert.alert('Button has been pressed!')}
  title="Button with accessiblity action"
/>

• also from AccessibilityExample.js

I think whether or not you should include accessibilityRole depends on which other Props your element includes.

E.g. in some scenarios where you have both accessibilityLabel and accessibilityHint (alongside an onPress), those are enough to sufficiently describe the purpose of an element to assistive technologies without need to explicitly set an accessibilityRole..

That's at least my current understanding 😅

Perhaps a better direction for this rule might be ensuring you have either:-

• accessibilityRole or
• accessibilityLabel + accessibilityHint or
• accessibilityActions + onAccessibilityAction

when you have an onPress?

What do you think?