Search + filters: announce results, don’t steal focus

What goes wrong

• Silent changes: Filtering updates the list, but screen readers/users get no announcement.
• Focus loss: Some UIs move focus away (to results, or clear button) with every change—disrupting users.
• Confusing 0 results: When nothing matches, it just shows “no items” visually—unsure if intentional, or if the filter’s broken.

What to do instead

• Use a live region (e.g., role="status" aria-live="polite") to announce results count every filter/search update.
• Implement a predictable empty state (with a message/icon, not just a blank area).
• DON’T move focus after filters/search (keep it on user’s input unless they change it directly).
• For keyboard users: let Escape clear the search only while input is focused (and put focus back).
• All labels should be real <label for> with clear help text if needed.
• Ensure color and empty messaging are visible across all themes (color-safe/contrast etc.).

Implementation checklist

• Add a status region with role="status" and aria-live="polite"
• Update status region’s text content on every filter or search change
• Show a clear empty state if there are 0 results (and keep status visible)
• Do not move focus automatically during filtering (unless clearing with Escape)
• Escape key clears input (while search is focused)
• All filters/inputs have visible <label> and help text
• Test color contrast and clarity in color-safe/high-contrast themes

Minimal code: status region + updater

<!-- Results count / status (always present) -->
<div id="statusMsg" role="status" aria-live="polite" aria-atomic="true">
  Showing 15 of 15 items
</div>

<!-- Keep updates simple: replace textContent; don't move focus -->
<script>
  function updateStatus(shown, total) {
    const msg = shown === 0
      ? `No items match (${total} total)`
      : `Showing ${shown} of ${total} items`;
    document.getElementById('statusMsg').textContent = msg;
  }
</script>