GitHub

Creating an accessible search experience with the QueryBuilder component

Dec 13, 2022Lindsey Wild
Creating an accessible search experience with the QueryBuilder component
SummaryAI, from the source post

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