Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed active facets tap target and drawer scrolling #98

Merged
merged 4 commits into from
Jul 7, 2021
Merged

Fixed active facets tap target and drawer scrolling #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1c8b5f9
Filtering - Fixed a11y issue with tap target
tyleralsbury Jun 30, 2021
21f04cf
Added drawer functionality to handle overflow changes at different br…
tyleralsbury Jul 5, 2021
da576a5
Adjustments
tyleralsbury Jul 7, 2021
7032dbd
Adjustments
tyleralsbury Jul 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2061,6 +2061,7 @@ details[open] > .header__icon--menu .icon-hamburger {
details-disclosure > details {
position: relative;
}

@keyframes animateMenuOpen {
0% {
opacity: 0;
Expand All @@ -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;
}
}
2 changes: 1 addition & 1 deletion assets/collection-filters-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
6 changes: 3 additions & 3 deletions assets/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
}
Expand Down Expand Up @@ -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}`);
}
}

Expand Down
50 changes: 40 additions & 10 deletions assets/template-collection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion sections/header.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
42 changes: 28 additions & 14 deletions sections/main-collection-product-grid.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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 -%}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On Safari, the background is still scrollable: https://screenshot.click/05-51-wiacu-ueec2.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's weird. Version? It seems to be working as far as I can tell.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't been able to reproduce it 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎩 Magic!
🧚

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't replicate anymore on my iPad either. 👍

{% endif %}
Expand Down