Fixes for a11y issues identified by SiteImprove browser extension (#5563

)

* Fix label association with selectall input for a11y improvement

* Avoid duplicate ids due to partial being rendered multiple times

* Buttons need labels for screen readers

* Scale down svg slightly so buttons will be the same size

* Fix tests previously looking for search button id

app/assets/stylesheets/avalon.scss

@@ -1189,7 +1189,7 @@ td {
   #addToPlaylistBtn {
     svg {
       color: $blue;
-      height: 1.5rem;
+      height: 1.3rem;
       margin-right: 0.2rem;
     }
   }

app/views/catalog/_select_all.html.erb

@@ -21,7 +21,7 @@ Unless required by applicable law or agreed to in writing, software distributed
            current_or_guest_user.bookmarks.where({ document_id: d.id }).exists?
          end %>
       <%= check_box_tag('bookmarks_selectall', '', all_selected) %>
-      <%= label_tag 'selectall', t('blacklight.bookmarks.addall.button'), class: 'font-weight-bold' %>
+      <%= label_tag 'bookmarks_selectall', t('blacklight.bookmarks.addall.button'), class: 'font-weight-bold' %>
   </div>
 <% end %>
 

app/views/modules/_avalon_search_form.html.erb

@@ -13,18 +13,19 @@ Unless required by applicable law or agreed to in writing, software distributed
   specific language governing permissions and limitations under the License.
 ---  END LICENSE_HEADER BLOCK  ---
 %>
+<% form_id = SecureRandom.base36 %>
 <form accept-charset="UTF-8" action="/catalog" class="avalon-search-query-form avalon-form-search" method="get">
   <div style="margin:0;padding:0;display:inline">
     <input name="utf8" type="hidden" value="✓">
   </div>
-  <input id="search_field" name="search_field" type="hidden" value="all_fields">
+  <input name="search_field" type="hidden" value="all_fields">
   <div>
-    <label class="sr-only" for="searchField">Search</label>
+    <label class="sr-only" for=<%= "searchField-#{form_id}"%>>Search</label>
     <div class="input-group input-group-lg global-search-wrapper">
-      <input class="search-query q form-control global-search-input" id="searchField" name="q"
+      <input class="search-query q form-control global-search-input" id=<%= "searchField-#{form_id}"%> name="q"
         placeholder="Search this site" type="text" value="">
       <span class="input-group-append">
-        <button id="global-search-submit" type="submit" class="btn btn-primary global-search-submit">
+        <button type="submit" class="btn btn-primary global-search-submit" aria-label="Submit search">
           <i class="fa fa-search icon-white"></i>
         </button>
       </span>

spec/features/capybara_navigation_spec.rb

@@ -68,13 +68,13 @@
   it 'is able to enter keyword and perform search' do
     visit '/'
     fill_in('Search', with: 'Video', match: :first)
-    click_button('global-search-submit', match: :first)
+    find('button.global-search-submit').click
     expect(page).to have_current_path('/catalog?utf8=%E2%9C%93&search_field=all_fields&q=Video')
   end
   it 'gives appropriate error when keyword returns no results' do
     visit '/'
     fill_in('Search', with: 'Video', match: :first)
-    click_button('global-search-submit', match: :first)
+    find('button.global-search-submit').click
     expect(page).to have_content('No results found for your search')
     expect(page).to have_content('No entries found')
     expect(page).to have_content('Use fewer keywords to start, then refine your search using the links on the left')