Last month I learned: When using a svg symbol that contains a gradient inside an svg icon-sprite you can’t use display: none
on the sprite’s <svg>
tag without the gradient being lost.
Today I learned: Hiding the <svg>
using methods that include visibility: hidden
will just wipe some other icons 🔥 Not all, but a fair share, and I haven’t figured out the exact subset.
Solution: So far, the following has worked in all my use cases:
<svg class="sr-only" aria-hidden="true">
.sr-only
(screen reader only, snippet below) prevents prevents thesvg
from affecting the layout in any way- Seemingly contradicting now
aria-hidden
saves screen reader users having to listen to the sound of XML gibberish
*My default screen-reader-only utility: .sr-only
:
(@responsive
assumes post processing with TailwindCSS is available, otherwiese just leave it and forgo the joys of auto-generated breakpoint utilities)
@responsive {
.sr-only {
position: absolute !important;
overflow: hidden;
height: 1px;
width: 1px;
clip: rect(1px, 1px, 1px, 1px);
&:focus {
position: static;
height: auto;
width: auto;
}
}
}
@responsive {
.sr-only-reset {
position: static !important;
overflow: visible;
height: auto;
width: auto;
clip: unset;
}
}