fix(storefront): BCTHEME-1780 Content that functions as a list should…

… be indicated as such to screen reader users
bigcommerce · Mar 4, 2024 · 78b934d · 78b934d
1 parent d799535
commit 78b934d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 13 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
+- Content that functions as a list should be indicated as such to screen reader users [#2429](https://github.com/bigcommerce/cornerstone/pull/2429)
 
 ## 6.13.0 (02-12-2024)
 - Fix HTML markup for product listing and below content region [#2426](https://github.com/bigcommerce/cornerstone/pull/2426)

diff --git a/assets/scss/layouts/footer/_footer.scss b/assets/scss/layouts/footer/_footer.scss
@@ -41,7 +41,6 @@
     display: inline-block;
     float: none;
     font-size: fontSize("base"); // 2
-    margin-bottom: spacing("double");
     overflow-wrap: break-word;
     text-align: center;
     vertical-align: top;
@@ -144,15 +143,23 @@
 }
 
 .footer-payment-icons {
-    height: remCalc(40);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style-type: none;
+    margin-left: 0;
     margin-top: spacing("single");
 
+    @include breakpoint("small") {
+        justify-content: normal;
+    }
+
     @include breakpoint("medium") {
         margin-top: spacing("double");
     }
 
     .footer-payment-icon {
-        height: 100%;
+        height: remCalc(40);
         margin: spacing("quarter");
         vertical-align: middle;
         width: remCalc(50);

diff --git a/lang/en.json b/lang/en.json
@@ -400,6 +400,7 @@
             "credit_card_number": "Credit Card Number",
             "expiration": "Expiration",
             "cvv": "CVV",
+            "payment_icons_label": "Payment icons",
             "card_types": {
                 "american_express": "American Express",
                 "credit_card": "Credit Card",

diff --git a/templates/components/common/payment-icons.html b/templates/components/common/payment-icons.html
@@ -1,30 +1,70 @@
 {{#with theme_settings}}
     {{#or show_accept_amex show_accept_discover show_accept_mastercard show_accept_paypal show_accept_visa show_accept_amazonpay show_accept_googlepay show_accept_klarna}}
-    <div class="footer-payment-icons">
+    <ul class="footer-payment-icons" aria-label="{{lang 'account.payment_methods.payment_icons_label'}}">
         {{#if show_accept_amex}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-american-express"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>American Express</title>
+                <use href="#icon-logo-american-express"></use>
+            </svg>
+        </li>
         {{/if}}
         {{#if show_accept_discover}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-discover"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>Discover</title>
+                <use href="#icon-logo-discover"></use>
+            </svg>
+        </li>
         {{/if}}
         {{#if show_accept_mastercard}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-mastercard"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>Mastercard</title>
+                <use href="#icon-logo-mastercard"></use>
+            </svg>
+        </li>
         {{/if}}
         {{#if show_accept_paypal}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-paypal"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>PayPal</title>
+                <use href="#icon-logo-paypal"></use>
+            </svg>
+        </li>
         {{/if}}
         {{#if show_accept_visa}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-visa"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>Visa</title>
+                <use href="#icon-logo-visa"></use>
+            </svg>
+        </li>
         {{/if}}
         {{#if show_accept_amazonpay}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-amazonpay"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>Amazon Pay</title>
+                <use href="#icon-logo-amazonpay"></use>
+            </svg>
+        </li>
         {{/if}}
         {{#if show_accept_googlepay}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-googlepay"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>Google Pay</title>
+                <use href="#icon-logo-googlepay"></use>
+            </svg>
+        </li>
         {{/if}}
         {{#if show_accept_klarna}}
-        <svg class="footer-payment-icon"><use href="#icon-logo-klarna"></use></svg>
+        <li>
+            <svg class="footer-payment-icon" role="img">
+                <title>Klarna</title>
+                <use href="#icon-logo-klarna"></use>
+            </svg>
+        </li>
         {{/if}}
-    </div>
+    </ul>
     {{/or}}
 {{/with}}