Skip to content

Inline functions/values are not recognized as valid accessibility actions #100

@MarquessV

Description

@MarquessV

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions