Use search input type for the search bar

This is the appropriate semantic markup. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

app/components/blacklight/search_bar_component.html.erb

@@ -19,11 +19,11 @@
     <%= f.label @query_param, scoped_t('search.label'), class: 'sr-only visually-hidden' %>
     <% if autocomplete_path.present? %>
       <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper">
-        <%= f.text_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' }  %>
+        <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' }  %>
         <ul id="autocomplete-popup" role="listbox" aria-label="<%= scoped_t('search.label') %>"></ul>
       </auto-complete>
     <% else %>
-      <%= f.text_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label') }  %>
+      <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label') }  %>
     <% end %>
 
     <%= append(form: f) %>