Skip to content

feat: add accessible endpoint search combobox (Closes #379) - #971

Open
waterWang wants to merge 1 commit into
CalloraOrg:mainfrom
waterWang:feat/high-contrast-tagchip-952
Open

feat: add accessible endpoint search combobox (Closes #379)#971
waterWang wants to merge 1 commit into
CalloraOrg:mainfrom
waterWang:feat/high-contrast-tagchip-952

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds an accessible combobox for searching/filtering API endpoints by title, URL, method, group, and API name.

Changes

  • New: src/components/EndpointSearch.tsx — ARIA combobox pattern with real-time filtering
  • New: src/components/EndpointSearch.test.tsx — 33 tests covering all behaviors
  • Updated: src/setupTests.ts — added scrollIntoView mock for jsdom compatibility

Accessibility (WCAG 2.1 AA)

  • role="combobox" with aria-expanded, aria-controls, aria-activedescendant
  • role="listbox" with role="option" children and aria-selected
  • Full keyboard navigation (ArrowDown/Up, Enter, Escape, Home, End)
  • Screen-reader announcements via LiveRegion
  • Clear button with accessible label

Testing

✓ 33 tests passed (33)

Closes #379

GrantFox FWC26 campaign: implement a searchable combobox for filtering
API endpoints by title, URL, method, group, and API name.

- ARIA combobox pattern with listbox (role=combobox / role=listbox / role=option)
- Real-time filtering with relevance scoring
- Full keyboard navigation (ArrowDown/Up, Enter, Escape, Home/End)
- Screen-reader announcements via LiveRegion
- Clear button with accessible label
- 33 focused tests covering filtering, selection, keyboard, a11y, and edge cases
- scrollIntoView mock added to setupTests for jsdom compatibility
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.

Add accessible search on endpoints

1 participant