[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