search

primer / eslint-plugin-primer-react

ESLint rules for Primer React
MIT License
10 stars 9 forks source link

Create lint rule to prevent passing only `onClick` to `ActionList.Item` #205

Closed camchenry closed 2 months ago

camchenry commented 2 months ago

I would like to suggest that we create a lint rule that prevents using only onClick with ActionList.Item and that would auto-fix to use onSelect instead.

Context

I've recently fixed a number of accessibility bugs where behavior was only accessible with the mouse because we passed onClick to an action list item, instead of using the onSelect attribute.

Examples:

While onClick is not completely invalid to put on ActionList.Item, if it is the only means by which an item can be activated, then it creates an inaccessible experience.

Using code search, I can also see some other code examples which might be problematic:

Examples

Code that should be considered invalid by this rule:

<ActionList.Item onClick={...}>

Code that should be considered valid by this rule:

<ActionList.Item onSelect={...}>
<ActionList.Item onSelect={...} onClick={...}>
siddharthkp commented 2 months ago
lesliecdubs commented 2 months ago

👋 @camchenry thanks for proposing this! Are you interested in upstreaming it to Primer?

camchenry commented 2 months ago

@lesliecdubs Sure! If I have some time this week, I can work on upstreaming this rule.