Building an Accessible Angular Combobox: What the ARIA Checklist Doesn't Tell You
Your combobox passes the audit. It still doesn't work with a screen reader. I've been building frontends for 13 years, and I've used a lot of open source along the way. This year I wanted to give something back. So I decided my first contribution would be small, and I'd do it properly. I picked a combobox. It looks like the simplest component there is: an input, a list, pick one. It isn't. Most…
Building an Accessible Angular Combobox: Unveiling the ARIA Checklist Gaps
This article delves into the intricacies of creating an accessible Angular combobox component, exploring aspects that go beyond a simple ARIA checklist. The author, who has over a decade of experience in frontend development, emphasizes that while the checklist may seem straightforward, it falls short in delivering a true user-friendly experience with screen readers.
The core issues revolve around focus management, announcement of filtered results, and keyboard navigation. By implementing virtual focus, the author ensures that the input field retains focus while an active descendant is announced, preventing users from being unable to type and losing track of their selection. A separate live region is used to announce the number of results left in the filtered list, offering a polite update without interrupting the user.
Keyboard interactions also receive meticulous attention. The Escape key serves dual purposes, closing the list while retaining the typed input upon its first press, and clearing the field when pressed again. The article highlights the importance of stopping navigation at the ends of the list, avoiding wrapping that could mislead users. Disabled options remain visible but are skipped by the arrow keys, and the announcement count stays consistent regardless of how the list is populated.
Lastly, the article discusses the restoration of the selected label when the input loses focus and how blur events correctly revert the field to the user's last selection, ensuring a seamless user experience.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.