From 8426556cc0199e1bf02c62ad4256536bf7a7ba14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20R=C3=BCtter?= <me@mynetx.net>
Date: Wed, 28 Oct 2026 22:57:33 +0000
Subject: [PATCH] Fix invalid ARIA in the command palette

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../command-palette/CommandPalette.vue        | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/command-palette/CommandPalette.vue b/resources/js/components/command-palette/CommandPalette.vue
index da345e3a452..7ca10a76e4d 100644
--- a/resources/js/components/command-palette/CommandPalette.vue
+++ b/resources/js/components/command-palette/CommandPalette.vue
@@ -323,7 +323,7 @@ router.on('start', () => Statamic.$commandPalette.clear());
         </DialogTrigger>
         <DialogPortal>
             <DialogOverlay class="fixed inset-0 z-30 bg-gray-800/20 backdrop-blur-[2px] dark:bg-gray-800/50" />
-            <DialogContent :class="[modalClasses, $attrs.class]" data-ui-modal-content :aria-describedby="undefined">
+            <DialogContent :class="[modalClasses, $attrs.class]" data-ui-modal-content aria-modal="true" :aria-describedby="undefined">
                 <VisuallyHidden asChild>
                     <DialogTitle>{{ __('Command Palette') }}</DialogTitle>
                 </VisuallyHidden>
@@ -354,7 +354,7 @@ router.on('start', () => Statamic.$commandPalette.clear());
                                 class="flex w-full bg-transparent py-4 text-lg antialiased outline-none placeholder:text-gray-500!"
                             />
                         </header>
-                        <ComboboxContent>
+                        <ComboboxContent :aria-label="__('Search results')">
                             <ComboboxViewport class="max-h-[360px] min-h-[360px] divide-y divide-gray-200/80 overflow-y-auto dark:divide-gray-950">
                                 <ComboboxEmpty v-if="query && !results.length" class="px-3 py-2 opacity-50">
                                     <CommandPaletteItem :text="__('No results found!')" icon="entry" disabled />
@@ -397,18 +397,18 @@ router.on('start', () => Statamic.$commandPalette.clear());
                                     </ComboboxItem>
                                 </ComboboxGroup>
                             </ComboboxViewport>
-                            <footer class="flex items-center gap-4 rounded-b-xl border-t border-gray-200/80 bg-gray-50 px-6 py-3 dark:border-gray-950 dark:bg-gray-800/20">
-                                <div class="flex items-center gap-1.5">
-                                    <Icon name="up-square" class="size-4 text-gray-500" />
-                                    <Icon name="down-square" class="size-4 text-gray-500" />
-                                    <span class="text-sm text-gray-600 dark:text-gray-500">{{ __('Navigate') }}</span>
-                                </div>
-                                <div class="flex items-center gap-1.5">
-                                    <Icon name="return-square" class="size-4 text-gray-500" />
-                                    <span class="text-sm text-gray-600 dark:text-gray-500">{{ __('Select') }}</span>
-                                </div>
-                            </footer>
                         </ComboboxContent>
+                        <footer @mousedown.prevent class="flex items-center gap-4 rounded-b-xl border-t border-gray-200/80 bg-gray-50 px-6 py-3 dark:border-gray-950 dark:bg-gray-800/20">
+                            <div class="flex items-center gap-1.5">
+                                <Icon name="up-square" class="size-4 text-gray-500" />
+                                <Icon name="down-square" class="size-4 text-gray-500" />
+                                <span class="text-sm text-gray-600 dark:text-gray-500">{{ __('Navigate') }}</span>
+                            </div>
+                            <div class="flex items-center gap-1.5">
+                                <Icon name="return-square" class="size-4 text-gray-500" />
+                                <span class="text-sm text-gray-600 dark:text-gray-500">{{ __('Select') }}</span>
+                            </div>
+                        </footer>
                     </ComboboxRoot>
                 </motion.div>
             </DialogContent>