fix(theme): search's configuration about buttonAriaLabel doesn't work (#3070)

Author: zonemeen

Diff for: src/client/theme-default/components/VPLocalSearchBox.vue

@@ -31,10 +31,6 @@ import { pathToFile } from '../../app/utils'
 import { useData } from '../composables/data'
 import { createTranslate } from '../support/translation'
 
-defineProps<{
-  placeholder: string
-}>()
-
 const emit = defineEmits<{
   (e: 'close'): void
 }>()
@@ -115,6 +111,16 @@ const disableDetailedView = computed(() => {
   )
 })
 
+const buttonText = computed(() => {
+  const options = theme.value.search?.options ?? theme.value.algolia
+
+  return (
+    options?.locales?.[localeIndex.value]?.translations?.button?.buttonText ||
+    options?.translations?.button?.buttonText ||
+    'Search'
+  )
+})
+
 watchEffect(() => {
   if (disableDetailedView.value) {
     showDetailedList.value = false
@@ -414,7 +420,7 @@ function formMarkRegex(terms: Set<string>) {
           @submit.prevent=""
         >
           <label
-            :title="placeholder"
+            :title="buttonText"
             id="localsearch-label"
             for="localsearch-input"
           >
@@ -463,7 +469,7 @@ function formMarkRegex(terms: Set<string>) {
           <input
             ref="searchInput"
             v-model="filterText"
-            :placeholder="placeholder"
+            :placeholder="buttonText"
             id="localsearch-input"
             aria-labelledby="localsearch-label"
             class="search-input"

Diff for: src/client/theme-default/components/VPNavBarSearch.vue

@@ -2,7 +2,6 @@
 import '@docsearch/css'
 import { onKeyStroke } from '@vueuse/core'
 import {
-  computed,
   defineAsyncComponent,
   onMounted,
   onUnmounted,
@@ -20,24 +19,14 @@ const VPAlgoliaSearchBox = __ALGOLIA__
   ? defineAsyncComponent(() => import('./VPAlgoliaSearchBox.vue'))
   : () => null
 
-const { theme, localeIndex } = useData()
+const { theme } = useData()
 
 // to avoid loading the docsearch js upfront (which is more than 1/3 of the
 // payload), we delay initializing it until the user has actually clicked or
 // hit the hotkey to invoke it.
 const loaded = ref(false)
 const actuallyLoaded = ref(false)
 
-const buttonText = computed(() => {
-  const options = theme.value.search?.options ?? theme.value.algolia
-
-  return (
-    options?.locales?.[localeIndex.value]?.translations?.button?.buttonText ||
-    options?.translations?.button?.buttonText ||
-    'Search'
-  )
-})
-
 const preconnect = () => {
   const id = 'VPAlgoliaPreconnect'
 
@@ -145,15 +134,11 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
     <template v-if="provider === 'local'">
       <VPLocalSearchBox
         v-if="showSearch"
-        :placeholder="buttonText"
         @close="showSearch = false"
       />
 
       <div id="local-search">
-        <VPNavBarSearchButton
-          :placeholder="buttonText"
-          @click="showSearch = true"
-        />
+        <VPNavBarSearchButton @click="showSearch = true" />
       </div>
     </template>
 
@@ -165,7 +150,7 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
       />
 
       <div v-if="!actuallyLoaded" id="docsearch">
-        <VPNavBarSearchButton :placeholder="buttonText" @click="load" />
+        <VPNavBarSearchButton @click="load" />
       </div>
     </template>
   </div>

Diff for: src/client/theme-default/components/VPNavBarSearchButton.vue

@@ -1,11 +1,23 @@
 <script lang="ts" setup>
-defineProps<{
-  placeholder: string
-}>()
+import type { ButtonTranslations } from '../../../../types/local-search'
+import { useData } from '../composables/data'
+import { createTranslate } from '../support/translation'
+
+const { theme } = useData()
+
+// Button-Translations
+const defaultTranslations: { button: ButtonTranslations } = {
+  button: {
+    buttonText: 'Search',
+    buttonAriaLabel: 'Search',
+  }
+}
+
+const $t = createTranslate(theme.value.search?.options, defaultTranslations)
 </script>
 
 <template>
-  <button type="button" class="DocSearch DocSearch-Button" aria-label="Search">
+  <button type="button" class="DocSearch DocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
     <span class="DocSearch-Button-Container">
       <svg
         class="DocSearch-Search-Icon"
@@ -23,7 +35,7 @@ defineProps<{
           stroke-linejoin="round"
         />
       </svg>
-      <span class="DocSearch-Button-Placeholder">{{ placeholder }}</span>
+      <span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
     </span>
     <span class="DocSearch-Button-Keys">
       <kbd class="DocSearch-Button-Key"></kbd>