feat(storefront): BCTHEME-290 add aria labelwith price for product li…

…st item (#1878)

Co-authored-by: BC-tymurbiedukhin <[email protected]>

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Add aria label with price to Product List Item. [#1878](https://github.com/bigcommerce/cornerstone/pull/1878)
 - Fixed comparing Products on 'Account - Recently Viewed' page. [#1877](https://github.com/bigcommerce/cornerstone/pull/1877)
 - Remove layout shifts to improve CLS indicator from Lighthouse performance report. [#1869](https://github.com/bigcommerce/cornerstone/pull/1869)
 - Fix aria-labels for collapsibleFactory elements. [#1868](https://github.com/bigcommerce/cornerstone/pull/1868)

templates/components/products/list-item.html

@@ -45,7 +45,14 @@
                 <p class="listItem-brand">{{brand.name}}</p>
                 {{/if}}
                 <h4 class="listItem-title">
-                    <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
+                    <a href="{{url}}" 
+                    aria-label="{{name}},{{> components/products/product-aria-label}}"
+                    {{#if settings.data_tag_enabled}}
+                    data-event-type="product-click"
+                    {{/if}}
+                    >
+                        {{name}}
+                    </a>
                 </h4>
                 {{#if summary}}
                     <p>{{{summary}}}</p>

templates/components/products/product-aria-label.html

@@ -0,0 +1,23 @@
+{{#and price.price_range (if theme_settings.price_ranges '==' true)}}
+{{#and price.price_range.min.with_tax price.price_range.max.with_tax}}
+{{lang 'category.shop_by_price_range_aria' from=price.price_range.min.with_tax.formatted to=price.price_range.max.with_tax.formatted}}
+{{else}}
+{{lang 'category.shop_by_price_range_aria' from=price.price_range.min.without_tax.formatted to=price.price_range.max.without_tax.formatted}}
+{{/and}}
+{{else}}
+{{#if price.with_tax}}
+{{#if price.non_sale_price_with_tax}}
+{{theme_settings.pdp-non-sale-price-label}}{{price.non_sale_price_with_tax.formatted}},
+{{theme_settings.pdp-sale-price-label}}{{price.with_tax.formatted}}
+{{else}}
+{{price.with_tax.formatted}}                        
+{{/if}}
+{{else}}
+{{#if price.non_sale_price_without_tax}}
+{{theme_settings.pdp-non-sale-price-label}}{{price.non_sale_price_without_tax.formatted}},
+{{theme_settings.pdp-sale-price-label}}{{price.without_tax.formatted}}
+{{else}}
+{{price.without_tax.formatted}}
+{{/if}}
+{{/if}}
+{{/and}}