Hub: index · watch · videos

List filtering: keep focus + announce match counts (demo)

This micro-demo compares a client-side list filter that steals focus and uses assertive announcements (BEFORE) to a filter that keeps focus in the input, supports Esc to clear, and announces match counts politely (AFTER).

Companion note: List filtering checklist

BEFORE focus stealing + live spam

Try typing in the filter field. This version moves focus into the results after every change. It also announces on every keystroke via an aria-live="assertive" region (interrupts speech).

Demo library Ready
Showing 12 of 12.
  1. Dialogs (modals)Focus trap + Escape + restore.
  2. Popovers (non-modal)Button trigger + close behavior.
  3. Menu buttonArrow keys + Escape + focus return.
  4. ComboboxTypeahead suggestions without trapping.
  5. TabsRoving tabindex + activation mode.
  6. TreeviewExpand/collapse + roving focus.
  7. Read moreToggle content with aria-expanded.
  8. Rating (stars)Use radios; announce selected value.
  9. Date pickerTyping first, calendar optional.
  10. Search resultsAnnounce count changes politely.
  11. Load moreAnnounce inserted content.
  12. Copy to clipboardStatus announcement; no focus theft.

AFTER calm + keyboard friendly

Principles: keep focus in the filter input; show a visible count; announce updates politely (debounced); provide Esc to clear and a Clear button that appears only when needed.

Demo library Ready
Type to filter. Press Escape to clear.
Showing 12 of 12.
  1. Dialogs (modals)Focus trap + Escape + restore.
  2. Popovers (non-modal)Button trigger + close behavior.
  3. Menu buttonArrow keys + Escape + focus return.
  4. ComboboxTypeahead suggestions without trapping.
  5. TabsRoving tabindex + activation mode.
  6. TreeviewExpand/collapse + roving focus.
  7. Read moreToggle content with aria-expanded.
  8. Rating (stars)Use radios; announce selected value.
  9. Date pickerTyping first, calendar optional.
  10. Search resultsAnnounce count changes politely.
  11. Load moreAnnounce inserted content.
  12. Copy to clipboardStatus announcement; no focus theft.