Skip to content

fix(a11y): add keyboard support to interactive non-button elements#470

Open
akinshaywai wants to merge 1 commit intoalibaba:mainfrom
akinshaywai:fix/a11y-keyboard-interactive-elements
Open

fix(a11y): add keyboard support to interactive non-button elements#470
akinshaywai wants to merge 1 commit intoalibaba:mainfrom
akinshaywai:fix/a11y-keyboard-interactive-elements

Conversation

@akinshaywai
Copy link
Copy Markdown
Contributor

Problem

Two interactive elements were only accessible via mouse, failing WCAG 2.1 SC 2.1.1 (Keyboard):

1. ReflectionItem in cards.tsx

A <span> used as a toggle to expand/collapse reflection text. It had an onClick handler but:

  • No role="button" — screen readers didn't identify it as interactive
  • No tabIndex — keyboard users couldn't focus it
  • No onKeyDown — pressing Enter or Space did nothing

2. Session list item in HistoryList.tsx

A <div role="button" tabIndex={0}> was already focusable, but had no onKeyDown handler, so keyboard users who pressed Enter or Space to activate it got no response.

Fix

cards.tsxReflectionItem:

  • Added role="button", tabIndex={0}, aria-expanded={expanded}
  • Added onKeyDown to toggle on Enter / Space

HistoryList.tsx:

  • Added onKeyDown to match the existing onClick behaviour

Test Plan

  • Focus the reflection text items with Tab and press Enter/Space — they should expand/collapse
  • Focus a session history row with Tab and press Enter/Space — it should open the session

ReflectionItem in cards.tsx used a plain <span> with onClick but no
keyboard handler, making it inaccessible to keyboard users. Added
role='button', tabIndex={0}, aria-expanded, and onKeyDown (Enter/Space).

The session list item in HistoryList.tsx had role='button' and tabIndex
but was missing an onKeyDown handler, so keyboard users could not
activate it. Added the missing handler.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant