Skip to content

Commit f25953a

Browse files
jazairijazairi
authored
Merge pull request #140 from MITLibraries/gdt-161-skip-links
Add skip links and refactor filter sidebar for accessibility
2 parents ad5c422 + 5c503b3 commit f25953a

File tree

12 files changed

+65
-39
lines changed

12 files changed

+65
-39
lines changed

‎Gemfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ gem 'graphql-client'
99
gem 'http'
1010
gem 'importmap-rails'
1111
gem 'jbuilder'
12-
gem 'mitlibraries-theme', git: 'https://github.com/mitlibraries/mitlibraries-theme', tag: 'v1.2'
12+
gem 'mitlibraries-theme', git: 'https://github.com/mitlibraries/mitlibraries-theme', tag: 'v1.4'
1313
gem 'puma'
1414
gem 'rails', '~> 7.0'
1515
gem 'sentry-rails'

‎Gemfile.lock

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
GIT
22
remote: https://github.com/mitlibraries/mitlibraries-theme
3-
revision: bcbe5d3de36a92d275085a045c5c4d8f30f33e62
4-
tag: v1.2
3+
revision: ba5bdc9840ef817ba0b92e522b92da3f52669fc3
4+
tag: v1.4
55
specs:
66
mitlibraries-theme (1.0.2)
77
rails (>= 6, < 8)

‎app/assets/stylesheets/partials/_filters.scss

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
#filters {
2-
.category {
2+
details.filter-category {
33
position: relative;
44
margin-bottom: 0.5em;
55
border: 1px solid $gray-l3;
66
border-radius: 3px;
77
}
88

9-
button.filter-label {
9+
summary.filter-label {
1010
display: flex;
1111
justify-content: space-between;
1212
width: 100%;
@@ -47,12 +47,6 @@
4747
}
4848
}
4949

50-
.filter-options {
51-
max-height: 0;
52-
transition: max-height 0.5s ease-in-out;
53-
overflow: hidden;
54-
}
55-
5650
ul.category-terms {
5751
border-collapse: separate;
5852
border-spacing: 0px 4px;

‎app/assets/stylesheets/partials/_shared.scss

+20
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,23 @@
3939
}
4040
}
4141
}
42+
43+
.skip-link {
44+
position: absolute;
45+
overflow: hidden;
46+
top: 0;
47+
left: 0;
48+
height: 0;
49+
color: $gray-l2;
50+
background-color: $black;
51+
border-bottom: 2px solid $success;
52+
53+
&:focus {
54+
position: relative;
55+
display: block;
56+
height: auto;
57+
color: $white;
58+
width: 100%;
59+
padding: 5px 2%;
60+
}
61+
}

‎app/javascript/filters.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
// These elements aren't loaded with the initial DOM, they appear later.
22
function initFilterToggle() {
33
var filter_toggle = document.getElementById('filter-toggle');
4-
var filter_panel = document.getElementById('filters');
4+
var filter_panel = document.getElementById('filter-container');
5+
var filter_categories = document.getElementsByClassName('filter-category');
56
filter_toggle.addEventListener('click', event => {
67
filter_panel.classList.toggle('hidden-md');
78
filter_toggle.classList.toggle('expanded');
8-
9+
});
10+
[...filter_categories].forEach(element => {
11+
element.addEventListener('click', event => {
12+
element.getElementsByClassName('filter-label')[0].classList.toggle('expanded');
13+
});
914
});
1015
}
1116

‎app/views/layouts/_site_nav.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="wrap-outer-header-local layout-band">
22
<div class="wrap-header-local">
33
<div class="wrap-local-nav">
4-
<nav class="local-nav" aria-label="Main menu">
4+
<nav class="local-nav" id="main-menu" aria-label="Main menu">
55
<%= nav_link_to("Home", root_path) %>
66
<% if Flipflop.enabled?(:gdt) %>
77
<div class="wrap-gis-links">

‎app/views/layouts/_skip_links.html.erb

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<a class="skip-link sr sr-focusable" href="#main-menu">Skip to main menu</a>
2+
<a class="skip-link sr sr-focusable" href="#basic-search">Skip to search form</a>
3+
<% if current_page?(results_path) %>
4+
<a class="skip-link sr sr-focusable" href="#results">Skip to results</a>
5+
<% if @filters.present? %>
6+
<a class="skip-link sr sr-focusable" href="#filters">Skip to search filters</a>
7+
<% end %>
8+
<% end %>
9+
<% if controller.controller_name == 'record' && controller.action_name == 'view' %>
10+
<a class="skip-link sr sr-focusable" href="#full-record">Skip to metadata</a>
11+
<% end %>

‎app/views/record/_record.html.erb

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
<div class="gridband layout-3q1q wrap-full-record">
1+
<div id="full-record" class="gridband layout-3q1q wrap-full-record">
22
<div class="col3q box-content region full-record" data-region="Full record">
3-
43
<h2 class="record-title">
54
<span class="sr">Title: </span>
65
<% if @record['title'].present? %>

‎app/views/record/_record_geo.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="gridband layout-3q1q wrap-full-record">
1+
<div id="full-record" class="gridband layout-3q1q wrap-full-record">
22
<div class="col3q box-content region full-record" data-region="Full record">
33
<h2 class="record-title">
44
<span class="sr">Title: </span>

‎app/views/search/_filter.html.erb

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<% return if values.blank? %>
22

3-
<div class="category">
4-
<button class="filter-label <%= 'expanded' if @enhanced_query[category].present? || first == true %>"
5-
onclick="toggleFilter(this)"><%= nice_labels[category] || category %></button>
3+
<details class="filter-category" <%= 'open' if @enhanced_query[category].present? || first == true %>>
4+
<summary class="filter-label<%= ' expanded' if @enhanced_query[category].present? || first == true %>">
5+
<%= nice_labels[category] || category %>
6+
</summary>
67
<div class="filter-options">
78
<ul class="category-terms list-unbulleted">
89
<% values.each do |term| %>
910
<li class="term">
1011
<% if filter_applied?(@enhanced_query[category.to_sym], term['key']) %>
1112
<a href="<%= results_path(remove_filter(@enhanced_query, category, term['key'])) %>" class="applied">
12-
<span class="sr">Remove applied filter?</span>
13+
<span class="sr">Remove applied filter:</span>
1314
<% else %>
1415
<a href="<%= results_path(add_filter(@enhanced_query, category, term['key'])) %>">
16+
<span class="sr">Apply filter:</span>
1517
<% end %>
1618
<span class="name"><%= term['key'] %></span>
1719
<span class="count"><%= term['docCount'] %> <span class="sr">records</span></span>
@@ -20,10 +22,4 @@
2022
<% end %>
2123
</ul>
2224
</div>
23-
</div>
24-
25-
<script>
26-
function toggleFilter(e) {
27-
e.parentNode.getElementsByClassName("filter-label")[0].classList.toggle("expanded");
28-
}
29-
</script>
25+
</details>

‎app/views/search/results.html.erb

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<div class="space-wrap">
44

55
<%= render partial: "shared/site_title" %>
6+
67
<%= render partial: "form" %>
78
<%= render partial: "search_summary" %>
89

@@ -17,9 +18,9 @@
1718

1819
<div class="<%= @filters.present? ? 'layout-1q3q' : 'layout-3q1q' %> layout-band top-space">
1920
<% if @filters.present? %>
20-
<aside class="col1q filter-container">
21+
<aside id="filters" class="col1q">
2122
<button id="filter-toggle"><span class="filter-toggle-name">Filter your results: <%= results_summary(@pagination[:hits]) %></span><span class="filter-toggle-hide">Hide filters</span></button>
22-
<div id="filters" class="hidden-md">
23+
<div id="filter-container" class="hidden-md">
2324
<div class="hidden-md">
2425
<h2 class="hd-3">Filter your results</h2>
2526
<h3 class="hd-4"><em><%= results_summary(@pagination[:hits]) %></em></h3>

‎test/controllers/search_controller_test.rb

+9-9
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ class SearchControllerTest < ActionDispatch::IntegrationTest
135135
get '/results?q=data'
136136
assert_response :success
137137
assert_select '#filters'
138-
assert_select '#filters .category .filter-label', { minimum: 1 }
138+
assert_select '#filters .filter-category .filter-label', { minimum: 1 }
139139
end
140140
end
141141

@@ -211,7 +211,7 @@ class SearchControllerTest < ActionDispatch::IntegrationTest
211211
assert_select '#filters', { count: 0 }
212212

213213
# Filters are not shown
214-
assert_select '#filters .category h3', { count: 0 }
214+
assert_select '#filters .filter-category h3', { count: 0 }
215215

216216
# Pagination is not shown
217217
assert_select '#pagination', { count: 0 }
@@ -427,31 +427,31 @@ def source_filter_count(controller)
427427
ClimateControl.modify ACTIVE_FILTERS: '' do
428428
get '/results?q=data'
429429
assert_response :success
430-
assert_select '#filters .category .filter-label', { minimum: 1 }
430+
assert_select '#filters .filter-category .filter-label', { minimum: 1 }
431431
end
432432

433433
# Ask for a single filter, get that filter.
434434
ClimateControl.modify ACTIVE_FILTERS: 'subjects' do
435435
get '/results?q=data'
436436
assert_response :success
437-
assert_select '#filters .category .filter-label', { count: 1 }
438-
assert_select '#filters .category:first-of-type .filter-label', 'Subject'
437+
assert_select '#filters .filter-category .filter-label', { count: 1 }
438+
assert_select '#filters .filter-category:first-of-type .filter-label', 'Subject'
439439
end
440440

441441
# The order of the terms matter, so now Format should be first.
442442
ClimateControl.modify ACTIVE_FILTERS: 'format, contentType, source' do
443443
get '/results?q=data'
444444
assert_response :success
445-
assert_select '#filters .category .filter-label', { count: 3 }
446-
assert_select '#filters .category:first-of-type .filter-label', 'Format'
445+
assert_select '#filters .filter-category .filter-label', { count: 3 }
446+
assert_select '#filters .filter-category:first-of-type .filter-label', 'Format'
447447
end
448448

449449
# Including extra values does not affect anything - "nonsense" is extraneous.
450450
ClimateControl.modify ACTIVE_FILTERS: 'contentType, nonsense, source' do
451451
get '/results?q=data'
452452
assert_response :success
453-
assert_select '#filters .category .filter-label', { count: 2 }
454-
assert_select '#filters .category:first-of-type .filter-label', 'Content type'
453+
assert_select '#filters .filter-category .filter-label', { count: 2 }
454+
assert_select '#filters .filter-category:first-of-type .filter-label', 'Content type'
455455
end
456456
end
457457
end

0 commit comments

Comments
 (0)