// List the field's error message (the id in data-error) in aria-describedby only while// it's shown: text that aria-describedby references is announced even when it's hidden.const linkError = (el, shown) => {  const errorId = el.dataset.error;  if (!errorId) return;  const ids = (el.getAttribute('aria-describedby') || '').split(/\s+/).filter((id) => id && id !== errorId);  if (shown) ids.push(errorId);  if (ids.length) el.setAttribute('aria-describedby', ids.join(' '));  else el.removeAttribute('aria-describedby');};
// One polite live region for the page announces an error that appears when the user// leaves or changes a field. Run this once the form is in the page.const announcer = document.createElement('div');announcer.setAttribute('aria-live', 'polite');announcer.classList.add('visually-hidden');document.body.append(announcer);let announceTimer;let announcedField;
// Text as a screen reader reads it: icons' text alternatives in, aria-hidden text out.const spokenText = (node) => {  const copy = node.cloneNode(true);  copy.querySelectorAll('[aria-hidden="true"]').forEach((n) => n.remove());  copy.querySelectorAll('[role="img"][aria-label]').forEach((n) => n.replaceWith(`${n.getAttribute('aria-label')}: `));  return copy.textContent.replace(/\s+/g, ' ').trim();};const announceError = (el) => {  const error = document.getElementById(el.dataset.error);  if (!error) return;  const label = el.labels?.[0] ? `${spokenText(el.labels[0])}: ` : '';  clearTimeout(announceTimer);  announcer.textContent = '';  announcedField = el;  // Wait until the screen reader has announced the field that receives focus next.  announceTimer = setTimeout(() => { announcer.textContent = label + spokenText(error); }, 500);};
// Sync aria-invalid with the CSS :user-invalid state. Only form fields are synced, and// an aria-invalid="true" that this script didn't set (for example from a server check)// is left alone.const flagged = new WeakSet();// Fields whose current error has been announced, or read out by focus after a failed// submit. A field can become invalid while the user types, so this is tracked separately.const announced = new WeakSet();const syncAria = (el, announce = false) => {  if (!el.matches?.('input, select, textarea')) return;  const invalid = el.matches(':user-invalid');  if (invalid) {    if (announce && !announced.has(el)) {      announceError(el);      announced.add(el);    }    el.setAttribute('aria-invalid', 'true');    linkError(el, true);    flagged.add(el);  } else if (flagged.has(el) || el.getAttribute('aria-invalid') !== 'true') {    el.setAttribute('aria-invalid', 'false');    linkError(el, false);    flagged.delete(el);    announced.delete(el);    // Clear a fixed field's announcement so it isn't found later when reading the page.    if (announcedField === el) {      clearTimeout(announceTimer);      announcer.textContent = '';    }  }};
// Start every field at aria-invalid="false".document.querySelectorAll('input, select, textarea').forEach((el) => syncAria(el));
// Update on blur (to show and announce an error) and input (to clear it)document.addEventListener('blur', (e) => syncAria(e.target, true), true);document.addEventListener('input', (e) => {  if (e.target.hasAttribute('aria-invalid')) syncAria(e.target);});
// Checkboxes, radio buttons and other controls that commit on 'change' can become// :user-invalid without losing focus, so update on change too.document.addEventListener('change', (e) => syncAria(e.target, true), true);
// A failed submit fires 'invalid' on each failing field, including required fields the// user never touched, so update those too. 'invalid' doesn't bubble. Focus moving to the// first invalid field announces its error, so these aren't announced.document.addEventListener('invalid', (e) => {  announced.add(e.target);  syncAria(e.target);}, true);
// Reset clears :user-invalid after the 'reset' event, so update each field afterwards.document.addEventListener('reset', (e) => {  setTimeout(() => [...e.target.elements].forEach((el) => syncAria(el)));}, true);

const UserInvalidFallback = (() => {  const dirtyState = new WeakMap();
  const updateState = (input) => {    // validity.valid gives the current state without firing an 'invalid' event, as checkValidity() does.    const isValid = input.validity.valid;
    // Update both visual and ARIA state    input.classList.toggle('user-invalid-fallback', !isValid);    input.classList.toggle('user-valid-fallback', isValid);
    input.setAttribute('aria-invalid', isValid ? 'false' : 'true');    linkError(input, !isValid);  };
  // List the error message (the id in data-error) in aria-describedby only while it's  // shown: text that aria-describedby references is announced even when it's hidden.  const linkError = (input, shown) => {    const errorId = input.dataset.error;    if (!errorId) return;    const ids = (input.getAttribute('aria-describedby') || '').split(/\s+/).filter((id) => id && id !== errorId);    if (shown) ids.push(errorId);    if (ids.length) input.setAttribute('aria-describedby', ids.join(' '));    else input.removeAttribute('aria-describedby');  };
  const handleEvent = (event) => {    const input = event.target;
    if (event.type === 'reset') {      const controls = input.elements || [];      for (const control of controls) {        dirtyState.delete(control);        control.classList.remove('user-invalid-fallback');        control.classList.remove('user-valid-fallback');        if (control.matches('input, select, textarea')) control.setAttribute('aria-invalid', 'false');        if (control.dataset?.error) linkError(control, false);      }      return;    }
    if (!input.checkValidity) return;
    // A submit attempt counts as interaction: the browser fires 'invalid' on each failing    // field, including required fields the user never touched, so flag them all.    if (event.type === 'invalid') {      dirtyState.set(input, { hasInteracted: true, hasBlurred: true });      updateState(input);      return;    }
    if (event.type === 'input' || event.type === 'change') {      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };      state.hasInteracted = true;      dirtyState.set(input, state);      if (state.hasBlurred) {        updateState(input);      }    } else if (event.type === 'blur') {      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };      state.hasBlurred = true;      dirtyState.set(input, state);      if (state.hasInteracted) {        updateState(input);      }    }  };
  const init = (root = document) => {    if (CSS.supports('selector(:user-invalid)')) return;
    // Firefox and Safari expose an empty required field as invalid from page load.    root.querySelectorAll('input, select, textarea').forEach((el) => {      if (!el.hasAttribute('aria-invalid')) el.setAttribute('aria-invalid', 'false');    });
    root.addEventListener('blur', handleEvent, true); // Capture phase    root.addEventListener('input', handleEvent);    root.addEventListener('change', handleEvent);    root.addEventListener('invalid', handleEvent, true); // invalid doesn't bubble    root.addEventListener('reset', handleEvent, true); // Capture resets  };
  return { init };})();
// Initialize for a specific formconst form = document.querySelector('#demo-form');UserInvalidFallback.init(form);