webpack-svgstore-plugin
webpack-svgstore-plugin copied to clipboard
Add display none to SVG sprite by default to improve accessibility
Raising this PR to handle accessibility issues caused by the SVG sprites. In Windows on NVDA and JAWs, screen readers struggle when they get to the sprite (ie. straight away as its inserted at the top of the document), and they'll try to read every SVG out. On NVDA in Windows each sprite will be read as “graphic”, and JAWS will complain about descriptions not being available. By applying display: none
to it, all screen readers will simply ignore it.
We were able to patch this up by passing the display: none
manually but it really should come as default as there's no reason to introduce barriers to accessibility.
The reason why its marked as a minor version and not a patch is because we found that in applying this change, certain SVGs with masks inside it stopped rendering correctly (certain parts were missing / hidden).
Before upgrading, users MUST:
- verify their SVGs do not have masks (in which case they can upgrade straight away)
- If masks are used, make sure they render correctly, otherwise update SVGs to use paths instead