fix(storefront): BCTHEME-1768 ADA Compliance - Accordion buttons are …

…not read by screen reader correctly (bigcommerce#2441)

CHANGELOG.md

@@ -5,15 +5,16 @@ 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
-- Legion requires additional ARIA markup to assist screen reader users [#2435](https://github.com/bigcommerce/cornerstone/pull/2435)
-- Page Suggested Items still listed on Cornerstone [#2438](https://github.com/bigcommerce/cornerstone/pull/2438)
+- ADA Compliance - Accordion buttons are not read by screen reader correctly [#2441](https://github.com/bigcommerce/cornerstone/pull/2441)
+- ADA Compliance - Region requires additional ARIA markup to assist screen reader users [#2435](https://github.com/bigcommerce/cornerstone/pull/2435)
 - 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)
+- Page Suggested Items still listed on Cornerstone [#2438](https://github.com/bigcommerce/cornerstone/pull/2438)
 - 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)
 

assets/scss/components/foundation/accordion/_accordion.scss

@@ -62,6 +62,12 @@
         }
     }
 
+    .accordion-heading {
+        font-size: fontSize("base");
+        line-height: lineHeight("smaller");
+        margin: 0;
+    }
+
     .accordion-content {
         padding: $accordion-navList-padding;
 

templates/components/faceted-search/faceted-search-navigation.html

@@ -1,4 +1,4 @@
-<div class="accordion-nav-clear-holder">
+<h2 class="accordion-heading accordion-nav-clear-holder">
     <button type="button"
          class="accordion-navigation toggleLink{{#unless start_collapsed}} is-open{{/unless}}"
          data-collapsible="#facetedSearch-content--{{dashcase facet}}"
@@ -20,4 +20,4 @@
     {{#if selected}}
         <a href="{{remove_url}}" class="facetedSearch-clearLink" data-faceted-search-facet>{{lang 'search.faceted.clear'}}</a>
     {{/if}}
-</div>
+</h2>