search

jsx-eslint / eslint-plugin-jsx-a11y

Static AST checker for a11y rules on JSX elements.
MIT License
3.43k stars 637 forks source link

custom aria property support #839

Open santhoshreddyk opened 2 years ago

santhoshreddyk commented 2 years ago

I am using a react library (fluent-ui library) where the aria attribute names are different, is it possible to declare my own aria attributes Example:

aria-labeledby is spelled as ariaLabeledBy

ljharb commented 2 years ago

… on html elements? jsx has a spec.

santhoshreddyk commented 2 years ago

No directly on html elements, its custom react components provided a library. Custom react control has inner html elements and for them we pass the aria attributes as props of outer element. Example:

<SideBySideImages
  firstImageAlt="First Iamge"
 secndImageAlt="Second Image"
firstImageSrc="/somesrc.jpg"
secondImageSrc="othersrc.jpg"
/>

Here i have a flexibility of inferring the custom Control name i guess but not custom attributes?

ljharb commented 2 years ago

What rules are checking prop names on custom components?

santhoshreddyk commented 2 years ago

Well, in this case we are checking 'alt' property for image indirectly. The html that would be generated by above custom component is

<div><img src="/somesrc.jpg" alt="First Image"/><img src="/othersrc.jpg" alt="Second Image"/></div>

by checking the "firstImageAlt" on custom component, i will be able to check the 'alt' rule on inner 'img' element. What i am looking for is, i should be able to let the plugin know that 'SideBySideImage' is of type 'img' and 'firstImageAlt' is equals to 'alt' attribute.

Something similar to this. https://www.npmjs.com/package/eslint-plugin-react

Here custom components and attributes are declared in settings json

santhoshreddyk commented 2 years ago

Exactly looking for this https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/174