From d29920050e7d4ee06be81b1f84b2c27d362b3b68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Fri, 7 Oct 2022 09:28:26 +0200
Subject: [PATCH] fix(app-search): add arial label and kbd identifiers to
 search button

---
 theme/components/AppSearch.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/theme/components/AppSearch.vue b/theme/components/AppSearch.vue
index a1fe3be21..309c74dbf 100644
--- a/theme/components/AppSearch.vue
+++ b/theme/components/AppSearch.vue
@@ -8,11 +8,15 @@ const onClick = () => element.value.querySelector('button').click()
   <div class="relative pointer-events-auto group" @click="onClick">
     <button
       type="button"
+      aria-label="Search"
       class="u-text-gray-500 hover:u-text-gray-700 lg:u-ring-gray-100 lg:group-hover:u-ring-gray-300 flex w-full items-center text-sm lg:rounded-md lg:py-1.5 lg:pl-2 lg:pr-3 lg:shadow-sm lg:ring-1"
     >
       <Icon name="heroicons-outline:search" class="flex-none w-6 h-6 lg:mr-2 lg:h-4 lg:w-4" />
       <span class="hidden text-xs font-medium lg:block">Search</span>
-      <span class="flex-none hidden pl-3 ml-auto text-xs font-semibold u-text-gray-400 lg:block">⌘K</span>
+      <span class="flex-none hidden pl-3 ml-auto text-xs font-semibold u-text-gray-400 lg:block">
+        <kbd>⌘</kbd>
+        <kbd>K</kbd>
+      </span>
     </button>
   </div>
 </template>