Merge branch 'master' into BCTHEME-1796

bigcommerce · Mar 6, 2024 · 5290885 · 5290885
2 parents 4a86aba + 3bbbdf7
commit 5290885
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 - Page Suggested Items still listed on Cornerstone [#2438](https://github.com/bigcommerce/cornerstone/pull/2438)
+- ADA Compliance - Add translations to accessibility attributes for Coupon Code and Gift Certificates [#2440](https://github.com/bigcommerce/cornerstone/pull/2440)
+- ADA Compliance - The Add to Cart modal dialog container is not labeled [#2427](https://github.com/bigcommerce/cornerstone/pull/2427)
+- ADA Compliance - Decorative SVG elements should be hidden from screen reader users [#2432](https://github.com/bigcommerce/cornerstone/pull/2432)
+- ADA Compliance - Content that functions as a list should be indicated as such to screen reader users [#2429](https://github.com/bigcommerce/cornerstone/pull/2429)
+- ADA Compliance - All form fields must be properly labeled [#2433](https://github.com/bigcommerce/cornerstone/pull/2433)
+- ADA Compliance - Errors are not identified to screen reader users within the Refine By accordions [#2424](https://github.com/bigcommerce/cornerstone/pull/2424)
+- ADA Compliance - Expandable items should be read by screen reader [2422](https://github.com/bigcommerce/cornerstone/pull/2422)
 - Remove shop_by_price: true from category.html [#2431](https://github.com/bigcommerce/cornerstone/pull/2431)
 - Added SEPA and ECP stored bank accounts typesto the Payment methods page [#2434](https://github.com/bigcommerce/cornerstone/pull/2434)
 
@@ -29,11 +36,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Change case of Page builder menu item text [#2407](https://github.com/bigcommerce/cornerstone/pull/2407)
 - Corrected typo with the word default previously deafault in config.json [#2410](https://github.com/bigcommerce/cornerstone/pull/2410)
 - Adding autocomplete to common input fields [2397](https://github.com/bigcommerce/cornerstone/pull/2397)
-- ADA Compliance - Expandable items should be read by screen reader [2422](https://github.com/bigcommerce/cornerstone/pull/2422)
 - Pre-Orded text in Polish looks cropped in the button on Product page [2414](https://github.com/bigcommerce/cornerstone/pull/2414)
 - Use triple sash on customer's company name to prevent escaping ampersands [#2399](https://github.com/bigcommerce/cornerstone/pull/2399)
 - Adding aria attributes to cart page coupon code and gift cert buttons [#2391](https://github.com/bigcommerce/cornerstone/pull/2391)
-- ADA Compliance - Errors are not identified to screen reader users within the Refine By accordions [#2424](https://github.com/bigcommerce/cornerstone/pull/2424)
 
 ## 6.12.0 (07-06-2023)
 - sync package lock file [#2373](https://github.com/bigcommerce/cornerstone/pull/2373)

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",
@@ -878,7 +879,9 @@
             "range": {
                 "update": "Update",
                 "min-placeholder": "Min.",
-                "max-placeholder": "Max."
+                "max-placeholder": "Max.",
+                "min-description": "Enter the minimum price to filter products by",
+                "max-description": "Enter the maximum price to filter products by"
             },
             "rating": {
                 "and-up": "& up"

diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html
@@ -156,7 +156,7 @@ <h2 class="cart-item-name">
                                 data-confirm-delete="{{lang 'cart.confirm_delete'}}"
                                 aria-label="{{lang 'cart.remove_item' name=name}}"
                         >
-                            <svg><use href="#icon-close"></use></svg>
+                            <svg aria-hidden="true"><use href="#icon-close"></use></svg>
                         </button>
                     {{/or}}
                 </td>

diff --git a/templates/components/cart/coupon-input.html b/templates/components/cart/coupon-input.html
@@ -1,7 +1,7 @@
 <div class="cart-total-value">
     <button
         class="coupon-code-add"
-        aria-label="Add Coupon"
+        aria-label="{{lang 'cart.coupons.add_coupon'}}"
         aria-controls="add-coupon"
         aria-expanded="false"
     >
@@ -11,7 +11,7 @@
     <button
         class="coupon-code-cancel"
         style="display: none;"
-        aria-label="Add Coupon"
+        aria-label="{{lang 'cart.coupons.add_coupon'}}"
         aria-controls="add-coupon"
         aria-expanded="true"
     >

diff --git a/templates/components/cart/gift-certificate-input.html b/templates/components/cart/gift-certificate-input.html
@@ -1,7 +1,7 @@
 <div class="cart-total-value">
     <button
         class="gift-certificate-add"
-        aria-label="Add Certificate"
+        aria-label="{{lang 'cart.gift_certificates.add_cert_code'}}"
         aria-controls="add-certificate"
         aria-expanded="false"
     >
@@ -11,7 +11,7 @@
     <button
         class="gift-certificate-cancel"
         style="display: none;"
-        aria-label="Add Certificate"
+        aria-label="{{lang 'cart.gift_certificates.add_cert_code'}}"
         aria-controls="add-certificate"
         aria-expanded="true"
     >

diff --git a/templates/components/cart/preview.html b/templates/components/cart/preview.html
@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h1 class="modal-header-title">
+    <h1 id="modal-header-title" class="modal-header-title">
         {{lang 'cart.added_to_cart.what_next' num_products=cart.quantity}}
     </h1>
 </div>

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}}
diff --git a/templates/components/faceted-search/range-form.html b/templates/components/faceted-search/range-form.html
@@ -14,7 +14,10 @@
                     required
                     type="number"
                     value="{{min_price}}"
+                    aria-label="{{lang 'search.faceted.range.min-placeholder'}}"
+                    aria-describedby="min_price_description"
                 />
+                <span id="min_price_description" class="aria-description--hidden">{{lang 'search.faceted.range.min-description'}}</span>
             </div>
 
             <div class="form-field">
@@ -26,7 +29,10 @@
                     required
                     type="number"
                     value="{{max_price}}"
+                    aria-label="{{lang 'search.faceted.range.max-placeholder'}}"
+                    aria-describedby="max_price_description"
                 />
+                <span id="max_price_description" class="aria-description--hidden">{{lang 'search.faceted.range.max-description'}}</span>
             </div>
 
             <div class="form-field">

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -276,6 +276,6 @@ <h2 class="productView-brand">
 
 <div id="previewModal" class="modal modal--large" data-reveal>
     {{> components/common/modal/modal-close-btn }}
-    <div class="modal-content"></div>
+    <div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="modal-header-title"></div>
     <div class="loadingOverlay"></div>
 </div>