Skip to content

Commit

Permalink
TMS-935: Archive filter accessibility fixes (#38)
Browse files Browse the repository at this point in the history
* TMS-935: Archive filter accessibility fixes

* Update PR-template
  • Loading branch information
eebbi authored Nov 20, 2023
1 parent 73b58c1 commit d6418ac
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 19 deletions.
4 changes: 3 additions & 1 deletion .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
CR: TMS-628
Severa-ID: 2108
Severa-kuvaus:
Task: https://hiondigital.atlassian.net/browse/TMS-

<!--- Provide a general summary of your changes in the Title above -->

Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
## [1.2.0] - 2023-11-21

- TMS-974: Recurring event layout changes
- TMS-935: Archive filter accessibility fixes

## [1.1.7] - 2023-10-23

Expand Down
9 changes: 7 additions & 2 deletions assets/styles/ui-components/_archive-filters.scss
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,24 @@
.archive-filters {
&__select-container {
display: flex;
flex-direction: column;
flex-direction: column-reverse;
gap: $theme-spacing-oneandhalf;

@include until($tablet) {
width: 100%;
}

@include from($tablet) {
flex-direction: row;
flex-direction: unset;
flex-wrap: wrap-reverse;
}

select {
width: 100%;
}
}

&__description {
width: 100%;
}
}
37 changes: 21 additions & 16 deletions partials/views/home/home-filters.dust
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<div class="archive-filters columns mt-6">
<div class="column is-8">
<div class="column is-8" aria-labelledby="filter">
{?filters.categories}
<div class="h6 mb-4">
{Strings.s.home.filter_by_category|s}
<div class="h6 mb-4" id="filter">
{Strings.s.home.filter_by_category|html}
</div>

<div>
{#filters.categories}
<a href="{url}"
class="pill mr-2 mb-2 {^is_active}is-primary-invert{/is_active}">
<a href="{url|url}"
class="pill mr-2 mb-2 {^is_active}is-primary-invert{/is_active}" {?is_active}aria-current="true"{/is_active}>
{?is_active}
{>"ui/icon" icon="checkmark" class="icon--medium mr-2 is-primary-invert" /}
{/is_active}

{name|s}
{name|html}
</a>
{/filters.categories}
</div>
Expand All @@ -23,38 +23,43 @@
<div class="column is-4">
<form action="" method="get" class="is-flex is-justify-content-flex-end archive-filters__form">
{?filters.active_category}
<input name="filter-category" type="hidden" value="{filters.active_category|s}">
<input name="filter-category" type="hidden" value="{filters.active_category|attr}">
{/filters.active_category}

<div class="archive-filters__select-container">
<div class="archive-filters__select-container" aria-describedby="archive-filters-description">

<p class="archive-filters__description" id="archive-filters-description">
{Strings.s.home.description|html}
</p>

<div class="archive-filters__dropdown-item">
<label for="filter-year" class="is-block h6 mb-4">
{Strings.s.home.year|s}
{Strings.s.home.year|html}
</label>

<select name="filter-year" id="filter-year"
class="js-trigger-form-submit p-2 has-background-invert has-border-radius-small has-border-gray has-border-1">
<option value="">{Strings.s.common.all|s}</option>
<option value="">{Strings.s.common.all|html}</option>

{#filters.years}
<option value="{key}" {is_selected|s}>
{name|s}
<option value="{key|attr}" {is_selected|attr}>
{name|html}
</option>
{/filters.years}
</select>
</div>

<div class="archive-filters__dropdown-item">
<label for="filter-month" class="is-block h6 mb-4">
{Strings.s.home.month|s}
{Strings.s.home.month|html}
</label>

<select name="filter-month" id="filter-month"
class="js-trigger-form-submit p-2 has-border-radius-small has-border-gray has-border-1">
<option value="">{Strings.s.common.all|s}</option>
<option value="">{Strings.s.common.all|html}</option>
{#filters.months}
<option value="{key}" {is_selected|s}>
{name|s}
<option value="{key|attr}" {is_selected|attr}>
{name|html}
</option>
{/filters.months}
</select>
Expand Down

0 comments on commit d6418ac

Please sign in to comment.