bamlab/react-native-project-config

[BUG][Eslint-Plugin] Rule accessibility-props-require-accessible breaks with props spread

pierrezimmermannbam opened this issue · 2 comments

I have this component in my codebase

import { ReactNode, forwardRef } from 'react';
import { View } from 'react-native';

const MockMapView = forwardRef<View, { children: ReactNode }>((props, ref) => {
  return (
    <View {...props} ref={ref}>
      {props.children}
    </View>
  );
});
MockMapView.displayName = 'MapView';

When trying to lint with the a11y config; I get this error:

Oops! Something went wrong! :(

ESLint: 8.49.0

TypeError: Cannot read properties of undefined (reading 'name')
Occurred while linting /Users/pierrezimmermann/safran/safran-sfco2/__mocks__/react-native-maps.tsx:6
Rule: "@bam.tech/accessibility-props-require-accessible"
    at /Users/pierrezimmermann/safran/safran-sfco2/node_modules/@bam.tech/eslint-plugin/lib/rules/accessibility-props-require-accessible.js:41:76
    at Array.some (<anonymous>)
    at JSXOpeningElement (/Users/pierrezimmermann/safran/safran-sfco2/node_modules/@bam.tech/eslint-plugin/lib/rules/accessibility-props-require-accessible.js:38:29)
    at ruleErrorHandler (/Users/pierrezimmermann/safran/safran-sfco2/node_modules/eslint/lib/linter/linter.js:1051:28)
    at /Users/pierrezimmermann/safran/safran-sfco2/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/pierrezimmermann/safran/safran-sfco2/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/pierrezimmermann/safran/safran-sfco2/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/Users/pierrezimmermann/safran/safran-sfco2/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/Users/pierrezimmermann/safran/safran-sfco2/node_modules/eslint/lib/linter/node-event-generator.js:340:14)

What happens is that we try to access attribute.name.name in the rule implementation but if I log the attributes I have this one

<ref *1> {
  type: 'JSXSpreadAttribute',
  argument: {
    type: 'Identifier',
    name: 'props',
    range: [ 190, 195 ],
    loc: { start: [Object], end: [Object] },
    parent: [Circular *1]
  },
  range: [ 186, 196 ],
  loc: { start: { line: 6, column: 10 }, end: { line: 6, column: 20 } },
  parent: <ref *2> {
    type: 'JSXOpeningElement',
    typeParameters: undefined,
    selfClosing: false,
    name: {
      type: 'JSXIdentifier',
      name: 'View',
      range: [Array],
      loc: [Object],
      parent: [Circular *2]
    },
    attributes: [ [Circular *1], [Object] ],
    range: [ 180, 207 ],
    loc: { start: [Object], end: [Object] },
    parent: {
      type: 'JSXElement',
      openingElement: [Circular *2],
      closingElement: [Object],
      children: [Array],
      range: [Array],
      loc: [Object],
      parent: [Object]
    }
  }
}

This attribute is not of type JSXAttribute so it doesn't have a name property. I guess to the way to fix that would be to only run checks on attributes of type JSXAttribute. I'm not really sure what it could imply nor if it's the best way to fix that so I'd rather not make a PR straight away that may break some other things

These errors has been raised before. For now I'll suggest disabling the custom rules in your eslint config, or wait for this PR #65 to pass that will remove the custom rules from the a11y.
Their fixing is not prioritized at the moment as we need to rethink the way we implement custom rules

Closing this because a11y custom rules have been removed