Vanilla JavaScript Projects

Project 20, Modern UI

Accessible Modal and Form Kit

Modals and forms are where most sites fail screen reader and keyboard users. This kit uses the native dialog element and built-in validation so the browser does the hard parts.

Main API
dialog, showModal()
Validation
Constraint Validation API
Dependencies
None
Your browser
Checking

Open a dialog

Try it with only the keyboard: Tab to move, Enter to open, Esc to close.

Waiting for you to open a dialog.

Create your account

All fields are required.

At least 8 characters with a number and a capital letter.

Delete this project?

This removes 24 files and cannot be undone.

Filters

Price

How it works

  1. Open as modalshowModal() puts the dialog in the top layer, makes the page behind inert and moves focus inside.
  2. Validate on the flyEach field is checked on blur and on submit using the browser's own ValidityState, with friendly messages.
  3. Close and return focusWhen the dialog closes, focus goes back to the button that opened it, and returnValue says which button was used.
dialog.showModal();                         // focus moves in, page behind is inert

input.addEventListener("blur", () => {
  const v = input.validity;                 // built-in ValidityState
  const msg = v.valueMissing ? "Enter your email"
            : v.typeMismatch ? "That does not look like an email" : "";
  input.setAttribute("aria-invalid", !!msg);
  errorEl.textContent = msg;                // aria-live reads it out
});

dialog.addEventListener("close", () => {
  console.log(dialog.returnValue);          // "create" or "cancel"
  openButton.focus();                       // give focus back
});