Accessibility features

[jackdomleo7]

Hi, I have a few accessibility features/suggestions and wanted to hear your thoughts. If you'd like me to create separate issues for each one then I'm happy to do so (I kept them in one issue for now for tidiness).

• All SVGs require some text alternative, so on <svg-icon/>, while the desc prop can remain optional, have you considered making the title prop a required prop? Keeping title as optional may mean accessibility will be skipped.
• A prop for role on <svg-icon/> where the only valid values are application, document, and img (see here for details). Maybe this prop could be optional, with the default either being img or defined in nuxt.config.js?
• Implement aria-describedby on the <svg> as demonstrated in this article and many other articles. The id for <title> and <desc> doesn't necessarily need to be props but could be dynamically generated from the title and desc props if they are provided (e.g. id="title.toLowercase().replace(/\s/g, '-')"). As long as the id's on the <title> and <desc> are generated inside the aria-describedby on the <svg>, then it should be all good. 👌

[farnabaz]

Hey, Sorry for the late response and Thank you for great explanation.
Will consider these improvements in next major release.

[farnabaz]

All SVGs require some text alternative, so on , while the desc prop can remain optional, have you considered making the title prop a required prop? Keeping title as optional may mean accessibility will be skipped

What about using file name as the fallback title? in this case using good names for svgs files will be enough and we don't force users to define title prop

[jackdomleo7]

Sounds like a good idea! 👍