<!-- Basic Timer -->
<div role="timer" aria-label="Session Timer">
  <span id="minutes">05</span>:<span id="seconds">00</span>
</div>

<!-- Note: By default, timer updates are NOT announced (aria-live="off") -->
<!-- Only announce at significant milestones -->

<!-- Countdown Timer with Announcements -->
<div id="countdown" 
     role="timer" 
     aria-live="off"
     aria-label="Quiz Time Remaining">
  <strong id="time-display">10:00</strong>
</div>

<script>
  let timeLeft = 600; // 10 minutes in seconds
  
  const timer = setInterval(() => {
    timeLeft--;
    
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    document.getElementById('time-display').textContent = 
      `${minutes}:${seconds.toString().padStart(2, '0')}`;
    
    // Announce at important milestones
    const timerEl = document.getElementById('countdown');
    if (timeLeft === 60) {
      timerEl.setAttribute('aria-live', 'polite');
      timerEl.setAttribute('aria-atomic', 'true');
      // Will announce: "Quiz Time Remaining: 1:00"
      setTimeout(() => timerEl.setAttribute('aria-live', 'off'), 1000);
    }
    
    if (timeLeft === 0) {
      clearInterval(timer);
      timerEl.setAttribute('aria-live', 'assertive');
      timerEl.textContent = 'Time is up!';
    }
  }, 1000);
</script>

<!-- Stopwatch / Elapsed Time -->
<div role="timer" aria-label="Elapsed Time">
  <span id="elapsed">00:00:00</span>
</div>

<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>

<script>
  let startTime;
  let interval;
  
  function updateDisplay() {
    const elapsed = Date.now() - startTime;
    const hours = Math.floor(elapsed / 3600000);
    const minutes = Math.floor((elapsed % 3600000) / 60000);
    const seconds = Math.floor((elapsed % 60000) / 1000);
    
    document.getElementById('elapsed').textContent = 
      `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }
  
  document.getElementById('start').addEventListener('click', () => {
    startTime = Date.now();
    interval = setInterval(updateDisplay, 100);
  });
  
  document.getElementById('stop').addEventListener('click', () => {
    clearInterval(interval);
  });
</script>

// React Timer Component
import { useState, useEffect } from 'react';

function CountdownTimer({ initialSeconds, onComplete }) {
  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
  const [isActive, setIsActive] = useState(false);
  
  useEffect(() => {
    let interval = null;
    
    if (isActive && secondsLeft > 0) {
      interval = setInterval(() => {
        setSecondsLeft(seconds => seconds - 1);
      }, 1000);
    } else if (secondsLeft === 0) {
      onComplete?.();
      setIsActive(false);
    }
    
    return () => {
      if (interval) clearInterval(interval);
    };
  }, [isActive, secondsLeft, onComplete]);
  
  const minutes = Math.floor(secondsLeft / 60);
  const seconds = secondsLeft % 60;
  
  // Announce at key moments
  const shouldAnnounce = secondsLeft === 60 || secondsLeft === 30 || secondsLeft === 10;
  
  return (
    <div>
      <div
        role="timer"
        aria-live={shouldAnnounce ? 'polite' : 'off'}
        aria-atomic="true"
        aria-label="Time Remaining"
      >
        {minutes}:{seconds.toString().padStart(2, '0')}
      </div>
      
      <button onClick={() => setIsActive(!isActive)}>
        {isActive ? 'Pause' : 'Start'}
      </button>
      <button onClick={() => setSecondsLeft(initialSeconds)}>
        Reset
      </button>
    </div>
  );
}

// Stopwatch Example
function Stopwatch() {
  const [elapsedMs, setElapsedMs] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [startTime, setStartTime] = useState(0);
  
  useEffect(() => {
    let interval;
    if (isRunning) {
      interval = setInterval(() => {
        setElapsedMs(Date.now() - startTime);
      }, 10);
    }
    return () => clearInterval(interval);
  }, [isRunning, startTime]);
  
  const hours = Math.floor(elapsedMs / 3600000);
  const minutes = Math.floor((elapsedMs % 3600000) / 60000);
  const seconds = Math.floor((elapsedMs % 60000) / 1000);
  
  return (
    <div
      role="timer"
      aria-label="Stopwatch"
      aria-live="off"
    >
      {hours.toString().padStart(2, '0')}:
      {minutes.toString().padStart(2, '0')}:
      {seconds.toString().padStart(2, '0')}
    </div>
  );
}