From 5054a415d810fa635ee771171fb48ea335146a53 Mon Sep 17 00:00:00 2001
From: TechTide AI <alexjobs23@gmail.com>
Date: Thu, 21 May 2026 18:54:58 -0400
Subject: [PATCH] fix(a11y): add ARIA combobox pattern to command palette and
 quick open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both picker overlays lacked ARIA attributes, making them invisible to
screen readers. This adds:

- role=dialog + aria-modal + aria-label on the overlay container
- aria-autocomplete=list + aria-controls on the search input
- aria-activedescendant pointing to the currently highlighted item
- role=listbox on the results container
- role=option + aria-selected on each result item

No visual or behavioral changes — purely assistive technology support.
---
 components/command-palette.tsx | 12 +++++++++++-
 components/quick-open.tsx      | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/command-palette.tsx b/components/command-palette.tsx
index 606b188..6c8fb29 100644
--- a/components/command-palette.tsx
+++ b/components/command-palette.tsx
@@ -519,6 +519,9 @@ export function CommandPalette({ open, onClose, onRun }: CommandPaletteProps) {
       onClick={onClose}
     >
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
         className="flex max-h-[85vh] w-full max-w-full flex-col overflow-hidden rounded-t-2xl border border-[var(--border)] bg-[var(--bg-elevated)] shadow-[var(--shadow-xl)] animate-scale-in sm:max-h-none sm:max-w-[640px] sm:rounded-xl"
         onClick={(e) => e.stopPropagation()}
       >
@@ -551,6 +554,10 @@ export function CommandPalette({ open, onClose, onRun }: CommandPaletteProps) {
               }
             }}
             placeholder="Run a command..."
+            aria-label="Run a command"
+            aria-autocomplete="list"
+            aria-controls="command-palette-list"
+            aria-activedescendant={flatList[selectedIndex] ? `command-palette-item-${selectedIndex}` : undefined}
             className="flex-1 bg-transparent text-[14px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]"
           />
           <kbd className="rounded border border-[var(--border)] bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[9px] text-[var(--text-tertiary)]">
@@ -558,7 +565,7 @@ export function CommandPalette({ open, onClose, onRun }: CommandPaletteProps) {
           </kbd>
         </div>
 
-        <div ref={listRef} className="max-h-[420px] overflow-y-auto p-1.5">
+        <div ref={listRef} id="command-palette-list" role="listbox" aria-label="Commands" className="max-h-[420px] overflow-y-auto p-1.5">
           {flatList.length === 0 && (
             <div className="px-3 py-5 text-center text-[12px] text-[var(--text-tertiary)]">
               No matching commands
@@ -578,6 +585,9 @@ export function CommandPalette({ open, onClose, onRun }: CommandPaletteProps) {
                 return (
                   <button
                     key={`${key}-${command.id}`}
+                    id={`command-palette-item-${idx}`}
+                    role="option"
+                    aria-selected={isSelected}
                     data-selected={isSelected}
                     onClick={() => run(command)}
                     className={cn(
diff --git a/components/quick-open.tsx b/components/quick-open.tsx
index 1e29e05..8bdd321 100644
--- a/components/quick-open.tsx
+++ b/components/quick-open.tsx
@@ -197,6 +197,9 @@ export function QuickOpen({ open, onClose, onSelect }: QuickOpenProps) {
       onClick={onClose}
     >
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Go to file"
         className="flex max-h-[85vh] w-full max-w-full flex-col overflow-hidden rounded-t-2xl border border-[var(--border)] bg-[var(--bg-elevated)] shadow-[var(--shadow-xl)] sm:max-h-none sm:max-w-[560px] sm:rounded-xl"
         onClick={(e) => e.stopPropagation()}
       >
@@ -218,6 +221,10 @@ export function QuickOpen({ open, onClose, onSelect }: QuickOpenProps) {
             }}
             onKeyDown={handleKeyDown}
             placeholder="Search files by name..."
+            aria-label="Search files"
+            aria-autocomplete="list"
+            aria-controls="quick-open-list"
+            aria-activedescendant={results[selected] ? `quick-open-item-${selected}` : undefined}
             className="flex-1 bg-transparent text-[14px] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] outline-none"
           />
           <kbd className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--bg-subtle)] border border-[var(--border)] text-[var(--text-tertiary)]">
@@ -226,7 +233,7 @@ export function QuickOpen({ open, onClose, onSelect }: QuickOpenProps) {
         </div>
 
         {/* Results */}
-        <div ref={listRef} className="max-h-[400px] overflow-y-auto py-1">
+        <div ref={listRef} id="quick-open-list" role="listbox" aria-label="Files" className="max-h-[400px] overflow-y-auto py-1">
           {results.length === 0 && (
             <div className="px-4 py-6 text-center text-[12px] text-[var(--text-tertiary)]">
               {query ? 'No matching files' : 'No files in tree'}
@@ -240,6 +247,9 @@ export function QuickOpen({ open, onClose, onSelect }: QuickOpenProps) {
             return (
               <button
                 key={r.node.path}
+                id={`quick-open-item-${i}`}
+                role="option"
+                aria-selected={i === selected}
                 onClick={() => {
                   onSelect(r.node.path, r.node.sha)
                   onClose()