Inline functions/values are not recognized as valid accessibility actions

[Marquess Valdez]

We are seeing errors we don't believe to be accurate in some of our components. When using inline functions and values the linter throws errors. Here is a contrived illustration of the issue.

import React, { useMemo, useCallback } from 'react';

export default function ActionsError() {
  return (
    <Container
      accessibilityActions={useMemo(() => {
        return [
          {
            name: 'name',
            label: 'label'
          }
        ];
      }, [false])}
      onAccessibilityAction={useCallback(
        event => {
          const actions = {
            activate: () => console.log('hi')
          };

          return actions[event.nativeEvent.actionName]() || NOOP;
        },
        [NOOP]
      )}
      accessible
      accessibilityRole="button"
      accessibilityLabel={text}
      style={style}
    />
  );
}

  5:5  error  accessibilityActions: has accessibilityActions but onAccessibilityAction is not a function  react-native-a11y/has-valid-accessibility-actions
  5:5  error  accessibilityActions: value must be an Array                                                react-native-a11y/has-valid-accessibility-actions

[JP]

hey @MarquessV -- thanks for raising this issue. I've just published a new version which includes a fix for this.

please try it out, and feel free to re-open this if you have any more problems.

yarn add eslint-plugin-react-native-a11y@2.0.3