Extend alt-text rule to check for any element with role="img" as well

[anuvenkatesh1]

This is not a bug but rather looking for some guidance on how can I extend the alt-text rule to include elements that have role="img" as well. Guidance is highly appreciated.

[ljharb]

You can designate a specific custom component to act as an image: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#configurations

You can also use https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#polymorphic-components, although that kind of design is not recommended (iow, using "role" on an HTML element).

[anuvenkatesh1]

Thank you @ljharb . I attempted to try the above but was unsuccessful, Sorry am a novice to React and jsx-a11y. I was wondering if I can extend the alt-text rule in the estlintrc config to include div role="img" kind of elements also. Pretty much the same kind of check for aria-label/aria-labelledby needs to be done for any element with role="img" too "jsx-a11y/alt-text":[2,{ "elements": ["img","div[role=\"img\"]"] }

[ljharb]

no, but you can use the polymorphic components setting to make divs with a role of "img" be treated like img.

[grumd]

@ljharb Hi, sorry for bumping a year old thread, but it's not resolved and I've just come across this issue myself. Are you suggesting to use polymorphicPropName: 'role'? What if I also want to use actual polymorphic components with as in my code? role="img" is permitted to be used on any element and it still needs to be accessible, the best way is to modify this eslint rule to also check for any element with role='img' by default, not just <img>.

[ljharb]

@grumd yes - you can combine polymorphicPropName: 'role' with polymorphicAllowList: ['div'], for example, as well.

What's your use case for a non-img element with an img role? In general, ARIA props are meant to be a last-resort approach to ensuring a11y, when semantic HTML is unavailable.