Accessible components, with code to copy

<button id="open-invite">Invite a teammate</button>

<dialog id="invite" aria-labelledby="invite-title">
  <h2 id="invite-title">Invite a teammate</h2>
  <form method="dialog">
    <label for="invite-email">Email</label>
    <input id="invite-email" type="email" autocomplete="email">
    <button value="send">Send invitation</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  const opener = document.getElementById("open-invite");
  const dialog = document.getElementById("invite");
  opener.addEventListener("click", () => dialog.showModal());
  dialog.addEventListener("close", () => opener.focus());
</script>

import { useId, useRef } from "react";

export function InviteDialog() {
  const id = useId();
  const dialog = useRef<HTMLDialogElement>(null);
  const opener = useRef<HTMLButtonElement>(null);
  return (
    <>
      <button ref={opener} onClick={() => dialog.current?.showModal()}>
        Invite a teammate
      </button>
      <dialog
        ref={dialog}
        aria-labelledby={`${id}-title`}
        onClose={() => opener.current?.focus()}
      >
        <h2 id={`${id}-title`}>Invite a teammate</h2>
        <form method="dialog">
          <label htmlFor={`${id}-email`}>Email</label>
          <input id={`${id}-email`} type="email" autoComplete="email" />
          <button value="send">Send invitation</button>
          <button value="cancel">Cancel</button>
        </form>
      </dialog>
    </>
  );
}

<!-- in the page from the start, empty -->
<div role="status" id="status"></div>

<script>
  function announce(message) {
    document.getElementById("status").textContent = message;
  }
  announce("Invitation sent to Sam.");
</script>

import { useState } from "react";

export function InviteButton({ invite }: { invite: () => Promise<void> }) {
  const [status, setStatus] = useState("");
  return (
    <>
      <button
        onClick={async () => {
          await invite();
          setStatus("Invitation sent to Sam.");
        }}
      >
        Send invitation
      </button>
      {/* rendered from the start, empty, so the change is announced */}
      <div role="status">{status}</div>
    </>
  );
}

<form id="signup" novalidate>
  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required
         aria-describedby="email-error">
  <p id="email-error" hidden>Enter an email address with an @, like sam@example.com.</p>
  <button>Create account</button>
</form>

<script>
  const form = document.getElementById("signup");
  const email = form.elements.email;
  const error = document.getElementById("email-error");
  form.addEventListener("submit", (event) => {
    const valid = email.checkValidity();
    if (valid) email.removeAttribute("aria-invalid");
    else email.setAttribute("aria-invalid", "true");
    error.hidden = valid;
    if (!valid) {
      event.preventDefault();
      email.focus(); // the first field with an error
    }
  });
</script>

import { useId, useRef, useState, type FormEvent } from "react";

export function SignupForm({ onSignup }: { onSignup: (email: string) => void }) {
  const id = useId();
  const email = useRef<HTMLInputElement>(null);
  const [error, setError] = useState("");

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const input = email.current;
    if (!input) return;
    if (!input.checkValidity()) {
      setError("Enter an email address with an @, like sam@example.com.");
      input.focus(); // the first field with an error
      return;
    }
    setError("");
    onSignup(input.value);
  }

  return (
    <form onSubmit={submit} noValidate>
      <label htmlFor={id}>Work email</label>
      <input
        ref={email}
        id={id}
        type="email"
        autoComplete="email"
        required
        aria-invalid={error ? true : undefined}
        aria-describedby={error ? `${id}-error` : undefined}
      />
      {error ? <p id={`${id}-error`}>{error}</p> : null}
      <button>Create account</button>
    </form>
  );
}

<button type="button" aria-label="Close">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- visible text: the name starts with the words people see -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Delete project
</button>

import { Trash2, X } from "lucide-react";

export function CloseButton({ onClose }: { onClose: () => void }) {
  return (
    <button type="button" aria-label="Close" onClick={onClose}>
      <X aria-hidden="true" />
    </button>
  );
}

// visible text: the name starts with the words people see
export function DeleteButton({ onDelete }: { onDelete: () => void }) {
  return (
    <button type="button" onClick={onDelete}>
      <Trash2 aria-hidden="true" />
      Delete project
    </button>
  );
}

<button type="button" aria-expanded="false" aria-controls="account-links">
  Account
</button>
<ul id="account-links" hidden>
  <li><a href="/settings">Settings</a></li>
  <li><a href="/billing">Billing</a></li>
</ul>

<script>
  const toggle = document.querySelector("[aria-controls=account-links]");
  const links = document.getElementById("account-links");
  toggle.addEventListener("click", () => {
    const open = toggle.getAttribute("aria-expanded") === "true";
    toggle.setAttribute("aria-expanded", String(!open));
    links.hidden = open;
  });
</script>

import { useId, useState } from "react";

export function AccountLinks() {
  const id = useId();
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        type="button"
        aria-expanded={open}
        aria-controls={id}
        onClick={() => setOpen(!open)}
      >
        Account
      </button>
      <ul id={id} hidden={!open}>
        <li><a href="/settings">Settings</a></li>
        <li><a href="/billing">Billing</a></li>
      </ul>
    </>
  );
}