feat: update accessibility and make visible only on focus/hover

Author: ghostdevv

app/components/Header/SearchBox.vue

@@ -67,10 +67,12 @@ defineExpose({ focus })
             v-if="hasSearchQuery"
             type="button"
             :aria-label="$t('common.close')"
-            class="absolute inset-ie-2 inline-flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            class="absolute inset-ie-2 h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent group-focus-within:flex group-hover:inline-flex hidden"
             @click="clearSearch"
+            aria-hidden="true"
+            tabindex="-1"
           >
-            <span class="i-lucide:circle-x h-4 w-4" aria-hidden="true" />
+            <span class="i-lucide:circle-x h-4 w-4" />
           </button>
           <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>