From a0d5e4f33370ebdc06221a49cbb22388f24a236d Mon Sep 17 00:00:00 2001
From: Nick <nick@kousu.ca>
Date: Sun, 18 Aug 2019 10:49:43 -0400
Subject: [PATCH] Add text fallback for social icons

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
---
 .../default-themes/simple/partials/footer.hbs              | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/default-files/default-themes/simple/partials/footer.hbs b/app/default-files/default-themes/simple/partials/footer.hbs
index 20d42fb80..cd981afeb 100755
--- a/app/default-files/default-themes/simple/partials/footer.hbs
+++ b/app/default-files/default-themes/simple/partials/footer.hbs
@@ -3,6 +3,7 @@
         <div class="footer__social">
             {{#if @config.custom.socialFacebook}}
                 <a href="{{@config.custom.socialFacebook}}" aria-label="Facebook">
+                    <desc>Facebook</desc>
                     <svg>
                         <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#facebook"/>
                     </svg>
@@ -11,6 +12,7 @@
             {{#if @config.custom.socialTwitter}}
                 <a href="{{@config.custom.socialTwitter}}" aria-label="Twitter">
                     <svg>
+                        <desc>Twitter</desc>
                         <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#twitter"/>
                     </svg>
                 </a>
@@ -18,6 +20,7 @@
             {{#if @config.custom.socialInstagram}}
                 <a href="{{@config.custom.socialInstagram}}" aria-label="Instagram">
                     <svg>
+                        <desc>Instagram</desc>
                         <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#instagram"/>
                     </svg>
                 </a>
@@ -25,6 +28,7 @@
             {{#if @config.custom.socialLinkedin}}
                 <a href="{{@config.custom.socialLinkedin}}" aria-label="LinkedIn">
                     <svg>
+                        <desc>LinkedIn</desc>
                         <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#linkedin"/>
                     </svg>
                 </a>
@@ -32,6 +36,7 @@
             {{#if @config.custom.socialVimeo}}
                 <a href="{{@config.custom.socialVimeo}}" aria-label="Vimeo">
                     <svg>
+                        <desc>Vimeo</desc>
                         <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#vimeo"/>
                     </svg>
                 </a>
@@ -39,6 +44,7 @@
             {{#if @config.custom.socialPinterest}}
                 <a href="{{@config.custom.socialPinterest}}" aria-label="Pinterest">
                     <svg>
+                        <desc>Pinterest</desc>
                         <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#pinterest"/>
                     </svg>
                 </a>
@@ -46,6 +52,7 @@
             {{#if @config.custom.socialYoutube}}
                 <a href="{{@config.custom.socialYoutube}}" aria-label="Youtube">
                     <svg>
+                        <desc>YouTube</desc>
                         <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#youtube"/>
                     </svg>
                 </a>