Adjust global focus styles for inputs, selects and collection filter …

…UI elements (Shopify#389) * Adjust global focus styles for inputs, selects and collection filter UI elements * Fix focus for filter drawer summary elements * Simplify focus for elements that are always "focus-visible" when in focus * Adjust focus style of search submit button
tairli · Aug 18, 2021 · a6d25cf · a6d25cf
1 parent 002b6b0
commit a6d25cf
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 26 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -733,6 +733,25 @@ summary::-webkit-details-marker {
   outline: 0 !important;
 }
 
+.focus-offset:focus-visible {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  outline-offset: 1rem;
+  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
+    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
+}
+
+.focus-offset:focus {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  outline-offset: 1rem;
+  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
+    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
+}
+
+.focus-offset:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
 /* component-title */
 .title,
 .title-wrapper-with-link {
@@ -1323,20 +1342,13 @@ details[open] > .share-button__fallback {
   box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.55);
 }
 
-.field__input:focus-visible,
-.select__select:focus-visible,
-.field input:focus-visible {
-  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55),
-    0 0 0 0.3rem rgb(var(--color-background)),
-    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
-}
-
 .field__input:focus,
 .select__select:focus,
-.field input:focus {
-  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55),
-    0 0 0 0.3rem rgb(var(--color-background)),
-    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
+.customer .field input:focus,
+.customer select:focus,
+.localization-form__select:focus {
+  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
+  outline: transparent;
 }
 
 .text-area,

diff --git a/assets/template-collection.css b/assets/template-collection.css
@@ -171,14 +171,40 @@
   text-decoration: none;
 }
 
-.collection-filters .collection-filters__sort {
-  box-shadow: none;
+.collection-filters__sort {
   font-size: 1.3rem;
   height: auto;
   padding-left: 0;
   padding-right: 1.75rem;
 }
 
+.collection-filters__sort,
+.collection-filters__sort:hover {
+  box-shadow: none;
+}
+
+.collection-filters__sort:focus-visible,
+.mobile-facets__sort .select__select:focus-visible {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  outline-offset: 1rem;
+  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
+    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
+}
+
+.collection-filters__sort:focus,
+.mobile-facets__sort .select__select:focus  {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  outline-offset: 1rem;
+  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
+    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
+}
+
+.collection-filters__sort:focus:not(:focus-visible),
+.mobile-facets__sort .select__select:focus:not(:focus-visible)  {
+  outline: 0;
+  box-shadow: none;
+}
+
 .collection-filters__sort + .icon-caret {
   right: 0;
 }
@@ -259,8 +285,8 @@
   background-color: rgb(var(--color-background));
   position: absolute;
   border: 1px solid rgba(var(--color-foreground), 0.2);
-  top: calc(100% + 0.25rem);
-  left: -0.1rem;
+  top: calc(100% + 0.5rem);
+  left: -1.2rem;
   width: 35rem;
   max-height: 55rem;
   overflow-y: auto;
@@ -616,8 +642,8 @@ a.active-facets__button:focus .active-facets__button-inner {
 .mobile-facets__open {
   text-align: left;
   width: 100%;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   display: flex;
   align-items: center;
   color: rgba(var(--color-link), var(--alpha-link));

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -369,7 +369,7 @@
                   <input class="search__input field__input" id="Search-In-Modal" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.search' | t }}">
                   <label class="field__label" for="Search-In-Modal">{{ 'general.search.search' | t }}</label>
                   <input type="hidden" name="options[prefix]" value="last">
-                  <button class="search__button field__button focus-inset" aria-label="{{ 'general.search.search' | t }}">
+                  <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
                     <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
                       <use href="#icon-search">
                     </svg>

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
@@ -30,7 +30,7 @@
                 {% case filter.type %}
                 {% when 'list' %}
                   <details class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}">
-                    <summary class="facets__summary caption-large">
+                    <summary class="facets__summary caption-large focus-offset">
                       <div>
                         <span>{{ filter.label | escape }}</span>
                         {% render 'icon-caret' %}
@@ -93,7 +93,7 @@
                     endif
                   %}
                   <details class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}">
-                    <summary class="facets__summary caption-large">
+                    <summary class="facets__summary caption-large focus-offset">
                       <div>
                         <span>{{ filter.label | escape }}</span>
                         {% render 'icon-caret' %}
@@ -234,7 +234,7 @@
 
     <menu-drawer class="mobile-facets__wrapper {% unless section.settings.collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}" data-breakpoint="mobile">
       <details class="mobile-facets__disclosure disclosure-has-popup">
-        <summary class="mobile-facets__open-wrapper">
+        <summary class="mobile-facets__open-wrapper focus-offset">
           <span class="mobile-facets__open">
             {% render 'icon-filter' %}
             <span class="mobile-facets__open-label button-label">{{ 'sections.collection_template.filter_and_sort' | t }}</span>
@@ -255,7 +255,7 @@
                   {% case filter.type %}
                   {% when 'list' %}
                     <details class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
-                      <summary class="mobile-facets__summary">
+                      <summary class="mobile-facets__summary focus-inset">
                         <div>
                           <span>{{ filter.label | escape }}</span>                        
                           <span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>
@@ -303,7 +303,7 @@
                     </details>
                   {% when 'price_range' %}
                     <details class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
-                      <summary class="mobile-facets__summary">
+                      <summary class="mobile-facets__summary focus-inset">
                         <div>
                           <span>{{ filter.label | escape }}</span>
                           <span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>

diff --git a/sections/main-search.liquid b/sections/main-search.liquid
@@ -64,7 +64,7 @@
           >
           <label class="field__label" for="Search-In-Template" aria-hidden="true">{{ 'general.search.search' | t }}</label>
           <input name="options[prefix]" type="hidden" value="last">
-          <button type="submit" class="search__button field__button focus-inset" aria-label="{{ 'general.search.search' | t }}">
+          <button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
             <svg class="icon icon-search">
               <use xlink:href="#icon-search">
             </svg>

diff --git a/snippets/icon-filter.liquid b/snippets/icon-filter.liquid
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-filter" fill="none" viewBox="0 0 20 41">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-filter" fill="none" viewBox="0 11 20 20">
   <line x1="16.5" y1="17.5" x2="3.5" y2="17.5" stroke="#3F7972" stroke-linecap="round"/>
   <line x1="16.5" y1="24.5" x2="3.5" y2="24.5" stroke="#3F7972" stroke-linecap="round"/>
   <circle cx="13" cy="24.5" r="2" fill="white" stroke="#3F7972"/>