fix(storefront): BCTHEME-222 Rating and Other filter sections are not…

… accessible by keyboard (#1838)
bigcommerce · Oct 21, 2020 · 5780596 · 5780596
1 parent 9afd863
commit 5780596
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 68 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,8 @@
 # Changelog
 
-- Fixed header logo focus border for voiceover and browser. [#1831](https://github.com/bigcommerce/cornerstone/pull/1831)
-
 ## Draft
+- Rating and Other filter sections should be accessible by keyboard. [#1838](https://github.com/bigcommerce/cornerstone/pull/1838)
+- Fixed header logo focus border for voiceover and browser. [#1831](https://github.com/bigcommerce/cornerstone/pull/1831)
 - Unified browsers list that we support. [#1836](https://github.com/bigcommerce/cornerstone/pull/1836)
 - Bump stencil utils and update hooks to account for refactor to drop Jquery in stencil utils [#1821](https://github.com/bigcommerce/cornerstone/pull/1821)
 

diff --git a/assets/js/theme/common/collapsible.js b/assets/js/theme/common/collapsible.js
@@ -81,10 +81,11 @@ export class Collapsible {
 
         // Assign DOM attributes
         this.$target.attr('aria-hidden', this.isCollapsed);
-        this.$toggle
-            .attr('aria-label', $toggle.text().trim())
-            .attr('aria-controls', $target.attr('id'))
-            .attr('aria-expanded', this.isOpen);
+        this.$toggle.attr('aria-controls', $target.attr('id')).attr('aria-expanded', this.isOpen);
+
+        if (!this.$toggle.attr('aria-label')) {
+            this.$toggle.attr('aria-label', $toggle.text().trim());
+        }
 
         // Listen
         this.bindEvents();

diff --git a/assets/js/theme/common/faceted-search.js b/assets/js/theme/common/faceted-search.js
@@ -7,6 +7,23 @@ import collapsibleFactory from './collapsible';
 import { Validators } from './utils/form-utils';
 import nod from './nod';
 
+const defaultOptions = {
+    accordionToggleSelector: '#facetedSearch .accordion-navigation, #facetedSearch .facetedSearch-toggle',
+    blockerSelector: '#facetedSearch .blocker',
+    clearFacetSelector: '#facetedSearch .facetedSearch-clearLink',
+    componentSelector: '#facetedSearch-navList',
+    facetNavListSelector: '#facetedSearch .navList',
+    priceRangeErrorSelector: '#facet-range-form .form-inlineMessage',
+    priceRangeFieldsetSelector: '#facet-range-form .form-fieldset',
+    priceRangeFormSelector: '#facet-range-form',
+    priceRangeMaxPriceSelector: '#facet-range-form [name=max_price]',
+    priceRangeMinPriceSelector: '#facet-range-form [name=min_price]',
+    showMoreToggleSelector: '#facetedSearch .accordion-content .toggleLink',
+    facetedSearchFilterItems: '#facetedSearch-filterItems .form-input',
+    modal: modalFactory('#modal')[0],
+    modalOpen: false,
+};
+
 /**
  * Faceted search view component
  */
@@ -32,23 +49,6 @@ class FacetedSearch {
      * let facetedSearch = new FacetedSearch(requestOptions, templatesDidLoad);
      */
     constructor(requestOptions, callback, options) {
-        const defaultOptions = {
-            accordionToggleSelector: '#facetedSearch .accordion-navigation, #facetedSearch .facetedSearch-toggle',
-            blockerSelector: '#facetedSearch .blocker',
-            clearFacetSelector: '#facetedSearch .facetedSearch-clearLink',
-            componentSelector: '#facetedSearch-navList',
-            facetNavListSelector: '#facetedSearch .navList',
-            priceRangeErrorSelector: '#facet-range-form .form-inlineMessage',
-            priceRangeFieldsetSelector: '#facet-range-form .form-fieldset',
-            priceRangeFormSelector: '#facet-range-form',
-            priceRangeMaxPriceSelector: '#facet-range-form [name=max_price]',
-            priceRangeMinPriceSelector: '#facet-range-form [name=min_price]',
-            showMoreToggleSelector: '#facetedSearch .accordion-content .toggleLink',
-            facetedSearchFilterItems: '#facetedSearch-filterItems .form-input',
-            modal: modalFactory('#modal')[0],
-            modalOpen: false,
-        };
-
         // Private properties
         this.requestOptions = requestOptions;
         this.callback = callback;

diff --git a/assets/scss/components/foundation/accordion/_accordion.scss b/assets/scss/components/foundation/accordion/_accordion.scss
@@ -23,12 +23,19 @@
 .accordion-title {
     font-size: remCalc(15px);
     margin: 0;
+    color: stencilColor("color-textHeading");
+    font-family: "Montserrat", Arial, Helvetica, sans-serif;
 }
 
 .accordion-navigation {
-    margin-top: -1px;
     position: relative;
     text-decoration: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding-right: 1rem;
 }
 
 
@@ -64,11 +71,11 @@
     }
 
     .accordion-navigation {
-        padding-right: 70px;
         @include breakpoint("medium") {
             background-position: right 0 top 50%;
             border: 0;
-            padding-right: 50px;
+            margin-bottom: spacing("half") !important;
+            padding: 0;
         }
     }
 
@@ -79,25 +86,13 @@
         text-transform: inherit;
 
         @include breakpoint("medium") {
-            margin-bottom: spacing("half");
-            margin-top: 0;
             padding: 0;
         }
     }
 
     .accordion-indicator {
         fill: color("greys", "light");
     }
-
-    .accordion-navigation-actions {
-        right: $accordion-navList-padding;
-        top: $accordion-navList-padding + spacing("eighth");
-
-        @include breakpoint("medium") {
-            right: 0;
-            top: 0;
-        }
-    }
 }
 
 
@@ -132,18 +127,6 @@
     }
 }
 
-// Accordion navigation actions
-// -----------------------------------------------------------------------------
-//
-// Purpose: Action links, usually aligned to the right of .accordion-navigation
-//
-// -----------------------------------------------------------------------------
-.accordion-navigation-actions {
-    position: absolute;
-    right: $accordion-navigation-paddingHorizontal;
-    top: $accordion-navigation-paddingVertical;
-}
-
 .accordion-nav-clear-holder {
     position: relative;
 }

diff --git a/lang/en.json b/lang/en.json
@@ -844,6 +844,7 @@
             "rating": {
                 "and-up": "& up"
             },
+            "toggleSection": "Toggle {title} filter section",
             "clear": "Clear",
             "more": "More",
             "show-more": "Show More",

diff --git a/templates/components/faceted-search/faceted-search-navigation.html b/templates/components/faceted-search/faceted-search-navigation.html
@@ -1,21 +1,22 @@
 <div class="accordion-nav-clear-holder">
-    <div
-        class="accordion-navigation toggleLink{{#unless start_collapsed}} is-open{{/unless}}"
-        role="button"
-        data-collapsible="#facetedSearch-content--{{dashcase facet}}">
-        <h5 class="accordion-title">
+    <button type="button"
+         class="accordion-navigation toggleLink{{#unless start_collapsed}} is-open{{/unless}}"
+         data-collapsible="#facetedSearch-content--{{dashcase facet}}"
+         aria-label="{{lang 'search.faceted.toggleSection' title=title}}"
+    >
+        <span class="accordion-title">
             {{title}}
-        </h5>
+        </span>
 
-        <div class="accordion-navigation-actions">
+        <span>
             <svg class="icon accordion-indicator toggleLink-text toggleLink-text--off">
                 <use xlink:href="#icon-add" />
             </svg>
             <svg class="icon accordion-indicator toggleLink-text toggleLink-text--on">
                 <use xlink:href="#icon-remove" />
             </svg>
-        </div>
-    </div>
+        </span>
+    </button>
     {{#if selected}}
         <a href="{{remove_url}}" class="facetedSearch-clearLink" data-faceted-search-facet>{{lang 'search.faceted.clear'}}</a>
     {{/if}}

diff --git a/templates/components/faceted-search/index.html b/templates/components/faceted-search/index.html
@@ -30,9 +30,9 @@
     </a>
 
     {{#any facets visible=true}}
-        <div
-            id="facetedSearch-navList"
-            class="facetedSearch-navList blocker-container">
+        <div id="facetedSearch-navList"
+            class="facetedSearch-navList"
+        >
             <div class="accordion accordion--navList">
                 {{#each facets}}
                     {{#if visible}}

diff --git a/templates/components/faceted-search/selected-facets.html b/templates/components/faceted-search/selected-facets.html
@@ -7,11 +7,11 @@ <h2 class="sidebarBlock-heading">
         <ul class="inlineList inlineList--labels">
             {{#each items}}
                 <li>
-                    <a
-                        href="{{url}}"
-                        class="facetLabel"
-                        rel="nofollow"
-                        data-faceted-search-facet>
+                    <a href="{{url}}"
+                       class="facetLabel"
+                       rel="nofollow"
+                       data-faceted-search-facet
+                    >
                         {{#if facet '===' 'rating'}}
                             {{lang 'search.faceted.selected.rating-label' rating=title}}
                         {{else}}
@@ -26,7 +26,7 @@ <h2 class="sidebarBlock-heading">
             {{/each}}
         </ul>
     {{else}}
-        <p> {{lang 'search.faceted.selected.no-filters'}} </p>
+        <p>{{lang 'search.faceted.selected.no-filters'}}</p>
     {{/if}}
 
     {{#if remove_all_url}}