no-static-element-interactions doesn't allow custom attribute mapping #1051
Description
Problem:
Our project uses React Router which utilizes to instead of href. Because of this, no-static-element-interactions will fail on multiple jsx elements
import { Link } from 'react-router-dom';
// currently fails although `to` will render to `href`
<Link onClick={onClick} to="some/path">some content</Link>
This goes a step further when we have additional layers that eventually render down to a React Router link + to utilization:
import { MenuLink } from 'some/path'; // uses react router Link within
<MenuLink onClick={onClick} to="some/path">some content</MenuLink>
Potential solution:
Add custom attribute mapping to the no-static-element-interactions rule. For now I was thinking in the following format (this mimics options available for jsx-a11y/no-redundant-roles):
'jsx-a11y/no-static-element-interactions': [
'error',
{
a: {
attributes: {
href: ['to', 'href'],
},
},
}
]
From some testing locally, I believe this solution will solve this restriction as well as open the door to allow custom options for other rules in the checkIsInteractiveElement utility. Please lmk your thoughts, hoping to contribute back unless you see issues with this solution 🙏