react-native-accessibility-actions v0.0.1

react-native-accessibility-actions

Simplify handling accessibility actions in React Native apps.

• useAccessibilityActions
• withAccessibilityActions

useAccessibilityActions

Helper hook to provide both onAccessibilityAction and accessibilityActions to an element.

const { accessibilityActions, onAccessibilityAction } = useAccessibilityActions(getAccessibiltyActions, deps)

Parameters

1. getAccessibiltyActions
   • callback returning AccessibilityActions
2. deps
   • array of dependencies
   • to make use of ESlint react-hooks/exhaustive-deps rule add useAccessibilityActions as it's additionalHooks

     'react-hooks/exhaustive-deps': [
         'error',
         {
             additionalHooks: '(useAccessibilityActions)',
         },
     ],

Return value

• accessibilityActions
• onAccessibilityAction

• a11name - any action name that would be handled internally in onAccessibilityAction - might be one of the system action or any custom name
• label - Action label to be read / provided via actions list
• onAction - action to be performed

Types

AccessibilityActions

Object, where key is the action name and value is AccessibilityAction

• action name - can be one of standard action name or any custom one, must be unique

AccessibilityAction

Example

Standard way

<View
  accessible
  accessibilityActions={(() => {
    const result = [
      { name: 'increaseValue', label: 'Decrease value' },
      { name: 'more_info', label: 'More Info' },
      { name: 'get_directions', label: 'Get Directions' },
    ];
    if (value > 0) result.push({ name: 'decreaseValue', label: 'Decrease value' });
    return result;
  })()}
  onAccessibilityAction={(event: AccessibilityActionEvent) => {
    switch (event.nativeEvent.actionName) {
      case 'increaseValue':
        increaseValue();
      case 'decreaseValue':
        decreaseValue();
      case 'more_info':
        onPressMore();
      case 'get_directions':
        onPressDirections();
    }
  }}
/>;

Using the helper hook

<View
  accessible
  {...useAccessibilityActions(
    () => ({
      more_info: { label: 'More Info', onAction: onPressMore },
      get_directions: { label: 'Get Directions', onAction: onPressDirections },
      increaseValue: { label: 'Increase value', onAction: increaseValue },
      decreaseValue: { label: 'Decrease value', onAction: decreaseValue, disabled: value === 0 },
    }),
    []
  )}
/>;

withAccessibilityActions

HOC providing onPress callbacks from nested accessible components as accessibilityActions, so there is no need to provide those actions manually.

Parameters

onlyProvideActionsToWrapper?: boolean 1. WrappedComponent - component component to be provided with accessibilityActions - component providing accessibilityActions to the top level component 2. getDefaultAccessibilityActionLabel - optional - default: undefined - callback to automatically retrieve the accessibility action label from props - ` export const AccessibleText = withAccessibilityActions(Button, props => props.title)

  ```

3. onlyProvideActionsToWrapper

   • optional
   • default: false
   • in some cases the component shouldn't be provided with accessibility actions itself, but still should provide the action to the top level accessible component

Example

const Pressable = withAccessibilityActions(TouchableOpacity);
export const Button = withAccessibilityActions(RNButton, ({ title }) => title);
...
  <Pressable onPress={openDetails}>
    <Button 
      accessibilityActionLabel="Show 4 notifications"
      title="4 notifications"
      onPress={openNotifications}
    />
    <Button 
      title="Like"
      onPress={likeProduct}
    />
  </Pressable>

wrapping Pressable would receive accessibilityActions named Show 4 notifications with action of openNotifications & Like with action of likeProduct