Merge pull request #2459 from projectblacklight/bs5

Support bootstrap 4 + 5
projectblacklight · May 10, 2021 · 3a458d5 · 3a458d5
2 parents d34eac0 + 32c2bd5
commit 3a458d5
Show file tree

Hide file tree

Showing 45 changed files with 79 additions and 68 deletions.
diff --git a/app/assets/javascripts/blacklight/blacklight.js b/app/assets/javascripts/blacklight/blacklight.js
@@ -352,7 +352,7 @@ Blacklight.modal.modalCloseSelector = '[data-blacklight-modal~=close]'; // Calle
 
 Blacklight.modal.onFailure = function (jqXHR, textStatus, errorThrown) {
   console.error('Server error:', this.url, jqXHR.status, errorThrown);
-  var contents = '<div class="modal-header">' + '<div class="modal-title">There was a problem with your request.</div>' + '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' + '  <span aria-hidden="true">&times;</span>' + '</button></div>' + ' <div class="modal-body"><p>Expected a successful response from the server, but got an error</p>' + '<pre>' + this.type + ' ' + this.url + "\n" + jqXHR.status + ': ' + errorThrown + '</pre></div>';
+  var contents = '<div class="modal-header">' + '<div class="modal-title">There was a problem with your request.</div>' + '<button type="button" class="blacklight-modal-close btn-close close" data-dismiss="modal" aria-label="Close">' + '  <span aria-hidden="true">&times;</span>' + '</button></div>' + ' <div class="modal-body"><p>Expected a successful response from the server, but got an error</p>' + '<pre>' + this.type + ' ' + this.url + "\n" + jqXHR.status + ': ' + errorThrown + '</pre></div>';
   $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
   $(Blacklight.modal.modalSelector).modal('show');
 };
@@ -495,4 +495,3 @@ Blacklight.handleSearchContextMethod = function (event) {
 Blacklight.onLoad(function () {
   Blacklight.doSearchContextBehavior();
 });
-
diff --git a/app/assets/stylesheets/blacklight/_balanced_list.scss b/app/assets/stylesheets/blacklight/_balanced_list.scss
@@ -2,11 +2,11 @@
   dt {
     font-weight: normal;
     color: $field_name_color;
-    @media (max-width: breakpoint-max(sm)) {
+    @media (max-width: breakpoint-min(md)) {
       text-align: left;
     }
 
-    @media (min-width: breakpoint-max(sm)) {
+    @media (min-width: breakpoint-min(md)) {
       text-align: right;
     }
   }

diff --git a/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss b/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss
@@ -5,7 +5,7 @@
 // Facet field headings and buttons
 .facet-field-heading {
   border-bottom: 0;
-  
+
   button {
     font-weight: $headings-font-weight;
 

diff --git a/app/assets/stylesheets/blacklight/_constraints.scss b/app/assets/stylesheets/blacklight/_constraints.scss
@@ -8,8 +8,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
 
-    @media (max-width: breakpoint-max(xs)) {
-      max-width: breakpoint-max(xs) / 2;
+    @media (max-width: breakpoint-min(sm)) {
+      max-width: breakpoint-min(sm) / 2;
     }
 
     @media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) {

diff --git a/app/assets/stylesheets/blacklight/_controls.scss b/app/assets/stylesheets/blacklight/_controls.scss
@@ -34,7 +34,8 @@
   display: inline-block;
 
   .caption {
-    @extend .sr-only;
+    @extend .sr-only !optional;
+    @extend .visually-hidden !optional;
   }
 }
 

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -3,7 +3,8 @@
     border-color: $navbar-light-toggler-border-color;
     color: $navbar-light-active-color;
 
-    @include hover-focus {
+    &:hover,
+    &:focus {
       color: $navbar-light-active-color;
     }
   }
@@ -83,6 +84,7 @@
     color: $text-muted;
     font-weight: bold;
     padding-left: $spacer / 2;
+    text-decoration: none;
 
     &:hover {
       color: theme-color("danger");

diff --git a/app/assets/stylesheets/blacklight/_header.scss b/app/assets/stylesheets/blacklight/_header.scss
@@ -44,7 +44,12 @@
   .submit-search-text {
     // hide 'search' label at very small screens
     @media screen and (max-width: breakpoint-max(xs)) {
-      @include sr-only();
+      @if mixin-exists(sr-only) {
+        @include sr-only();
+      }
+      @if mixin-exists(visually-hidden) {
+        @include visually-hidden();
+      }
     }
   }
 }

diff --git a/app/components/blacklight/constraint_layout_component.html.erb b/app/components/blacklight/constraint_layout_component.html.erb
@@ -10,7 +10,7 @@
   <% if @remove_path.present? %>
     <%= link_to(@remove_path, class: 'btn btn-outline-secondary remove') do %>
       <span class="remove-icon" aria-hidden="true">✖</span>
-      <span class="sr-only">
+      <span class="sr-only visually-hidden">
         <%= if @label.blank?
             t('blacklight.search.filters.remove.value', value: @value)
           else

diff --git a/app/components/blacklight/constraints_component.html.erb b/app/components/blacklight/constraints_component.html.erb
@@ -1,9 +1,9 @@
 <%= content_tag :div, id: @id, class: @classes do %>
-  <h2 class="sr-only"><%= t('blacklight.search.search_constraints_header') %></h2>
+  <h2 class="sr-only visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
 
   <%= link_to t('blacklight.search.start_over'), start_over_path, class: "catalog_startOverLink btn btn-primary" %>
 
-  <span class="constraints-label sr-only"><%= t('blacklight.search.filters.title') %></span>
+  <span class="constraints-label sr-only visually-hidden"><%= t('blacklight.search.filters.title') %></span>
   <% if query_constraints_area.present? %>
     <% query_constraints_area.each do |constraint| %>
       <%= constraint %>

diff --git a/app/components/blacklight/facet_field_component.html.erb b/app/components/blacklight/facet_field_component.html.erb
@@ -2,9 +2,11 @@
   <h3 class="card-header p-0 facet-field-heading" id="<%= @facet_field.html_id %>-header">
     <button
       type="button"
-      class="btn btn-block p-2 text-left collapse-toggle <%= "collapsed" if @facet_field.collapsed? %>"
+      class="btn w-100 d-block btn-block p-2 text-start text-left collapse-toggle <%= "collapsed" if @facet_field.collapsed? %>"
       data-toggle="collapse"
+      data-bs-toggle="collapse"
       data-target="#<%= @facet_field.html_id %>"
+      data-bs-target="#<%= @facet_field.html_id %>"
       aria-expanded="<%= @facet_field.collapsed? ? 'false' : 'true' %>"
     >
       <%= label %>

diff --git a/app/components/blacklight/facet_item_component.rb b/app/components/blacklight/facet_item_component.rb
@@ -87,7 +87,7 @@ def render_selected_facet_value
           # remove link
           link_to(@href, class: "remove") do
             tag.span('✖', class: "remove-icon", aria: { hidden: true }) +
-              tag.span(@view_context.t(:'blacklight.search.facets.selected.remove'), class: 'sr-only')
+              tag.span(@view_context.t(:'blacklight.search.facets.selected.remove'), class: 'sr-only visually-hidden')
           end
       end + render_facet_count(classes: ["selected"])
     end

diff --git a/app/components/blacklight/facet_item_pivot_component.rb b/app/components/blacklight/facet_item_pivot_component.rb
@@ -56,7 +56,7 @@ def has_items?
 
     def facet_toggle_button(id)
       content_tag 'button', class: 'btn facet-toggle-handle collapsed',
-                            data: { toggle: 'collapse', target: "##{id}" },
+                            data: { toggle: 'collapse', 'bs-toggle': 'collapse', target: "##{id}", 'bs-target': "##{id}" },
                             aria: { expanded: false, controls: id, describedby: "#{id}_label" } do
         concat toggle_icon(:show)
         concat toggle_icon(:hide)
@@ -66,7 +66,7 @@ def facet_toggle_button(id)
     def toggle_icon(type)
       content_tag 'span', class: type do
         concat @icons[type]
-        concat content_tag('span', t(type, scope: 'blacklight.search.facets.pivot'), class: 'sr-only')
+        concat content_tag('span', t(type, scope: 'blacklight.search.facets.pivot'), class: 'sr-only visually-hidden')
       end
     end
 

diff --git a/app/components/blacklight/response/facet_group_component.html.erb b/app/components/blacklight/response/facet_group_component.html.erb
@@ -9,6 +9,8 @@
       data: {
         toggle: 'collapse',
         target: "##{@panel_id}",
+        'bs-toggle': 'collapse',
+        'bs-target': "##{@panel_id}"
       },
       aria: {
         controls: @panel_id,

diff --git a/app/components/blacklight/response/view_type_component.html.erb b/app/components/blacklight/response/view_type_component.html.erb
@@ -1,5 +1,5 @@
 <div class="view-type">
-  <span class="sr-only"><%= t('blacklight.search.view_title') %></span>
+  <span class="sr-only visually-hidden"><%= t('blacklight.search.view_title') %></span>
   <div class="view-type-group btn-group">
     <% views.each do |view| %>
       <%= view %>

diff --git a/app/components/blacklight/search_bar_component.html.erb b/app/components/blacklight/search_bar_component.html.erb
@@ -1,7 +1,7 @@
 <%= form_tag @url, method: @method, class: @classes.join(' '), role: 'search', 'aria-label' => scoped_t('submit') do %>
   <%= render_hash_as_hidden_fields(@params) %>
   <% if @search_fields.length > 1 %>
-    <label for="search_field" class="sr-only"><%= scoped_t('search_field.label') %></label>
+    <label for="search_field" class="sr-only visually-hidden"><%= scoped_t('search_field.label') %></label>
   <% end %>
   <div class="input-group">
     <%= prepend %>
@@ -11,12 +11,12 @@
                        options_for_select(@search_fields, h(@search_field)),
                        title: scoped_t('search_field.title'),
                        id: "#{@prefix}search_field",
-                       class: "custom-select search-field") %>
+                       class: "custom-select form-select search-field") %>
     <% elsif @search_fields.length == 1 %>
       <%= hidden_field_tag :search_field, @search_fields.first.last %>
     <% end %>
 
-    <label for="<%= @prefix %><%= @query_param %>" class="sr-only"><%= scoped_t('search.label') %></label>
+    <label for="<%= @prefix %><%= @query_param %>" class="sr-only visually-hidden"><%= scoped_t('search.label') %></label>
     <%= text_field_tag @query_param, @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{@search_fields.length > 1 ? '0' : 'left'}", id: "#{@prefix}q", autocomplete: autocomplete_path.present? ? "off" : "", autofocus: @autofocus, data: { autocomplete_enabled: autocomplete_path.present?, autocomplete_path: autocomplete_path }  %>
 
     <span class="input-group-append">

diff --git a/app/components/blacklight/system/dropdown_component.rb b/app/components/blacklight/system/dropdown_component.rb
@@ -4,7 +4,7 @@ module Blacklight
   module System
     class DropdownComponent < ViewComponent::Base
       renders_one :button, (lambda do |classes:, label:|
-        button_tag class: classes, aria: { expanded: false }, data: { toggle: 'dropdown' } do
+        button_tag class: classes, aria: { expanded: false }, data: { toggle: 'dropdown', 'bs-toggle': 'dropdown' } do
           safe_join([label, content_tag(:span, '', class: 'caret')])
         end
       end)

diff --git a/app/components/blacklight/system/flash_message_component.html.erb b/app/components/blacklight/system/flash_message_component.html.erb
@@ -1,4 +1,4 @@
 <div class="alert <%= @classes %>">
   <%= message %>
-  <a class="close" data-dismiss="alert" href="#">&times;</a>
+  <a class="btn-close close" data-dismiss="alert" href="#">&times;</a>
 </div>
diff --git a/app/components/blacklight/system/modal_component.html.erb b/app/components/blacklight/system/modal_component.html.erb
@@ -6,7 +6,7 @@
       <h1 class="modal-title"><%= title %></h1>
     <% end) %>
 
-    <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+    <button type="button" class="blacklight-modal-close btn-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>

diff --git a/app/javascript/blacklight/modal.js b/app/javascript/blacklight/modal.js
@@ -106,7 +106,7 @@ Blacklight.modal.onFailure = function(jqXHR, textStatus, errorThrown) {
 
   var contents = '<div class="modal-header">' +
             '<div class="modal-title">There was a problem with your request.</div>' +
-            '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' +
+            '<button type="button" class="blacklight-modal-close btn-close close" data-dismiss="modal" aria-label="Close">' +
             '  <span aria-hidden="true">&times;</span>' +
             '</button></div>' +
             ' <div class="modal-body"><p>Expected a successful response from the server, but got an error</p>' +

diff --git a/app/views/blacklight/nav/_bookmark.html.erb b/app/views/blacklight/nav/_bookmark.html.erb
@@ -1,4 +1,4 @@
 <%= link_to bookmarks_path, id:'bookmarks_nav', class: 'nav-link' do %>
   <%= t('blacklight.header_links.bookmarks') %>
-<span class="badge badge-secondary" data-role='bookmark-counter'><%= current_or_guest_user.bookmarks.count %></span>
+<span class="badge badge-secondary bg-secondary" data-role='bookmark-counter'><%= current_or_guest_user.bookmarks.count %></span>
 <% end %>
diff --git a/app/views/bookmarks/index.html.erb b/app/views/bookmarks/index.html.erb
@@ -13,7 +13,7 @@
   <% else %>
     <%= render 'sort_and_per_page' %>
     <%= render partial: 'tools', locals: { document_list: @response.documents } %>
-    <h2 class='section-heading sr-only'><%= t('blacklight.bookmarks.list_title') %></h2>
+    <h2 class='section-heading sr-only visually-hidden'><%= t('blacklight.bookmarks.list_title') %></h2>
     <%= render_document_index %>
     <%= render 'results_pagination' %>
   <% end %>

diff --git a/app/views/catalog/_constraints.html.erb b/app/views/catalog/_constraints.html.erb
@@ -4,10 +4,10 @@
   <% Deprecation.warn(Blacklight::RenderConstraintsHelperBehavior, 'Constraints helpers or partials were overridden; not using components') %>
   <% if Deprecation.silence(Blacklight::RenderConstraintsHelperBehavior) { query_has_constraints? } %>
     <div id="appliedParams" class="clearfix constraints-container">
-      <h2 class="sr-only"><%= t('blacklight.search.search_constraints_header') %></h2>
+      <h2 class="sr-only visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
 
       <%= render 'start_over' %>
-      <span class="constraints-label sr-only"><%= t('blacklight.search.filters.title') %></span>
+      <span class="constraints-label sr-only visually-hidden"><%= t('blacklight.search.filters.title') %></span>
       <%= render_constraints(controller.params != params ? params : search_state) %>
     </div>
   <% end %>

diff --git a/app/views/catalog/_home_text.html.erb b/app/views/catalog/_home_text.html.erb
@@ -31,7 +31,7 @@
 
 <%# This is the same panel shown in the Rails welcome template %>
 <div id="about" class="card">
-  <h2 class='card-header collapsed collapse-toggle' data-toggle="collapse" data-target="#about-content"><a href="/rails/info/properties">About your application&rsquo;s environment</a></h2>
+  <h2 class='card-header collapsed collapse-toggle' data-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#about-content" data-target="#about-content"><a href="/rails/info/properties">About your application&rsquo;s environment</a></h2>
   <div id="about-content" class="card-body collapse"></div>
 </div>
 

diff --git a/app/views/catalog/_per_page_widget.html.erb b/app/views/catalog/_per_page_widget.html.erb
@@ -1,5 +1,5 @@
 <% if show_sort_and_per_page? %>
-  <span class="sr-only"><%= t('blacklight.search.per_page.title') %></span>
+  <span class="sr-only visually-hidden"><%= t('blacklight.search.per_page.title') %></span>
   <%= render(Blacklight::System::DropdownComponent.new(
     param: :per_page,
     choices: per_page_options_for_select,

diff --git a/app/views/catalog/_search_results.html.erb b/app/views/catalog/_search_results.html.erb
@@ -12,14 +12,14 @@
 <% end %>
 
 <% content_for(:container_header) do -%>
-  <h1 class="sr-only top-content-title"><%= t('blacklight.search.header') %></h1>
+  <h1 class="sr-only visually-hidden top-content-title"><%= t('blacklight.search.header') %></h1>
 
   <%= render 'constraints' %>
 <% end %>
 
 <%= render 'search_header' %>
 
-<h2 class="sr-only"><%= t('blacklight.search.search_results') %></h2>
+<h2 class="sr-only visually-hidden"><%= t('blacklight.search.search_results') %></h2>
 
 <%- if @response.empty? %>
   <%= render "zero_results" %>

diff --git a/app/views/search_history/index.html.erb b/app/views/search_history/index.html.erb
@@ -9,7 +9,7 @@
               blacklight.clear_search_history_path,
               method: :delete,
               data: { confirm: t('blacklight.search_history.clear.action_confirm') },
-              class: 'btn btn-danger float-md-right' %>
+              class: 'btn btn-danger float-md-right float-md-end' %>
   <h2 class='section-heading'><%= t('blacklight.search_history.recent') %></h2>
   <table class="table table-striped search-history">
     <% @searches.each_with_index do |search,index| %>

diff --git a/app/views/shared/_header_navbar.html.erb b/app/views/shared/_header_navbar.html.erb
@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark topbar" role="navigation">
   <div class="<%= container_classes %>">
     <%= link_to application_name, root_path, class: 'mb-0 navbar-brand navbar-logo' %>
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#user-util-collapse" data-bs-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
 

diff --git a/config/locales/blacklight.ar.yml b/config/locales/blacklight.ar.yml
@@ -157,7 +157,7 @@ ar:
         request_error: "معذرة، لم أفهم ما تبحث عنه."
         invalid_solr_id: "معذرة! لقد طلبت سجلًا غير موجود."
       per_page:
-        label: '%{count}<span class="sr-only"> لكل صفحة</span>'
+        label: '%{count}<span class="sr-only visually-hidden"> لكل صفحة</span>'
         button_label: '%{count} لكل صفحة' # TODO: Remove during major release
         button_label_html: '%{count}<span class="d-none d-sm-inline"> لكل صفحة</span>'
         title: 'عدد النتائج المعروضة في الصفحة'
@@ -209,7 +209,7 @@ ar:
           count: 'ترتيب رقمي'
           index: 'ترتيب أبجدي'
         count: '%{number}'
-        more_html: 'المزيد <span class="sr-only">%{field_name}</span> »'
+        more_html: 'المزيد <span class="sr-only visually-hidden">%{field_name}</span> »'
         selected:
           remove: '[إزالة]'
         missing: "[غير موجود]"

diff --git a/config/locales/blacklight.ca.yml b/config/locales/blacklight.ca.yml
@@ -147,7 +147,7 @@ ca:
         request_error: "No ha estat possible entendre la cerca"
         invalid_solr_id: "El registre que heu sol·licitat no existeix."
       per_page:
-        label: '%{count}<span class="sr-only"> per pàgina</span>'
+        label: '%{count}<span class="sr-only visually-hidden"> per pàgina</span>'
         button_label: '%{count} per pàgina' # TODO: Remove during major release
         button_label_html: '%{count}<span class="d-none d-sm-inline"> per pàgina</span>'
         title: 'Nombre de resultats a mostrar per pàgina'
@@ -189,7 +189,7 @@ ca:
           count: 'Numèricament'
           index: 'Alfabèticament'
         count: '%{number}'
-        more_html: 'més <span class="sr-only">%{field_name}</span> »'
+        more_html: 'més <span class="sr-only visually-hidden">%{field_name}</span> »'
         selected:
           remove: '[eliminar]'
         missing: "[Desaparegut]"

diff --git a/config/locales/blacklight.de.yml b/config/locales/blacklight.de.yml
@@ -147,7 +147,7 @@ de:
         request_error: "Entschuldigung, ich habe Ihre Suche nicht verstanden."
         invalid_solr_id: "Entschuldigung, Sie haben einen nicht vorhandenen Datensatz angefordert."
       per_page:
-        label: '%{count}<span class="sr-only"> pro Seite</span>'
+        label: '%{count}<span class="sr-only visually-hidden"> pro Seite</span>'
         button_label: '%{count} pro Seite' # TODO: Remove during major release
         button_label_html: '%{count}<span class="d-none d-sm-inline"> pro Seite</span>'
         title: 'Anzahl der Ergebnisse, die pro Seite angezeigt werden'
@@ -190,7 +190,7 @@ de:
           count: 'Numerisch ordnen'
           index: 'A-Z Ordnen'
         count: '%{number}'
-        more_html: 'mehr <span class="sr-only">%{field_name}</span> »'
+        more_html: 'mehr <span class="sr-only visually-hidden">%{field_name}</span> »'
         selected:
           remove: '[entfernen]'
         missing: [fehlt]

diff --git a/config/locales/blacklight.en.yml b/config/locales/blacklight.en.yml
@@ -147,7 +147,7 @@ en:
         request_error: "Sorry, I don't understand your search."
         invalid_solr_id: "Sorry, you have requested a record that doesn't exist."
       per_page:
-        label: '%{count}<span class="sr-only"> per page</span>'
+        label: '%{count}<span class="sr-only visually-hidden"> per page</span>'
         button_label: '%{count} per page' # TODO: Remove during major release
         button_label_html: '%{count}<span class="d-none d-sm-inline"> per page</span>'
         title: 'Number of results to display per page'
@@ -189,7 +189,7 @@ en:
           count: 'Numerical Sort'
           index: 'A-Z Sort'
         count: '%{number}'
-        more_html: 'more <span class="sr-only">%{field_name}</span> »'
+        more_html: 'more <span class="sr-only visually-hidden">%{field_name}</span> »'
         selected:
           remove: '[remove]'
         missing: "[Missing]"

diff --git a/config/locales/blacklight.es.yml b/config/locales/blacklight.es.yml
@@ -147,7 +147,7 @@ es:
         request_error: "Lo siento, no entiendo esta búsqueda"
         invalid_solr_id: "Lo sentimos, usted ha solicitado un registro que no existe."
       per_page:
-        label: '%{count}<span class="sr-only"> por página</span>'
+        label: '%{count}<span class="sr-only visually-hidden"> por página</span>'
         button_label: '%{count} por página' # TODO: Remove during major release
         button_label_html: '%{count}<span class="d-none d-sm-inline"> por página</span>'
         title: 'El número de resultados a mostrar por página'
@@ -190,7 +190,7 @@ es:
           count: 'Ordenación numérica'
           index: 'Ordenación A-Z'
         count: '%{number}'
-        more_html: 'más <span class="sr-only">%{field_name}</span> »'
+        more_html: 'más <span class="sr-only visually-hidden">%{field_name}</span> »'
         selected:
           remove: '[borrar]'
         missing: '[Falta]'