fix(storefront): BCTHEME-909 Social media icons failing wave scan with Empty Link.

Author: “bc-yevhenii-buliuk”

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)

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}}