[a11y] Auto add focusable attribute to every SVG

jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components

MIT License

555 stars 59 forks source link

[a11y] Auto add focusable attribute to every SVG #89

Closed mrleblanc101 closed 1 year ago

mrleblanc101 commented 1 year ago

Hi, Would it be possible to auto add attributes when you place the SVG in the page. Something like thisrole="presentation" focusable="false" tabindex="-1" for accessibility purpose ? I was using oliverfindl/vue-svg-inline-loader in Vue 2 / Nuxt 2 with Webpack and it had this feature.

9mm commented 1 year ago

I'm also wondering this.. how this would be achieved when every single svg must be imported explicitly, and I would imagine asyncComponent from vue 3 would break things, as it's automatically inlining them...

@jpkleemans what is the best approach for this?

gkatsanos commented 1 year ago

Hey guys, I believe this is possible by passing plugins as SVGO config https://github.com/jpkleemans/vite-svg-loader#svgo-configuration , for example: https://github.com/svg/svgo/blob/main/plugins/addAttributesToSVGElement.js seems to do that exactly ?