From 80e1483de595dd92d9de166989421840d6dd9045 Mon Sep 17 00:00:00 2001 From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com> Date: Fri, 1 Mar 2024 11:41:17 +0200 Subject: [PATCH 1/5] fix(storefront): BCTHEME-1770 ADA Compliance - All form fields must be properly labeled (#2433) --- CHANGELOG.md | 5 +++-- lang/en.json | 4 +++- templates/components/faceted-search/range-form.html | 6 ++++++ 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e2a1954fa..945dbc569e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ 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 +- 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) @@ -28,11 +31,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/lang/en.json b/lang/en.json index 1cd456c97f..e3109b3816 100755 --- a/lang/en.json +++ b/lang/en.json @@ -878,7 +878,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/faceted-search/range-form.html b/templates/components/faceted-search/range-form.html index 824d4d16cf..6d107e77f4 100644 --- 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" /> + {{lang 'search.faceted.range.min-description'}}
@@ -26,7 +29,10 @@ required type="number" value="{{max_price}}" + aria-label="{{lang 'search.faceted.range.max-placeholder'}}" + aria-describedby="max_price_description" /> + {{lang 'search.faceted.range.max-description'}}
From 8077da19b68c95afe28c4aee27117e59380b4201 Mon Sep 17 00:00:00 2001 From: bc-vlad-dlogush <83779098+bc-vlad-dlogush@users.noreply.github.com> Date: Tue, 5 Mar 2024 11:54:24 +0200 Subject: [PATCH 2/5] fix(storefront): BCTHEME-1780 Content that functions as a list should be indicated as such to screen reader users (#2429) Co-authored-by: Vlad Dlogush <31504758+VladDlogush@users.noreply.github.com> --- CHANGELOG.md | 1 + assets/scss/layouts/footer/_footer.scss | 13 +++- lang/en.json | 1 + .../components/common/payment-icons.html | 60 +++++++++++++++---- 4 files changed, 62 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 945dbc569e..a7d2d508c0 100644 --- 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) - 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) diff --git a/assets/scss/layouts/footer/_footer.scss b/assets/scss/layouts/footer/_footer.scss index 88a9937167..2138b9a1eb 100644 --- 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 index e3109b3816..7171adbc49 100755 --- 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 index 9fed44a930..df0c1d69aa 100644 --- 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}} -
+
+ {{/or}} {{/with}} From 4a7569f0677ad4f7fca9e662534be7acba398cab Mon Sep 17 00:00:00 2001 From: bc-vlad-dlogush <83779098+bc-vlad-dlogush@users.noreply.github.com> Date: Tue, 5 Mar 2024 11:58:04 +0200 Subject: [PATCH 3/5] fix(storefront): BCTHEME-1778 Decorative SVG elements should be hidden from screen reader users (#2432) Co-authored-by: Vlad Dlogush <31504758+VladDlogush@users.noreply.github.com> --- CHANGELOG.md | 1 + templates/components/cart/content.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a7d2d508c0..a3090d7618 100644 --- 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 +- Decorative SVG elements should be hidden from screen reader users [#2432](https://github.com/bigcommerce/cornerstone/pull/2432) - 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) diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html index 2b8c5f24e1..bc52f46a15 100644 --- a/templates/components/cart/content.html +++ b/templates/components/cart/content.html @@ -156,7 +156,7 @@

data-confirm-delete="{{lang 'cart.confirm_delete'}}" aria-label="{{lang 'cart.remove_item' name=name}}" > - + {{/or}} From 8dc64429b8a69be79bbaa70a9acc5d4085955017 Mon Sep 17 00:00:00 2001 From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com> Date: Tue, 5 Mar 2024 13:21:35 +0200 Subject: [PATCH 4/5] fix(storefront): BCTHEME-1781 ADA Compliance - The Add to Cart modal dialog container is not labeled (#2427) --- CHANGELOG.md | 5 +++-- templates/components/cart/preview.html | 2 +- templates/components/products/product-view.html | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a3090d7618..7be02101ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,8 +5,9 @@ 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 -- Decorative SVG elements should be hidden from screen reader users [#2432](https://github.com/bigcommerce/cornerstone/pull/2432) -- 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 - 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) diff --git a/templates/components/cart/preview.html b/templates/components/cart/preview.html index 0934f5c953..bbc22fbca6 100644 --- a/templates/components/cart/preview.html +++ b/templates/components/cart/preview.html @@ -1,5 +1,5 @@
-

+

{{lang 'cart.added_to_cart.what_next' num_products=cart.quantity}}

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html index 2f93966d75..a43be8ffdf 100644 --- a/templates/components/products/product-view.html +++ b/templates/components/products/product-view.html @@ -276,6 +276,6 @@

{{> components/common/modal/modal-close-btn }} -
+
From 3bbbdf71a3e0e059038b330e7fc706e9db954421 Mon Sep 17 00:00:00 2001 From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com> Date: Tue, 5 Mar 2024 14:32:42 +0200 Subject: [PATCH 5/5] fix(storefront): BCTHEME-1769-2 ADA Compliance - Add translations to accessibility attributes for Coupon Code and Gift Certificates (#2440) --- CHANGELOG.md | 1 + templates/components/cart/coupon-input.html | 4 ++-- templates/components/cart/gift-certificate-input.html | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7be02101ac..610dd967cf 100644 --- 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 +- 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) diff --git a/templates/components/cart/coupon-input.html b/templates/components/cart/coupon-input.html index 3e0e5dd0a0..82613dc5b8 100644 --- a/templates/components/cart/coupon-input.html +++ b/templates/components/cart/coupon-input.html @@ -1,7 +1,7 @@