Accessibility (a11y)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Register a student</title>
    <style>
      body { font-family: system-ui, sans-serif; max-width: 32rem; margin: 1rem auto; padding: 0 1rem; }
      label { display: block; margin-top: 0.75rem; font-weight: 600; }
      input { display: block; padding: 0.4rem; font-size: 1rem; }
      [aria-invalid="true"] { border: 2px solid #b00020; }
      .error { color: #b00020; margin: 0.25rem 0 0; }
      :focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
      .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    </style>
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Register a student</h1>
      <form id="register" novalidate>
        <label for="name">Full name</label>
        <input id="name" name="name" autocomplete="name" aria-describedby="name-error" />
        <p class="error" id="name-error"></p>

        <label for="phone">Parent's phone <span class="visually-hidden">(10 digits, starting with 0)</span></label>
        <input id="phone" name="phone" type="tel" inputmode="numeric" aria-describedby="phone-hint phone-error" />
        <p id="phone-hint">e.g. 0712345678</p>
        <p class="error" id="phone-error"></p>

        <button type="button" id="fees-toggle" aria-expanded="false" aria-controls="fees">Show fee details</button>
        <div id="fees" hidden>
          <p>Tuition TSh 150,000 per term. Uniform TSh 45,000.</p>
        </div>

        <p><button type="submit">Register</button></p>
      </form>

      <!-- Screen readers announce changes to a live region without moving focus -->
      <p id="status" role="status"></p>

      <dialog id="confirm" aria-labelledby="confirm-title">
        <h2 id="confirm-title">Register this student?</h2>
        <p id="confirm-text"></p>
        <form method="dialog">
          <button value="cancel">Cancel</button>
          <button value="ok">Yes, register</button>
        </form>
      </dialog>
    </main>
  </body>
</html>

const form = document.querySelector("#register");
const status = document.querySelector("#status");
const dialog = document.querySelector("#confirm");
const toggle = document.querySelector("#fees-toggle");

// A disclosure: a real <button> is focusable and works with Enter/Space for free
toggle.addEventListener("click", () => {
  const open = toggle.getAttribute("aria-expanded") === "true";
  toggle.setAttribute("aria-expanded", String(!open));
  document.getElementById(toggle.getAttribute("aria-controls")).hidden = open;
  toggle.textContent = open ? "Show fee details" : "Hide fee details";
});

function setError(input, message) {
  document.getElementById(`${input.id}-error`).textContent = message;
  if (message) input.setAttribute("aria-invalid", "true");
  else input.removeAttribute("aria-invalid");
}

function validate() {
  const name = form.elements.name;
  const phone = form.elements.phone;
  setError(name, name.value.trim().length < 2 ? "Enter the student's full name." : "");
  setError(phone, /^0[67]\d{8}$/.test(phone.value.trim()) ? "" : "Enter a 10-digit phone number starting with 06 or 07.");
  return form.querySelector('[aria-invalid="true"]');
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const firstInvalid = validate();
  if (firstInvalid) {
    firstInvalid.focus();                        // take keyboard and screen-reader users to the problem
    status.textContent = "Please fix the highlighted fields.";
    return;
  }
  status.textContent = "";
  document.querySelector("#confirm-text").textContent = `${form.elements.name.value.trim()}, parent phone ${form.elements.phone.value.trim()}`;
  dialog.showModal();                            // traps focus inside; Escape closes it
});

dialog.addEventListener("close", () => {
  if (dialog.returnValue === "ok") {
    status.textContent = `${form.elements.name.value.trim()} registered.`;
    form.reset();
    form.elements.name.focus();
  } else {
    form.querySelector('button[type="submit"]').focus();   // return focus where the user was
  }
});