fix: use inline SVGs #360
fix: use inline SVGs #360
Conversation
|
https://hidde.blog/making-single-color-svg-icons-work-in-dark-mode/ and https://adrianroselli.com/2018/03/svg-filtering-for-windows-high-contrast-mode.html - and svg needs to meet Success Criterium 1.1.1, ie either it is decorative (hide) or functional (wrap with accompanying link or standalone needs accessible text with it. |
Rather than embedding SVGs as background images, use them inline. This allows them to keep their parents' fill colour, so they can always adapt to match the text. When forced color mode is active (e.g. Windows High Contrast mode), we need to force the fill colour to match the context (i.e. text or link colour), otherwise it doesn't pass through properly on Windows. This is an accessibility enhancement as it means that users who use tools like high-contrast mode to force changes in background and foreground colours will continue to be able to see iconography. Without it, icons are invisible if they're the same colour as the forced background colour. Fixes #162
gregtyler
force-pushed
the
89-fix-embedded-svg-colour
branch
from
df8feb7 to
07ce8d9
Compare
|
Updated to include the icon in the link: I've had to float it to avoid some display issues with SVG+underline+whitespace. I've also added rules for "forced color mode" which is the CSS terminology for High Contrast. This ensures that embedded SVGs are filled with the colour of their context (i.e. Demo available here: https://moj-frontend-7lot9zxwh-vercel-gregtylerco.vercel.app/components |
|
🎉 This PR is included in version 1.4.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Rather than embedding SVGs as background images, use them inline. This allows them to keep their parents' fill colour, so they can always adapt to match the text.
When forced color mode is active (e.g. Windows High Contrast mode), we need to force the fill colour to match the context (i.e. text or link colour), otherwise it doesn't pass through properly on Windows.
This is an accessibility enhancement as it means that users who use tools like high-contrast mode to force changes in background and foreground colours will continue to be able to see iconography. Without it, icons are invisible if they're the same colour as the forced background colour.
Fixes #162