feat(search|a11y): announce results count, optional autofocus

datagouv-components/src/components/Search/GlobalSearch.vue

@@ -13,6 +13,7 @@
       <SearchInput
         v-model="q"
         :placeholder="resolvedPlaceholder"
+        :auto-focus
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -401,11 +402,17 @@ const props = withDefaults(defineProps<{
   config?: GlobalSearchConfig
   placeholder?: string | null
   hideSearchInput?: boolean
+  autoFocus?: boolean
 }>(), {
   config: getDefaultGlobalSearchConfig,
   hideSearchInput: false,
+  autoFocus: true,
 })
 
+const emit = defineEmits<{
+  resultsCount: [total: number]
+}>()
+
 // defineModel's default is static and can't depend on props, so we cast and initialize manually
 const currentType = defineModel<string>('type') as Ref<string>
 if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class: 'datasets' })
@@ -717,6 +724,10 @@ function resetFilters() {
 const searchResults = computed(() => resultsMap[currentType.value]?.data.value)
 const searchResultsStatus = computed(() => resultsMap[currentType.value]?.status.value)
 
+watch(searchResults, (results) => {
+  if (results) emit('resultsCount', results.total)
+}, { immediate: true })
+
 // RSS feed URL for datasets
 const rssUrl = computed(() => {
   if (currentTypeConfig.value?.class !== 'datasets') return null

datagouv-components/src/components/Search/SearchInput.vue

@@ -37,7 +37,7 @@ import BrandedButton from '../BrandedButton.vue'
 
 const q = defineModel<string>({ required: true })
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   placeholder?: string | null
   autoFocus?: boolean
 }>(), {
@@ -57,6 +57,7 @@ const focus = () => {
 }
 
 onMounted(async () => {
+  if (!props.autoFocus) return
   await nextTick()
   focus()
 })