Announce dynamic content with ARIA live regions

<!-- Polite: Announced after current speech finishes -->
<div aria-live="polite" id="status">
  <!-- Content inserted here will be announced -->
</div>
 
<!-- Assertive: Interrupts current speech immediately -->
<div aria-live="assertive" id="error">
  <!-- Critical messages only -->
</div>

<!-- role="alert" implies aria-live="assertive" -->
<div role="alert">
  Your session will expire in 2 minutes
</div>
 
<!-- role="status" implies aria-live="polite" -->
<div role="status">
  3 items added to cart
</div>

function FormField({ label, error }) {
  const errorId = `${label}-error`
 
  return (
    <div>
      <label>{label}</label>
      <input aria-describedby={error ? errorId : undefined} />
      {/* Live region for errors */}
      <div role="alert" id={errorId}>
        {error}
      </div>
    </div>
  )
}

function SearchResults({ isLoading, results }) {
  return (
    <div>
      {/* Status announcements */}
      <div role="status" aria-live="polite">
        {isLoading && 'Loading results...'}
        {!isLoading && `${results.length} results found`}
      </div>
 
      <ul>
        {results.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

function Toast({ message, type }) {
  return (
    <div
      role={type === 'error' ? 'alert' : 'status'}
      aria-live={type === 'error' ? 'assertive' : 'polite'}
      className="toast"
    >
      {message}
    </div>
  )
}

function CartIcon({ count }) {
  return (
    <div>
      <button aria-label={`Cart, ${count} items`}>
        <ShoppingCartIcon />
        <span>{count}</span>
      </button>
      {/* Announce changes */}
      <div role="status" className="sr-only">
        {count} items in cart
      </div>
    </div>
  )
}

<!-- ❌ Bad: Live region added with content -->
<div aria-live="polite">New message!</div>
 
<!-- ✅ Good: Live region exists, content added later -->
<div aria-live="polite" id="messages"></div>
<script>
  // Content change triggers announcement
  document.getElementById('messages').textContent = 'New message!'
</script>