ARIA Live Region Builder

<!-- Static live region — always present in DOM, update content dynamically -->
<div
  role="status"
  aria-live="polite"
  aria-atomic="true"
  aria-relevant="additions text"
  class="sr-only"
  id="live-region"
></div>

<!-- CSS: visually hidden but readable by screen readers -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

// JavaScript: announce messages
function announce(message: string) {
  const region = document.getElementById("live-region");
  if (!region) return;
  region.textContent = ""; // clear first (ensures announcement)
  requestAnimationFrame(() => { region.textContent = message; });
}

// Usage:
announce("3 results found");
announce("Form submitted successfully");