put role="img", if missing, to produced svg element

[revelt]

🚀 Feature Proposal

Consider setting role="img" to <svg>.

Motivation

Because out-of-the-box, Illustrator and many others don't add it, and developers have to do it manually.

Example

Putting role="img" on the svg element ensures it is identified as a graphic.

https://www.tpgi.com/using-aria-enhance-svg-accessibility/

Pitch

Why does this feature belong in the SVGR ecosystem?
It's a no-brainer, a quick improvement to accessibility.

[gregberge]

Hello @revelt I think it could be a good addition! I am always up for features that improve accessiblity.

[pachuka]

Not a huge fan of this being defaulted in the way it is. While I appreciate the sentiment this is problematic since now this requires alt text or a role="presentational" override on every SVG (to my understanding, I could be wrong that a label would be required now - https://dequeuniversity.com/rules/axe/4.4/svg-img-alt?application=axeAPI). Most of our usages of SVGs are for icons used in buttons that already configured for accessibility and the SVG doesn't need to be focusable or explained to the non visual user.

It would at the least be nice if we could opt-out of this default behavior, I noticed we do parse the svgProps but since that's a spread/merge it wont override if we set role to undefined to attempt to unset it.

While not breaking code-wise, this feels like a breaking change in terms of behavior.

[pzi]

I agree with @pachuka, it would've been nice to be able to opt-out of this behaviour. Our use-case is the same and the vast majority of SVGs used in our project are icons or presentational only. Could almost argue that all SVG should be set to role=presentational instead and then give the option to set it to img where needed.

[YimingIsCOLD]

This seems to be a breaking change on generating react-native-svg components. Our typescript are complaining because react-native-svg does not support role props in Svg component. It would've been nice to be able to opt-out of this behaviour.

[andykenward]

Is there a way to opt out of this via the CLI or replace 'img' with 'presentational'?

[pachuka]

Looks like my syntax was slightly wrong for how to pass undefined(it's considered to be a dynamic value passed into the template) to override this new default:
https://react-svgr.com/docs/options/#svg-props

    svgProps: { focusable: "{false}", role: "{undefined}" },

Just FYI for anyone who wants the old behavior.