From b6455a151dfe0042a5fc00b5426d4c873d5a9585 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Thu, 12 Jan 2023 12:32:42 +0100
Subject: [PATCH] chore(lighthouse): improve components accessibility (#127)

---
 src/runtime/components/elements/Dropdown.vue         | 8 +++++++-
 src/runtime/components/forms/SelectCustom.vue        | 4 ++--
 src/runtime/components/navigation/CommandPalette.vue | 9 ++++++++-
 src/runtime/components/overlays/Popover.vue          | 2 +-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index 43527cd6..2158934d 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -1,6 +1,12 @@
 <template>
   <Menu v-slot="{ open }" as="div" :class="wrapperClass" @mouseleave="onMouseLeave">
-    <MenuButton ref="trigger" as="div" class="inline-flex w-full" @mouseover="onMouseOver">
+    <MenuButton
+      ref="trigger"
+      as="div"
+      class="inline-flex w-full"
+      role="button"
+      @mouseover="onMouseOver"
+    >
       <slot :open="open">
         <button>Open</button>
       </slot>
diff --git a/src/runtime/components/forms/SelectCustom.vue b/src/runtime/components/forms/SelectCustom.vue
index 654c5210..de4ac2aa 100644
--- a/src/runtime/components/forms/SelectCustom.vue
+++ b/src/runtime/components/forms/SelectCustom.vue
@@ -10,9 +10,9 @@
     :class="wrapperClass"
     @update:model-value="onUpdate"
   >
-    <input :value="modelValue" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default" tabindex="-1">
+    <input :value="modelValue" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default" tabindex="-1" aria-hidden="true">
 
-    <ComboboxButton ref="trigger" v-slot="{ disabled: buttonDisabled }" as="div" class="inline-flex w-full">
+    <ComboboxButton ref="trigger" v-slot="{ disabled: buttonDisabled }" as="div" role="button" class="inline-flex w-full">
       <slot :open="open" :disabled="buttonDisabled">
         <button :class="selectCustomClass" :disabled="disabled" type="button">
           <slot name="label">
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index 0d139674..0cae947d 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -19,7 +19,14 @@
           @change="query = $event.target.value"
         />
 
-        <Button v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
+        <Button
+          v-if="closeIcon"
+          :icon="closeIcon"
+          variant="transparent"
+          class="absolute right-3"
+          aria-label="close"
+          @click="onClear"
+        />
       </div>
 
       <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index 626a2af5..d50f2a83 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -1,6 +1,6 @@
 <template>
   <Popover v-slot="{ open, close }" :class="wrapperClass" @mouseleave="onMouseLeave">
-    <PopoverButton ref="trigger" as="div" class="inline-flex w-full" @mouseover="onMouseOver">
+    <PopoverButton ref="trigger" as="div" class="inline-flex w-full" role="button" @mouseover="onMouseOver">
       <slot :open="open" :close="close">
         <button>Open</button>
       </slot>