fix(storefront): BCTHEME-909 Social media icons failing wave scan wit…

…h Empty Link.
bigcommerce · Apr 19, 2022 · 5acc434 · 5acc434
1 parent 7093931
commit 5acc434
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Social media icons failing wave scan with "Empty Link". [#2202](https://github.com/bigcommerce/cornerstone/issues/2202)
 
 ## 6.3.0 (03-11-2022)
 - Update blog component to use H1 tags on posts [#2179](https://github.com/bigcommerce/cornerstone/issues/2179)

diff --git a/templates/components/common/social-links.html b/templates/components/common/social-links.html
@@ -2,8 +2,16 @@
     <ul class="socialLinks socialLinks--alt">
         {{#each social_media}}
             <li class="socialLinks-item">
-                <a class="icon icon--{{display_name}}" href="{{url}}" target="_blank" rel="noopener">
-                    <svg><use xlink:href="#icon-{{display_name}}" /></svg>
+                <a class="icon icon--{{display_name}}"
+                   href="{{url}}"
+                   target="_blank"
+                   rel="noopener"
+                   title="{{{capitalize display_name}}}"
+                >
+                    <span class="aria-description--hidden">{{{capitalize display_name}}}</span>
+                    <svg>
+                        <use xlink:href="#icon-{{display_name}}"/>
+                    </svg>
                 </a>
             </li>
         {{/each}}