fix(storefront): BCTHEME-198 Face accessibility standards with social…

… links on PDP's page
bigcommerce · Aug 31, 2020 · 431a920 · 431a920
1 parent cea4c32
commit 431a920
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+- Face accessibility standards with social links on PDP's page. [#1809](https://github.com/bigcommerce/cornerstone/pull/1809)
+
 ## Draft
 - Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797)
 - Fixed product image doesn't change on click when viewing a product with multiple images in IE11 [#1748](https://github.com/bigcommerce/cornerstone/pull/1748)

diff --git a/assets/scss/components/foundation/modal/_modal.scss b/assets/scss/components/foundation/modal/_modal.scss
@@ -7,6 +7,7 @@
         &:before {
             content: " ";
             position: absolute;
+            right: 0;
             top: 50%;
             border-width: remCalc(10px);
             border-style: solid;

diff --git a/assets/scss/components/stencil/socialLinks/_socialLinks.scss b/assets/scss/components/stencil/socialLinks/_socialLinks.scss
@@ -60,6 +60,13 @@
         }
         // scss-lint:enable NestingDepth,
     }
+
+    & .socialLinks__link {
+        position: relative;
+        height: 2rem;
+
+        @include addFocusTooltip;
+    }
 }
 
 

diff --git a/templates/components/common/share.html b/templates/components/common/share.html
@@ -4,7 +4,12 @@
         <ul class="socialLinks">
             {{#each settings.add_this.buttons}}
                 <li class="socialLinks-item socialLinks-item--{{service}}">
-                    <a class="addthis_button_{{service}} icon icon--{{service}}" {{{annotation}}}>
+                    <a class="addthis_button_{{service}} socialLinks__link icon icon--{{service}}"
+                       title="{{{capitalize service}}}"
+                       href="#"
+                       {{{annotation}}}
+                    >
+                        <span class="aria-description--hidden">{{{capitalize service}}}</span>
                         {{#if service '===' 'facebook'}}
                             <svg>
                                 <use xlink:href="#icon-facebook"/>
@@ -40,7 +45,7 @@
         </ul>
         <script type="text/javascript"
                 defer src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e94ed470ee51e32"></script>
-        <script>  
+        <script>
             window.addEventListener('DOMContentLoaded', function() {
                 if (typeof(addthis) === "object") {
                     addthis.toolbox('.addthis_toolbox');
@@ -50,12 +55,12 @@
     </div>
 {{/if}}
 {{#if settings.facebook_like_button.enabled}}
-    <iframe 
-        class="facebook{{#if settings.facebook_like_button.verb '===' 'recommend'}}Recommend{{else}}Like{{/if}}Btn" 
-        style="border:none; overflow:hidden; margin: 0; padding: 0; position:absolute" 
-        src="https://www.facebook.com/plugins/like.php?href={{settings.facebook_like_button.href}}&amp;layout=button_count{{#if settings.facebook_like_button.verb '===' 'recommend'}}&amp;action=recommend{{/if}}&amp;colorscheme=light&amp;height=20" 
-        scrolling="no" 
-        frameborder="0" 
+    <iframe
+        class="facebook{{#if settings.facebook_like_button.verb '===' 'recommend'}}Recommend{{else}}Like{{/if}}Btn"
+        style="border:none; overflow:hidden; margin: 0; padding: 0; position:absolute"
+        src="https://www.facebook.com/plugins/like.php?href={{settings.facebook_like_button.href}}&amp;layout=button_count{{#if settings.facebook_like_button.verb '===' 'recommend'}}&amp;action=recommend{{/if}}&amp;colorscheme=light&amp;height=20"
+        scrolling="no"
+        frameborder="0"
         allowTransparency="true">
     </iframe>
-{{/if}}
+{{/if}}