has-valid-accessibility-actions.md

has-valid-accessibility-actions

Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:

• Define the list of actions it supports via the accessibilityActions property.
• Implement an onAccessibilityAction function to handle action requests.

acccessibilityActions is an Array containing a list of action objects.

There are two types of actions: Standard Actions, and Custom Actions.

Depending on the action type, the action should contain the following fields:-

NAME	TYPE	REQUIRED
name	string	Yes
label	string	Only required for Custom actions

Standard Actions

Standard Actions must have a name field matching one of:-

NAME	PLATFORM SUPPORT
"magicTap"	iOS only
"escape"	iOS only
"activate"	both iOS & Android
"increment"	both iOS & Android
"decrement"	both iOS & Android
"longpress"	Android only

Providing a label for a Standard Action is optional.

accessibilityActions={[
  {name:'magicTap'}
]}

Custom Actions

Custom Actions can have any name, but must also include a label.

accessibilityActions={[
  {name: 'cut', label: 'cut'}
]}

onAccessibilityAction is a function.

The only argument to this function is an event containing the name of the action to perform.

e.g.

<View
  accessible={true}
  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;
    }
  }}
/>

References

1. React Native Docs - Accessibility Actions

Rule details

This rule takes no arguments.

Succeed

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
    {name: 'copy', label: 'copy'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
    }
  }}
/>

<View
  accessibilityActions={[
    {name: 'magicTap'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'magicTap':
        Alert.alert('Alert', 'magicTap action success');
        break;
    }
  }}
/>

Fail

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
  ]}
/>

// no onAccessibilityAction prop

<View
  accessibilityActions={[
    {name: 'cut'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
    }
  }}
/>

// custom action "cut" missing label