From bea47b5906d1bc665717830d6dc2f3ff2a0374f3 Mon Sep 17 00:00:00 2001
From: Kevin Marrec <kevin@marrec.io>
Date: Fri, 3 Feb 2023 16:01:43 +0100
Subject: [PATCH] fix(CommandPalette): improve accessibility (#129)

---
 src/runtime/components/navigation/CommandPalette.vue | 11 +++++++++--
 .../components/navigation/CommandPaletteGroup.vue    | 12 ++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index 2e07a37f..de658dfb 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -25,12 +25,19 @@
           :class="$ui.commandPalette.input.close.base"
           :size="$ui.commandPalette.input.close.size"
           :variant="$ui.commandPalette.input.close.variant"
-          aria-label="close"
+          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">
+      <ComboboxOptions
+        v-if="groups.length"
+        static
+        hold
+        as="div"
+        aria-label="Commands"
+        class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2"
+      >
         <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" :group-attribute="groupAttribute" :command-attribute="commandAttribute">
           <template v-for="(_, name) in $slots" #[name]="slotData">
             <slot :name="name" v-bind="slotData" />
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index 63d8e0f4..e7556d07 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -1,10 +1,10 @@
 <template>
-  <li class="p-2" role="option">
+  <div class="p-2" role="option">
     <h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
       {{ group[groupAttribute] }}
     </h2>
 
-    <ul class="text-sm u-text-gray-700">
+    <div class="text-sm u-text-gray-700" role="listbox" :aria-label="group[groupAttribute]">
       <ComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"
@@ -13,7 +13,7 @@
         :disabled="command.disabled"
         as="template"
       >
-        <li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
+        <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div class="flex items-center gap-2 min-w-0">
             <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
             <Avatar
@@ -45,10 +45,10 @@
             </span>
             <span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span>
           </slot>
-        </li>
+        </div>
       </ComboboxOption>
-    </ul>
-  </li>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">