Skip to content

Commit

Permalink
Refactors trln/local toggle for accessibility. Fixes TD-1403.
Browse files Browse the repository at this point in the history 
- Removes label element, not appropriate for buttons so WAVE flags as violation
- Reduces CSS complexity by using flexbox & BS5 styles
- Improves keyboard accessibility; focus ring now surrounds focused button
- Makes the element look more like a connected toggle, esp. when vertically stacked
- Removes unused cruft
- Restyles so the present scope is gray and the scope you can toggle to looks like a link (was backward before)
  • Loading branch information
@seanaery
seanaery committed Dec 17, 2024
1 parent 4032d96 commit adff78e
Show file tree
Hide file tree
Showing 8 changed files with 118 additions and 257 deletions.
4 changes: 2 additions & 2 deletions app/assets/javascripts/trln_argon/results_count_for_toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ Blacklight.onLoad(function() {
}
}

fetch_and_display_toggle_count($('.blacklight-catalog-index #trln-toggle .toggle-trln label'));
fetch_and_display_toggle_count($('.blacklight-trln-index #trln-toggle .toggle-local label'));
fetch_and_display_toggle_count($('.blacklight-catalog-index #trln-toggle .toggle-trln .toggle-label'));
fetch_and_display_toggle_count($('.blacklight-trln-index #trln-toggle .toggle-local .toggle-label'));
});
265 changes: 82 additions & 183 deletions app/assets/stylesheets/trln_argon/trln_argon_shared.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,227 +657,126 @@ ul.blacklight-facet-checkboxes {
color: $secondary-color;
}


/* TRLN vs. Local Scope Toggle */
/* --------------------------- */
#viewAllResults {

text-align: center;
margin-bottom: 1em;

.toggle {

display: inline-block;
width: 45%;
overflow: hidden;

a {
display: block;
}

label {
display: none;
cursor: pointer;
.toggle-wrapper {
@include media-breakpoint-down(md) {
display: flex;
justify-content: center;
}
}

&.toggle-local {
text-align: right;
margin-right: -2px;
.toggle-logo {
border-radius: var(--bs-border-radius);
border: var(--bs-border-width) solid var(--bs-border-color-translucent);
.icon-wrapper {
width: 26px;
height: 40px;
background: transparent no-repeat left;
}
}

&.toggle-trln {
text-align: left;
margin-left: -2px;
.toggle button {
&.active, &:active {
.toggle-logo {
@include button-variant($primary, $primary);
background: var(--bs-btn-bg);
}
}

.btn-outline-secondary {

&:hover,
&:not(:disabled):not(.disabled):active,
&:focus {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
&:hover:not(.active):not(:active), {
.toggle-logo {
background-color: var(--bs-secondary-bg-subtle);
}
}

}

.icon-wrapper {
width: 26px;
height: 40px;
display: block;
}

#toggle-trln-btn-top,
#toggle-local-btn-top,
#toggle-trln-btn-bottom,
#toggle-local-btn-bottom {
padding-left: 24px;
padding-right: 24px;
}

#toggle-trln-btn-top,
#toggle-trln-btn-bottom {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.toggle-local {
.toggle-logo {
@include media-breakpoint-up(md) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@include media-breakpoint-down(md) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.icon-wrapper {
background-image: image_url($institution-icon);
}
}

#toggle-local-btn-top,
#toggle-local-btn-bottom {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.toggle-trln {
.toggle-logo {
@include media-breakpoint-up(md) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@include media-breakpoint-down(md) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.icon-wrapper {
background-image: image_url($trln-icon-inverted);
}
}

#toggle-trln-btn-top .icon-wrapper,
#toggle-trln-btn-bottom .icon-wrapper {
background: transparent image_url($trln-icon-inverted) no-repeat left;
.toggle-label {
line-height: 1.1;
font-weight: normal;
text-decoration: none;
color: $primary-link-color;
@include media-breakpoint-down(md) {
display: none !important;
}
}

#toggle-local-btn-top .icon-wrapper,
#toggle-local-btn-bottom .icon-wrapper {
background: transparent image_url($institution-icon) no-repeat left;
button.active .toggle-label {
font-weight: bold;
color: #767676;
}

body.blacklight-catalog & {

#toggle-trln-btn-top .icon-wrapper,
#toggle-trln-btn-bottom .icon-wrapper {
background: transparent image_url($trln-icon) no-repeat left;
.toggle-local .icon-wrapper {
background-image: image_url($institution-icon-inverted);
}

#toggle-local-btn-top .icon-wrapper,
#toggle-local-btn-bottom .icon-wrapper {
background: transparent image_url($institution-icon-inverted) no-repeat left;
}

}

}

@include media-breakpoint-up(md) {

#viewAllResults {

text-align: left;

.toggle {

display: block;
width: 100%;
overflow: hidden;

&.toggle-local,
&.toggle-trln {
margin: 0;
}

&.toggle-local {
text-align: left;
}

.btn {
margin-right: 7px;
}

#toggle-trln-btn-top,
#toggle-local-btn-top,
#toggle-trln-btn-bottom,
#toggle-local-btn-bottom {
padding-left: 12px;
padding-right: 12px;
display: inline-block;
}

#toggle-trln-btn-top,
#toggle-trln-btn-bottom {
border-radius: 4px;
}

#toggle-local-btn-top,
#toggle-local-btn-bottom {
border-radius: 4px;
}

label {
max-width: calc(100% - 65px);
line-height: 1.1;
display: inline-block;
vertical-align: middle;
font-weight: normal;
color: #767676;

&.active {
font-weight: bold;
color: $primary-link-color;
}

}

a:hover label {
color: $primary-link-color;
}

.toggle-trln .icon-wrapper {
background-image: image_url($trln-icon);
}

}

}

#viewAllResultsEnd {

margin-top: 1em;

.toggle-wrapper {
display: table;
display: flex;
justify-content: center;
align-items: center;
}

.btn {
display: none;
.toggle-logo {
display: none !important;
}

.toggle {
width: 45%;
display: table-cell;
vertical-align: middle;

&.toggle-local {
text-align: right;
border-right: 2px solid #ccc;
padding-right: 2px;
}

&.toggle-trln {
text-align: left;
}

label {
padding: 10px;
cursor: pointer;
}

a:hover label {
color: $primary-link-color;
text-decoration: underline;
}

.toggle-divider {
border-right: 2px solid var(--bs-border-color);
min-height: 30px;
}

label {

line-height: 1.2;
.toggle-label {
line-height: 1.1;
font-weight: normal;
color: #767676;

&.active {
font-weight: bold;
color: $primary-link-color;
}

color: $primary-link-color;
}

button.active .toggle-label {
font-weight: bold;
color: #767676;
}
}



/* =============== */
/* ELEMENTS */
/* =============== */
Expand Down
2 changes: 1 addition & 1 deletion app/components/trln_argon/search/sidebar_component.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</div>
<div id="trln-toggle" class="sidenav facets top-panel-heading">
<div id="viewAllResults" class="clearfix" role="navigation" aria-label="Searching (context)">
<div id="viewAllResults" class="mb-2" role="navigation" aria-label="Searching (context)">
<%= render 'catalog/local_filter',
filter_label_id: 'localFilterLabelFacets',
local_button_id: 'toggle-local-btn-top',
Expand Down
48 changes: 27 additions & 21 deletions app/views/catalog/_local_filter.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,32 @@
<% query_state.delete('page') %>
<% query_state.fetch('f', {}).delete(TrlnArgon::Fields::LOCATION_HIERARCHY_FACET.to_s) %>

<div class="toggle toggle-local">
<%= button_tag(type: "button", id: local_button_id, class: "btn btn-md #{local_search_button_class}",
title: "#{t('trln_argon.local_filter.search_verb')} #{t('trln_argon.local_filter.searching_local', local_institution_name: institution_long_name)}",
onclick: "window.location='#{search_catalog_path(query_state)}'") do %>
<span class="visually-hidden">icon</span><span class="icon-wrapper"></span>
<% end %>
<div class="toggle-wrapper">
<div class="toggle toggle-local">
<%= button_tag(type: "button", id: local_button_id, class: "btn btn-link d-flex p-0 text-decoration-none border-0 #{local_search_button_class}",
title: "#{t('trln_argon.local_filter.search_verb')} #{t('trln_argon.local_filter.searching_local', local_institution_name: institution_long_name)}",
onclick: "window.location='#{search_catalog_path(query_state)}'") do %>
<div class="toggle-logo py-2 px-3">
<div class="icon-wrapper"></div>
</div>
<div id="<%= local_button_id %>-label" class="toggle-label text-start d-flex align-self-center ms-2 pe-2" data-count-only-path="<%= trln_argon.catalog_count_only_path(query_state) %>">
<%= t('trln_argon.local_filter.searching_local', local_institution_name: institution_long_name) %>
</div>
<% end %>
</div>

<%= label_tag(local_button_id, t('trln_argon.local_filter.searching_local', local_institution_name: institution_long_name),
class: "#{local_search_button_label_class}",
data: { count_only_path: trln_argon.catalog_count_only_path(query_state) }) %>
</div>

<div class="toggle toggle-trln">
<%= button_tag(type: "button", id: trln_button_id, class: "btn btn-md #{trln_search_button_class}",
title: "#{t('trln_argon.local_filter.search_verb')} #{t('trln_argon.local_filter.searching_trln')}",
onclick: "window.location='#{search_trln_path(query_state)}'") do %>
<span class="visually-hidden">icon</span><span class="icon-wrapper"></span>
<% end %>
<div class="toggle-divider"></div>

<%= label_tag(trln_button_id, t('trln_argon.local_filter.searching_trln'),
class: "#{trln_search_button_label_class}",
data: { count_only_path: trln_argon.trln_count_only_path(query_state) }) %>
</div>
<div class="toggle toggle-trln">
<%= button_tag(type: "button", id: trln_button_id, class: "btn btn-link d-flex p-0 text-decoration-none border-0 #{trln_search_button_class}",
title: "#{t('trln_argon.local_filter.search_verb')} #{t('trln_argon.local_filter.searching_trln')}",
onclick: "window.location='#{search_trln_path(query_state)}'") do %>
<div class="toggle-logo py-2 px-3">
<div class="icon-wrapper"></div>
</div>
<div id="<%= trln_button_id %>-label" class="toggle-label text-start d-flex align-self-center ms-2 pe-2" data-count-only-path="<%= trln_argon.trln_count_only_path(query_state) %>">
<%= t('trln_argon.local_filter.searching_trln') %>
</div>
<% end %>
</div>
</div>
Loading

0 comments on commit adff78e

Please sign in to comment.