[BUG] [alpha] MessageInput: context mention shortcut buttons (@file, @selection, @workspace) lose accessible name at small viewport — icon-only with no aria-label

[hconsulting987654321-blip]

Project

cortex-ide

Description

The context mention shortcut buttons (@file, @selection, @workspace) each contain an Icon and a text <span class="hidden sm:inline">. At small viewport widths, the text is hidden via CSS, leaving icon-only buttons with only a title attribute and no aria-label. Since title is not reliably announced as the accessible name, these buttons become effectively unlabeled.

Visual Evidence

Affected Element

MessageInput.tsx:982-998 — three shortcut buttons:

<button title={mention.label} onClick={() => insertMention(mention)}>
  <Icon name={mention.icon} />
  <span class="hidden sm:inline">{mention.label}</span>
</button>

At < sm breakpoint, the <span> is display: none, leaving only the Icon with no text content and no aria-label.

Steps to Reproduce

1. Resize the sidebar to narrow width (below sm breakpoint)
2. The @file/@selection/@workspace buttons show only icons
3. Screen reader announces "button" with no accessible name

Expected Behavior

Each button should have aria-label={mention.label} as a fallback when the text span is hidden (WCAG 4.1.2).

Actual Behavior

Icon-only buttons with empty accessible name at small viewports.

[allornothingai]

Fixed in CortexLM/cortex-ide#59

[allornothingai]

Just checking in on this bounty submission. Is there any further review required? If accepted, my verified payout wallet is:

0x0c67cbE9e30c66267975eE2D74Eb88036CA65e9F

[hconsulting987654321-blip]

Closing — 'button missing accessible name' pattern is globally saturated. 1 bug per pattern rule.