[BUG] [alpha] Critical A11y: Command Palette breaks screen reader navigation (Missing ARIA attributes)

[saurabhp1801]

Project

ide

Description

A critical accessibility regression exists in the Command Palette (src/components/palette/CommandPalette.tsx), which completely breaks keyboard navigation for screen reader users.

When users trigger the Command Palette (e.g., Ctrl+Shift+P), focus is placed on the text input. However, the input field lacks essential autocomplete ARIA attributes such as role="combobox", aria-expanded, and most critically, aria-activedescendant. As a user presses the Up/Down arrow keys to navigate the filtered commands, the visual selection changes, but screen readers are given absolutely no indication of which command is currently selected.

Impact: The Command Palette is the primary keyboard interface for the entire IDE. Without proper WAI-ARIA combobox patterns, blind and visually impaired users are completely blocked from effectively utilizing the Command Palette, violating WCAG 4.1.2 (Name, Role, Value).

Screenshots

Steps to Reproduce

1. Launch Cortex IDE and press Ctrl+Shift+P to open the Command Palette.
2. Note that focus moves directly into the search <input>.
3. Use gh or any screen reader inspection tool to view the properties of the <input> element.
4. Issue: The <input> has only standard attributes (placeholder, type, value), missing the role="combobox".
5. Press the Down Arrow key to change the selected command.
6. Issue: Notice the selected <div> receives aria-selected="true", but because the <input> still holds focus without an aria-activedescendant attribute pointing to the selected option's ID, the screen reader does not announce the new selection.

Expected Behavior

The Command Palette must implement the WAI-ARIA Autocomplete pattern:

1. The <input> should have role="combobox", aria-autocomplete="list", aria-expanded="true", and aria-controls="command-palette-list".
2. As the user presses Arrow keys, the aria-activedescendant attribute on the <input> must dynamically update to match the id of the currently selected role="option".
3. Each option must have a unique, deterministic id.

Actual Behavior

The implementation in src/components/palette/CommandPalette.tsx omits aria-activedescendant and unique IDs:

// Current implementation (Lines 209-211) lacks ARIA combobox attributes
<input ref={inputRef} type="text" placeholder={subMode() ? "Filter..." : "Type a command..."} value={query()}
  onInput={e => setQuery(e.currentTarget.value)} onKeyDown={handleKeyDown}
  style={{ ... }} />
  
// Options lack IDs for aria-activedescendant to target (Lines 175-176)
<div data-palette-item style={itemStyle(sel())} role="option" aria-selected={sel()}
  onMouseEnter={() => setSelectedIndex(flatIdx())} onClick={() => handleSelect(cmd.id)}>

Component Location

File: src/components/palette/CommandPalette.tsx

[echobt]

✅ Validated

VALID - This is a distinct accessibility bug in the Command Palette component. While the screenshot URL is unavailable (404), the issue includes accurate code snippets from src/components/palette/CommandPalette.tsx that match the actual source code.

VERIFIED BUG: The input element (lines ~209-211) lacks critical ARIA combobox attributes:

• Missing role="combobox"
• Missing aria-activedescendant (critical for announcing selected option)
• Missing aria-expanded and aria-controls

The option elements have role="option" but lack unique IDs required for aria-activedescendant to reference.

DUPLICATE CHECK: Although similarity scores are high (0.88+) with other Command Palette a11y issues, semantic comparison confirms this is UNIQUE:

• [BUG] [alpha] CommandPalette "No commands found" status text has no aria-live — screen readers do not announce empty result state #27956: Empty state aria-live (different)
• [BUG] [alpha] Test Explorer search field has no explicit accessible name #32891: Input aria-label (different)
• [bug][alpha] CommandPalette: Dialog container missing aria-modal="true" #30608: Dialog aria-modal (different)
• This issue: Combobox navigation pattern with aria-activedescendant (unique)

The component is accessible via Ctrl+Shift+P and this bug blocks screen reader users from knowing which command is selected during keyboard navigation, violating WCAG 4.1.2.

[gonzoblasco]

I'd like to fix this — the WAI-ARIA Autocomplete pattern is well-defined and I can implement it. Is this repo open to direct PRs, or is this issue part of the bounty system where miners compete for rewards?