<!-- aria-relevant="additions" - Only announce additions -->
<ul role="log" 
    aria-live="polite" 
    aria-relevant="additions">
  <li>Message 1</li>
  <li>Message 2</li>
  <!-- New messages will be announced -->
  <!-- Removals and updates will NOT be announced -->
</ul>

<!-- aria-relevant="removals" - Only announce removals -->
<ul role="log" 
    aria-live="polite" 
    aria-relevant="removals">
  <li>Task 1</li>
  <li>Task 2</li>
  <!-- When items are removed, screen reader announces -->
  <!-- Additions and text changes will NOT be announced -->
</ul>

<!-- aria-relevant="text" - Only announce text changes -->
<div role="status" 
     aria-live="polite" 
     aria-relevant="text">
  <p id="status-text">Ready</p>
  <!-- Changing text content will be announced -->
  <!-- Adding/removing elements will NOT be announced -->
</div>

<script>
  function updateStatus(newText) {
    document.getElementById('status-text').textContent = newText;
    // Screen reader announces: "Processing..."
  }
  
  updateStatus('Processing...');
</script>

<!-- aria-relevant="all" - Announce everything -->
<div role="log" 
     aria-live="polite" 
     aria-relevant="all">
  <div class="notification">Status update</div>
  <!-- Announces additions, removals, and text changes -->
  <!-- Equivalent to "additions removals text" -->
</div>

<!-- Multiple values (space-separated) -->
<ul role="log" 
    aria-live="polite" 
    aria-relevant="additions text"
    aria-atomic="false">
  <li>Log entry 1</li>
  <li>Log entry 2</li>
  <!-- Announces when items are ADDED -->
  <!-- Announces when text content CHANGES -->
  <!-- Does NOT announce removals -->
</ul>

<script>
  const log = document.querySelector('[role="log"]');
  
  // This WILL be announced (addition)
  const newItem = document.createElement('li');
  newItem.textContent = 'New log entry';
  log.appendChild(newItem);
  
  // This WILL be announced (text change)
  log.querySelector('li').textContent = 'Updated entry';
  
  // This will NOT be announced (removal)
  log.removeChild(log.lastChild);
</script>

// React Component with aria-relevant
import { useState } from 'react';

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Buy groceries', completed: false },
    { id: 2, text: 'Walk the dog', completed: false },
  ]);
  
  const addTask = (text) => {
    setTasks([...tasks, { 
      id: Date.now(), 
      text, 
      completed: false 
    }]);
  };
  
  const removeTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
  };
  
  const toggleTask = (id) => {
    setTasks(tasks.map(t => 
      t.id === id ? { ...t, completed: !t.completed } : t
    ));
  };
  
  return (
    <div>
      {/* Live region for task updates */}
      <ul
        role="log"
        aria-live="polite"
        aria-relevant="additions removals"
        aria-atomic="false"
      >
        {tasks.map(task => (
          <li key={task.id}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleTask(task.id)}
              aria-label={task.text}
            />
            <span className={task.completed ? 'completed' : ''}>
              {task.text}
            </span>
            <button onClick={() => removeTask(task.id)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
      
      {/* Will announce: "Buy milk" when added */}
      {/* Will announce: "Buy groceries" when removed */}
      {/* Will NOT announce text changes (completion status) */}
      
      <form onSubmit={(e) => {
        e.preventDefault();
        const input = e.currentTarget.elements.namedItem('task');
        addTask(input.value);
        input.value = '';
      }}>
        <input type="text" name="task" placeholder="New task" />
        <button type="submit">Add Task</button>
      </form>
    </div>
  );
}