Live Regions for Dynamic Updates

<!-- Polite: announces when screen reader is idle -->
<div id="status" role="status" aria-live="polite">
  Ready
</div>

<!-- Assertive: interrupts current announcement -->
<div id="alert" role="alert" aria-live="assertive">
</div>

<!-- Log region for sequential messages -->
<div id="log" role="log" aria-live="polite" aria-relevant="additions">
</div>

<!-- Timer updates -->
<div id="timer" role="timer" aria-live="off" aria-atomic="true">
  00:00
</div>

<button onclick="showStatus('Processing...')">Start</button>
<button onclick="showAlert('Error: Invalid input')">Trigger Error</button>
<button onclick="addLog('New message')">Add Log</button>

<script>
  function showStatus(message) {
    document.getElementById('status').textContent = message;
    setTimeout(() => {
      document.getElementById('status').textContent = 'Complete';
    }, 2000);
  }

  function showAlert(message) {
    const alert = document.getElementById('alert');
    alert.textContent = '';
    setTimeout(() => {
      alert.textContent = message;
    }, 100);
  }

  function addLog(message) {
    const log = document.getElementById('log');
    const entry = document.createElement('div');
    entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
    log.appendChild(entry);
  }

  let seconds = 0;
  const timer = document.getElementById('timer');
  setInterval(() => {
    seconds++;
    const m = String(Math.floor(seconds / 60)).padStart(2, '0');
    const s = String(seconds % 60).padStart(2, '0');
    timer.textContent = `${m}:${s}`;
  }, 1000);
</script>