Add text fallback for social icons #547
Conversation
| <svg> | ||
| <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#pinterest"/> | ||
| </svg> | ||
| </a> | ||
| {{/if}} | ||
| {{#if @config.custom.socialYoutube}} | ||
| <a href="{{@config.custom.socialYoutube}}" aria-label="Youtube"> | ||
| <desc>Youtube</desc> |
There was a problem hiding this comment.
| <desc>Youtube</desc> | |
| <desc>YouTube</desc> |
Because LinkedIn :)
There was a problem hiding this comment.
An <desc> element is used incorrectly, it is a description "component" of SVG file and must be used inside e.g.:
<a href="{{@config.custom.socialPinterest}}" aria-label="Pinterest"> <svg> <desc>Pinterest</desc> <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#pinterest"/> </svg> </a>
There was a problem hiding this comment.
Of course you're right. I don't know how I made that mistake. I think I wrote it in the correct way in my own theme, then tried to backport it to the default theme and just didn't notice I was one level off.
| <svg> | ||
| <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#vimeo"/> | ||
| </svg> | ||
| </a> | ||
| {{/if}} | ||
| {{#if @config.custom.socialPinterest}} | ||
| <a href="{{@config.custom.socialPinterest}}" aria-label="Pinterest"> | ||
| <desc>Pinterest</desc> | ||
| <svg> | ||
| <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#pinterest"/> | ||
| </svg> | ||
| </a> | ||
| {{/if}} | ||
| {{#if @config.custom.socialYoutube}} | ||
| <a href="{{@config.custom.socialYoutube}}" aria-label="Youtube"> |
There was a problem hiding this comment.
| <a href="{{@config.custom.socialYoutube}}" aria-label="Youtube"> | |
| <a href="{{@config.custom.socialYoutube}}" aria-label="YouTube"> |
There was a problem hiding this comment.
It's already four spaces indented, just like the rest. Is this a typo?
This makes the social icons turn into plain text links on screenreaders and text-only browsers like lynx. Uses this method: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-inline-svg-text
This makes the social icons turn into plain text links on screenreaders and text-only browsers like lynx.
Uses this method: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-inline-svg-text