Fixed active facets tap target and drawer scrolling (Shopify#98)

* Filtering - Fixed a11y issue with tap targets on active filters * Added drawer functionality to handle overflow changes at different breakpoints
satyaji · Jul 7, 2021 · 197475c · 197475c
1 parent 9a2787f
commit 197475c
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 29 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2061,6 +2061,7 @@ details[open] > .header__icon--menu .icon-hamburger {
 details-disclosure > details {
   position: relative;
 }
+
 @keyframes animateMenuOpen {
   0% {
     opacity: 0;
@@ -2072,3 +2073,20 @@ details-disclosure > details {
     transform: translateY(0);
   }
 }
+
+.overflow-hidden-mobile,
+.overflow-hidden-tablet {
+  overflow: hidden;
+}
+
+@media screen and (min-width: 750px) {
+  .overflow-hidden-mobile {
+    overflow: auto;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .overflow-hidden-tablet {
+    overflow: auto;
+  }
+}
diff --git a/assets/collection-filters-form.js b/assets/collection-filters-form.js
@@ -24,7 +24,7 @@ class CollectionFiltersForm extends HTMLElement {
   onActiveFilterClick(event) {
     event.preventDefault();
     this.toggleActiveFacets();
-    this.renderPage(new URL(event.target.href).searchParams.toString());
+    this.renderPage(new URL(event.currentTarget.href).searchParams.toString());
   }
 
   onHistoryChange(event) {

diff --git a/assets/global.js b/assets/global.js
@@ -289,7 +289,7 @@ class MenuDrawer extends HTMLElement {
     });
     summaryElement.setAttribute('aria-expanded', true);
     trapFocus(this.mainDetailsToggle, summaryElement);
-    document.body.classList.add('overflow-hidden-mobile');
+    document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
   }
 
   closeMenuDrawer(event, elementToFocus = false) {
@@ -300,7 +300,7 @@ class MenuDrawer extends HTMLElement {
         details.classList.remove('menu-opening');
       });
       this.mainDetailsToggle.querySelector('summary').setAttribute('aria-expanded', false);
-      document.body.classList.remove('overflow-hidden-mobile');
+      document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`);
       removeTrapFocus(elementToFocus);
       this.closeAnimation(this.mainDetailsToggle);
     }
@@ -365,7 +365,7 @@ class HeaderDrawer extends MenuDrawer {
 
     summaryElement.setAttribute('aria-expanded', true);
     trapFocus(this.mainDetailsToggle, summaryElement);
-    document.body.classList.add('overflow-hidden-mobile');
+    document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
   }
 }
 

diff --git a/assets/template-collection.css b/assets/template-collection.css
@@ -349,44 +349,73 @@ button.facets__button {
   grid-row: 2;
 }
 
-a.active-facets__button {
+.active-facets__button {
+  padding: 1.1rem 0.2rem;
+  text-decoration: none;
+  margin-left: 0.5rem
+}
+
+span.active-facets__button-inner {
   color: var(--color-foreground);
   box-shadow: 0 0 0 0.1rem var(--color-foreground);
   border-radius: 2.6rem;
-  font-size: 1.2rem;
+  font-size: 1rem;
   min-height: 0;
   min-width: 0;
   padding: 0.5rem 1rem;
-  margin: 0 0 1rem 1rem;
+  display: flex;
+  align-items: center;
 }
 
-a.active-facets__button {
-  box-shadow: 0 0 0 0.1rem var(--color-foreground);
+@media screen and (min-width: 990px) {
+  .active-facets__button {
+    padding: 0;
+    margin: 0 0 1rem 1rem;
+  }
+
+  span.active-facets__button-inner {
+    font-size: 1.2rem;
+  }
 }
 
-a.active-facets__button:hover {
+.active-facets__button:hover .active-facets__button-inner {
   box-shadow: 0 0 0 0.2rem var(--color-foreground);
 }
 
-a.active-facets__button--light {
+.active-facets__button--light .active-facets__button-inner {
   box-shadow: 0 0 0 0.1rem var(--color-foreground-20);
 }
 
-a.active-facets__button--light:hover {
+.active-facets__button--light:hover .active-facets__button-inner {
   box-shadow: 0 0 0 0.2rem var(--color-foreground-40);
 }
 
 a.active-facets__button:focus-visible,
 a.active-facets__button:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+a.active-facets__button:focus-visible .active-facets__button-inner,
+a.active-facets__button:focus .active-facets__button-inner {
   box-shadow: 0 0 0 0.1rem var(--color-foreground-20),
     0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
   outline: none;
 }
 
 .active-facets__button svg {
-  width: 1.4rem;
+  width: 1.2rem;
   margin-left: 0.6rem;
   pointer-events: none;
+  position: relative;
+  top: 0.1rem;
+}
+
+@media all and (min-width: 990px) {
+  .active-facets__button svg {
+    width: 1.4rem;
+    position: static;
+  }
 }
 
 .active-facets__button:only-child {
@@ -447,11 +476,12 @@ a.active-facets__button:focus {
 
 .mobile-facets__wrapper {
   margin-left: 0;
-  margin-bottom: 3rem;
+  margin-bottom: 1rem;
 }
 
 .mobile-facets__wrapper .disclosure-has-popup[open] > summary::before {
   height: 100vh;
+  z-index: 3;
 }
 
 @media screen and (min-width: 750px) {

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -75,7 +75,7 @@
 <{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
   <header class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %}">
     {%- if section.settings.menu != blank -%}
-      <header-drawer>
+      <header-drawer data-breakpoint="tablet">
         <details class="menu-drawer-container">
           <summary class="header__icon header__icon--menu header__icon--summary link link--text focus-inset" aria-label="{{ 'sections.header.menu' | t }}">
             <span>

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
@@ -140,19 +140,25 @@
           </div>
 
           <div class="active-facets active-facets-desktop">
-            <a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button button button--secondary js-facet-remove">{{ 'sections.collection_template.clear_all' | t }}</a>
+            <a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button js-facet-remove">
+              <span class="active-facets__button-inner button button--secondary">{{ 'sections.collection_template.clear_all' | t }}</span>
+            </a>
             {%- for filter in collection.filters -%}
               {%- for value in filter.active_values -%}
-                <a class="active-facets__button active-facets__button--light button button--tertiary js-facet-remove" href="{{ value.url_to_remove }}">
-                  {{ value.label | escape }}
-                  {% render 'icon-close-small' %}
+                <a class="active-facets__button active-facets__button--light js-facet-remove" href="{{ value.url_to_remove }}">
+                  <span class="active-facets__button-inner button button--tertiary">
+                    {{ value.label | escape }}
+                    {% render 'icon-close-small' %}
+                  </span>
                 </a>
               {%- endfor -%}
               {% if filter.type == "price_range" %}
                 {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
-                  <a class="active-facets__button active-facets__button--light button button--tertiary js-facet-remove" href="{{ filter.url_to_remove }}">
-                    {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
-                    {% render 'icon-close-small' %}
+                  <a class="active-facets__button active-facets__button--light js-facet-remove" href="{{ filter.url_to_remove }}">
+                    <span class="active-facets__button-inner button button--tertiary">
+                      {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
+                      {% render 'icon-close-small' %}
+                    </span>
                   </a>
                 {%- endif -%}
               {% endif %}
@@ -186,7 +192,7 @@
         {%- endif -%}
       </form>
     </collection-filters-form>
-    <menu-drawer class="mobile-facets__wrapper">
+    <menu-drawer class="mobile-facets__wrapper" data-breakpoint="mobile">
       <details class="disclosure-has-popup medium-hide large-up-hide">
         <summary>
           <span class="mobile-facets__open button button--secondary">
@@ -361,20 +367,28 @@
     </menu-drawer>
 
     <div class="active-facets active-facets-mobile">
-      <a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button button button--secondary js-facet-remove">{{ 'sections.collection_template.clear_all' | t }}</a>
+      <a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button js-facet-remove">
+        <span class="active-facets__button-inner button button--secondary">
+          {{ 'sections.collection_template.clear_all' | t }}
+        </span>
+      </a>
       {%- for filter in collection.filters -%}
         {%- for value in filter.active_values -%}
-          <a class="active-facets__button active-facets__button--light button button--tertiary js-facet-remove" href="{{ value.url_to_remove }}">
-            {{ value.label | escape }}
-            {% render 'icon-close-small' %}
+          <a class="active-facets__button active-facets__button--light js-facet-remove" href="{{ value.url_to_remove }}">
+            <span class="active-facets__button-inner button button--tertiary">
+              {{ value.label | escape }}
+              {% render 'icon-close-small' %}
+            </span>
           </a>
         {%- endfor -%}
 
         {% if filter.type == "price_range" %}
           {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
             <a class="active-facets__button active-facets__button--light button button--tertiary js-facet-remove" href="{{ filter.url_to_remove }}">
-              {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
-              {% render 'icon-close-small' %}
+              <span class="active-facets__button-inner button button--tertiary">
+                {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
+                {% render 'icon-close-small' %}
+              </span>
             </a>
           {%- endif -%}
         {% endif %}