Time limits & auto-updating content

<!-- After 15 minutes the user is logged out with no notice -->
<script>
  setTimeout(function () {
    window.location = "/logout?reason=timeout";
  }, 15 * 60 * 1000);
</script>

<div role="alertdialog" aria-modal="true"
     aria-labelledby="to-title" aria-describedby="to-desc">
  <h2 id="to-title">Your session is about to expire</h2>
  <p id="to-desc">
    For your security you will be signed out in
    <span aria-live="polite">2 minutes</span>.
    Do you want to stay signed in?
  </p>
  <button type="button" id="stay">Stay signed in</button>
  <button type="button" id="logout">Sign out now</button>
</div>

const LIMIT = 15 * 60 * 1000;   // total session
const WARN_AT = 2 * 60 * 1000;  // warn 2 min before end
let warnTimer, endTimer;

function start() {
  clearTimeout(warnTimer); clearTimeout(endTimer);
  warnTimer = setTimeout(showWarning, LIMIT - WARN_AT);
  endTimer  = setTimeout(signOut, LIMIT);
}
function showWarning() {
  dialog.hidden = false;
  dialog.focus();              // announce to AT
}
stayBtn.addEventListener("click", () => {
  dialog.hidden = true;
  start();                     // extend: reset both timers
});
start();

<div class="carousel">
  <div class="slide">…</div>
  <div class="slide">…</div>
</div>
<script>
  // Rotates forever; no pause, no stop, no hide
  setInterval(nextSlide, 4000);
</script>

<section class="carousel" aria-roledescription="carousel"
         aria-label="Featured stories">
  <button type="button" class="carousel__toggle"
          aria-pressed="false">
    Pause automatic rotation
  </button>
  <ul>
    <li>…slide one…</li>
    <li>…slide two…</li>
  </ul>
</section>

let timer = null;
const reduce = matchMedia("(prefers-reduced-motion: reduce)");

function play()  { if (!timer) timer = setInterval(nextSlide, 5000); }
function pause() { clearInterval(timer); timer = null; }

toggle.addEventListener("click", () => {
  const paused = toggle.getAttribute("aria-pressed") === "true";
  if (paused) { play();  toggle.setAttribute("aria-pressed", "false"); }
  else        { pause(); toggle.setAttribute("aria-pressed", "true"); }
});

// Don’t auto-rotate if the user prefers reduced motion
if (!reduce.matches) play();

<!-- Hard reload every 30s — focus and scroll are lost -->
<meta http-equiv="refresh" content="30">

<!-- or, just as bad, wiping the region on a timer: -->
<script>
  setInterval(async () => {
    feed.innerHTML = await fetchLatest(); // destroys focus
  }, 30000);
</script>

<div class="feed">
  <button type="button" id="feed-toggle" aria-pressed="false">
    Pause live updates
  </button>
  <p class="sr-only" role="status" aria-live="polite" id="feed-news"></p>
  <ul id="feed-list">
    <li>…existing post…</li>
  </ul>
</div>

let timer = null;

function addNew(items) {
  // Insert without re-rendering — focus & scroll stay put
  for (const item of items) list.prepend(renderItem(item));
  news.textContent = `${items.length} new posts`;  // polite announce
}
function poll() { fetchLatest().then(addNew); }

function play()  { if (!timer) timer = setInterval(poll, 30000); }
function pause() { clearInterval(timer); timer = null; }

toggle.addEventListener("click", () => {
  const paused = toggle.getAttribute("aria-pressed") === "true";
  paused ? play() : pause();
  toggle.setAttribute("aria-pressed", String(!paused));
});
play();