Session does not expire unexpectedly; inactivity warning present with time to extend

Users with cognitive disabilities, motor impairments, or those using assistive technology work more slowly and may legitimately need longer to complete tasks. A session that expires silently and discards form data—a grant application, benefits form, or tax filing—causes real harm beyond mere inconvenience. WCAG 2.2 SC 2.2.1 (Level A) requires that users be warned before a time limit expires and given an opportunity to extend it without data loss. SC 2.2.2 (Level A) targets automatic page updates that move content without user control. Section 508 2018 Refresh 503.3.5 incorporates timing control requirements. Silent session expiry during form-heavy government workflows is a common Section 508 complaint category.

Implement a session warning dialog that appears at least 60 seconds before expiration and offers an extend option without requiring re-authentication. In a client component wrapping authenticated pages:

const SESSION_DURATION_MS = 15 * 60 * 1000; // 15 minutes
const WARNING_BEFORE_MS = 60 * 1000; // 1 minute warning

useEffect(() => {
  const warningTimer = setTimeout(() => {
    setShowWarning(true); // Show dialog
  }, SESSION_DURATION_MS - WARNING_BEFORE_MS);

  return () => clearTimeout(warningTimer);
}, [lastActivity]);

{showWarning && (
  <div role="alertdialog" aria-modal="true" aria-labelledby="timeout-title">
    <h2 id="timeout-title">Your session is about to expire</h2>
    <p>You will be logged out in 60 seconds. Any unsaved changes will be lost.</p>
    <button onClick={extendSession}>Stay logged in</button>
    <button onClick={logout}>Log out now</button>
  </div>
)}

Use role="alertdialog" (not role="dialog") so screen readers immediately announce the warning without waiting for the user to navigate to it.