ARIA Live Region for Dynamic Announcements

<!-- Polite — waits until the user is idle (chat messages, status updates) -->
<div role="status" aria-live="polite" aria-atomic="true" class="sr-only" id="status">
    <!-- JS writes here; screen reader announces -->
</div>

<!-- Assertive — interrupts immediately (errors, urgent alerts) -->
<div role="alert" aria-live="assertive" class="sr-only" id="errors">
</div>

<script>
function announce(msg, urgent = false) {
    const region = document.getElementById(urgent ? 'errors' : 'status');
    region.textContent = '';                  // reset so identical messages re-announce
    setTimeout(() => { region.textContent = msg; }, 50);
}

// Examples:
announce('Saved successfully');
announce('Could not save — check your connection', true);
</script>

<!-- aria-atomic="true" reads the WHOLE region on change, not just the diff.
     For a counter ("5 items loaded → 10 items loaded"), set atomic=true.
     For a chat log where new items append, set atomic=false. -->