Creating an accessible search experience with the QueryBuilder component
Dec 13, 2022Lindsey Wild

Summary
Introduced the QueryBuilder component, a fully accessible component designed for complex search inputs with filtering capabilities. Detailed accessibility considerations including semantics (Combobox pattern), styled input implementation using a hidden div and spans, handling items with different actions ('Jump to' vs. 'Autocomplete') via aria-labels, group support with visual headers and screen reader specific aria-labels, and screen reader feedback using aria-live regions for suggestion counts and input clearing.
More from the Design System Annotations trail
- Design system annotations, part 2: Advanced methods of annotating components
- Design system annotations, part 1: How accessibility gets left out of components
- Considerations for making a tree view component accessible
- Design's journey towards accessibility
- Unlocking inclusive design: how Primer's color system is making GitHub.com more inclusive