Accessibility improvements for global & vocab search

resource/js/global-search.js

@@ -19,29 +19,35 @@ function startGlobalSearchApp () {
     },
     computed: {
       vocabSelectorPlaceholder () {
-        return $t('1. Choose vocabulary')
+        return $t('Choose vocabulary')
       },
       langSelectorPlaceholder () {
-        return $t('2. Choose language')
+        return $t('Choose language')
       },
       searchPlaceholder () {
-        return $t('3. Enter search term')
+        return $t('Enter search term')
       },
       anyLanguage () {
         return $t('Any language')
       },
       noResults () {
         return $t('No results')
       },
+      selectSearchVocabAriaMessage () {
+        return $t('Select search vocabularies')
+      },
       selectSearchLanguageAriaMessage () {
         return $t('Select search language')
       },
-      textInputWithDropdownButtonAriaMessage () {
-        return $t('Text input with dropdown button')
+      searchFieldAriaMessage () {
+        return $t('Enter search term')
       },
-      searchAriaMessage () {
+      searchButtonAriaMessage () {
         return $t('Search')
       },
+      clearSearchAriaMessage () {
+        return $t('Clear search field')
+      },
       getSelectedVocabs () {
         return this.selectedVocabs.map(key => ({ key, value: this.vocabStrings[key] }))
       },
@@ -261,6 +267,10 @@ function startGlobalSearchApp () {
         this.searchTerm = ''
         this.renderedResultsList = []
         this.hideAutoComplete()
+
+        this.$nextTick(() => {
+          this.$refs.globalSearchInputField.focus()
+        })
       },
       onLangMenuKeydown (e) {
         const items = Array.from(e.currentTarget.querySelectorAll('input'))
@@ -426,7 +436,7 @@ function startGlobalSearchApp () {
             data-bs-toggle="dropdown"
             data-bs-auto-close="outside"
             aria-expanded="false"
-            :aria-label="selectSearchLanguageAriaMessage"
+            :aria-label="selectSearchVocabAriaMessage"
             v-if="languageStrings"
             v-key-nav="dropdownKeyNav"
           >
@@ -493,11 +503,12 @@ function startGlobalSearchApp () {
         <div class="input-group flex-nowrap" id="search-form">
           <span id="headerbar-search" class="dropdown">
             <input type="search"
+              ref="globalSearchInputField"
               class="form-control"
               id="search-field"
               autocomplete="off"
               data-bs-toggle=""
-              :aria-label="textInputWithDropdownButtonAriaMessage"
+              :aria-label="searchFieldAriaMessage"
               :placeholder="searchPlaceholder"
               v-click-outside="hideAutoComplete"
               v-model="searchTerm"
@@ -589,10 +600,15 @@ function startGlobalSearchApp () {
               </li>
             </ul>
           </span>
-          <button id="clear-button" class="btn btn-danger" type="clear" v-if="searchTerm" @click="resetSearchTermAndHideDropdown()">
+          <button id="clear-button"
+                  class="btn btn-danger"
+                  :aria-label="clearSearchAriaMessage"
+                  type="clear"
+                  v-if="searchTerm"
+                  @click="resetSearchTermAndHideDropdown()">
             <i class="fa-solid fa-xmark"></i>
           </button>
-          <button id="search-button" class="btn btn-outline-secondary" :aria-label="searchAriaMessage" @click="gotoSearchPage()">
+          <button id="search-button" class="btn btn-outline-secondary" :aria-label="searchButtonAriaMessage" @click="gotoSearchPage()">
             <i class="fa-solid fa-magnifying-glass"></i>
           </button>
         </div>

resource/js/vocab-search.js

@@ -16,7 +16,7 @@ function startVocabSearchApp () {
     },
     computed: {
       searchPlaceholder () {
-        return $t('Search...')
+        return $t('Search in this vocabulary')
       },
       anyLanguages () {
         return $t('Any language')
@@ -27,11 +27,14 @@ function startVocabSearchApp () {
       selectSearchLanguageAriaMessage () {
         return $t('Select search language')
       },
-      textInputWithDropdownButtonAriaMessage () {
-        return $t('Text input with dropdown button')
+      searchFieldAriaMessage () {
+        return $t('Search in this vocabulary')
       },
-      searchAriaMessage () {
+      searchButtonAriaMessage () {
         return $t('Search')
+      },
+      clearSearchAriaMessage () {
+        return $t('Clear search field')
       }
     },
     mounted () {
@@ -232,6 +235,10 @@ function startVocabSearchApp () {
         this.searchTerm = ''
         this.renderedResultsList = []
         this.hideAutoComplete()
+
+        this.$nextTick(() => {
+          this.$refs.searchInputField.focus()
+        })
       },
       /*
       * Show the existing autocomplete list if it was hidden by onClickOutside()
@@ -271,11 +278,12 @@ function startVocabSearchApp () {
 
         <span id="headerbar-search" class="dropdown">
           <input type="search"
+            ref="searchInputField"
             class="form-control"
             id="search-field"
             autocomplete="off"
             data-bs-toggle=""
-            :aria-label="textInputWithDropdownButtonAriaMessage"
+            :aria-label="searchFieldAriaMessage"
             :placeholder="searchPlaceholder"
             v-click-outside="hideAutoComplete"
             v-model="searchTerm"
@@ -367,10 +375,15 @@ function startVocabSearchApp () {
             </li>
           </ul>
         </span>
-        <button id="clear-button" class="btn btn-danger" type="clear" v-if="searchTerm" @click="resetSearchTermAndHideDropdown()">
+        <button id="clear-button"
+                class="btn btn-danger"
+                type="clear"
+                :aria-label="clearSearchAriaMessage"
+                v-if="searchTerm"
+                @click="resetSearchTermAndHideDropdown()">
           <i class="fa-solid fa-xmark"></i>
         </button>
-        <button id="search-button" class="btn btn-outline-secondary" :aria-label="searchAriaMessage" @click="gotoSearchPage()">
+        <button id="search-button" class="btn btn-outline-secondary" :aria-label="searchButtonAriaMessage" @click="gotoSearchPage()">
           <i class="fa-solid fa-magnifying-glass"></i>
         </button>
       </div>

resource/translations/messages.en.json

@@ -126,62 +126,69 @@
     "wgs84:long": "Longitude",
     "wgs84:long_help": "Longitude in decimal degrees according to WGS 84 system.",
     "zxx-x-taxon": "Scientific name",
-    "Loading more items": "Loading more items",
-    "Go to the concept page": "Go to the concept page",
-    "Open": "Open",
     "1. Choose vocabulary": "1. Choose vocabulary",
     "2. Choose language": "2. Choose language",
     "3. Enter search term": "3. Enter search term",
-    "Any language": "Any language",
-    "No results": "No results",
-    "Select search language": "Select search language",
-    "Text input with dropdown button": "Text input with dropdown button",
-    "Search": "Search",
+    "404 Error: The page %requested_page% cannot be found.": "404 Error: The page %requested_page% cannot be found.",
+    "About": "About",
+    "Adding an empty twig file will remove this message.": "Adding an empty twig file will remove this message.",
     "All %d results displayed": "All %d results displayed",
-    "Resource counts by type": "Resource counts by type",
-    "Type": "Type",
-    "Count": "Count",
-    "Deprecated concept": "Deprecated concept",
-    "show all # values": "show all # values",
-    "Term counts by language": "Term counts by language",
-    "Preferred terms": "Preferred terms",
     "Alternate terms": "Alternate terms",
-    "Hidden terms": "Hidden terms",
-    "Search...": "Search...",
-    "About": "About",
-    "%search_count% results for '%term%'": "%search_count% results for '%term%'",
-    "This concept has been deprecated.": "This concept has been deprecated.",
-    "See": "See",
+    "Any language": "Any language",
     "Breadcrumbs": "Breadcrumbs",
+    "Browse concepts": "Browse concepts",
+    "Choose alphabetical listing letter": "Choose alphabetical listing letter",
+    "Choose language": "Choose language",
+    "Choose vocabulary": "Choose vocabulary",
+    "Clear search field": "Clear search field",
+    "Concepts loaded for letter %letter%": "Concepts loaded for letter %letter%",
+    "Concept %term% in vocabulary %vocab%": "Concept %term% in vocabulary %vocab%",
+    "Contact us!": "Contact us!",
     "Copy to clipboard": "Copy to clipboard",
-    "Truncated (too many items in list)": "Truncated (too many items in list)",
+    "Count": "Count",
+    "Deprecated concept": "Deprecated concept",
     "Download this concept": "Download this concept",
+    "E-mail": "E-mail",
+    "Enter search term": "Enter search term",
+    "Enter your e-mail address": "Enter your e-mail address",
+    "Enter your name": "Enter your name",
     "Error": "Error",
-    "404 Error: The page %requested_page% cannot be found.": "404 Error: The page %requested_page% cannot be found.",
-    "Sidebar listing: list and traverse vocabulary contents by a criterion": "Sidebar listing: list and traverse vocabulary contents by a criterion",
-    "More information about this term": "More information about this term",
-    "Concept %term% in vocabulary %vocab%": "Concept %term% in vocabulary %vocab%",
-    "To customize what is shown here, add one or more .twig template files under the %slotPath% directory.": "To customize what is shown here, add one or more .twig template files under the %slotPath% directory.",
-    "Adding an empty twig file will remove this message.": "Adding an empty twig file will remove this message.",
-    "Skosmos version %version%": "Skosmos version %version%",
-    "The search provided no results.": "The search provided no results.",
     "Feedback": "Feedback",
     "Feedback has been sent!": "Feedback has been sent!",
-    "Contact us!": "Contact us!",
-    "Vocabulary": "Vocabulary",
-    "Not to a specific vocabulary": "Not to a specific vocabulary",
+    "Go to the concept page": "Go to the concept page",
+    "Hidden terms": "Hidden terms",
+    "Hide concepts": "Hide concepts",
+    "Loading more items": "Loading more items",
+    "Message": "Message",
+    "More information about this term": "More information about this term",
     "Name": "Name",
-    "Enter your name": "Enter your name",
-    "E-mail": "E-mail",
-    "Enter your e-mail address": "Enter your e-mail address",
+    "No results": "No results",
+    "Not to a specific vocabulary": "Not to a specific vocabulary",
+    "Open": "Open",
+    "Preferred terms": "Preferred terms",
+    "Resource counts by type": "Resource counts by type",
+    "%search_count% results for '%term%'": "%search_count% results for '%term%'",
+    "Search in this vocabulary": "Search in this vocabulary",
+    "Search": "Search",
+    "Search...": "Search...",
+    "Search text field": "Search text field",
+    "See": "See",
+    "Select search language": "Select search language",
+    "Select search vocabularies": "Select search vocabularies",
+    "Send feedback": "Send feedback",
+    "show all # values": "show all # values",
+    "Sidebar listing: list and traverse vocabulary contents by a criterion": "Sidebar listing: list and traverse vocabulary contents by a criterion",
+    "Skosmos version %version%": "Skosmos version %version%",
     "Subject": "Subject",
-    "Write a subject": "Write a subject",
-    "Message": "Message",
+    "Term counts by language": "Term counts by language",
+    "Text input with dropdown button": "Text input with dropdown button",
+    "The search provided no results.": "The search provided no results.",
+    "This concept has been deprecated.": "This concept has been deprecated.",
+    "To customize what is shown here, add one or more .twig template files under the %slotPath% directory.": "To customize what is shown here, add one or more .twig template files under the %slotPath% directory.",
+    "Truncated (too many items in list)": "Truncated (too many items in list)",
+    "Type": "Type",
     "Value is required and can not be empty": "Value is required and can not be empty",
-    "Send feedback": "Send feedback",
+    "Vocabulary": "Vocabulary",
     "Warning!": "Warning!",
-    "Choose alphabetical listing letter": "Choose alphabetical listing letter",
-    "Browse concepts": "Browse concepts",
-    "Hide concepts": "Hide concepts",
-    "Concepts loaded for letter %letter%": "Concepts loaded for letter %letter%"
+    "Write a subject": "Write a subject"
 }

resource/translations/messages.fi.json

@@ -236,4 +236,4 @@
     "wgs84:long": "Pituusaste",
     "wgs84:long_help": "Pituusaste WGS 84 -j\u00e4rjestelm\u00e4n mukaan desimaaliasteina.",
     "zxx-x-taxon": "Tieteellinen nimi"
-}
+}

resource/translations/messages.sv.json

@@ -231,4 +231,4 @@
     "wgs84:long": "Longitud",
     "wgs84:long_help": "Longitud som decimalgrader enligt WGS 84-systemet.",
     "zxx-x-taxon": "Vetenskapligt namn"
-}
+}