import { useId } from "react";
export const PasswordField = () => {
const id = useId();
Generate ids that match between server and client render, so aria-describedby and label associations survive hydration without a mismatch.
export const openModal = (modalRoot: HTMLElement) => {
const siblings = Array.from(document.body.children).filter(
(el): el is HTMLElement => el !== modalRoot && el instanceof HTMLElement,
);
siblings.forEach((el) => {Setting .inert on everything outside a custom modal removes it from tab order, clicks, and the a11y tree in one line — no focus-trap library.
<button id="delete-trigger">Delete project</button>
<dialog id="confirm-dialog" closedby="any" aria-labelledby="confirm-title">
<form method="dialog">
<h2 id="confirm-title">Delete this project?</h2>showModal(), ::backdrop, and closedby give a modal focus-trapping, Esc-to-close, and light-dismiss — no react-modal, no focus-trap package.
// togglePopover's { source } option is current spec but not yet in TypeScript's DOM lib.
type TogglePopover = (options?: { source?: HTMLElement; force?: boolean }) => void;
const menu = document.querySelector<HTMLElement>("#user-menu")!;
const trigger = document.querySelector<HTMLButtonElement>("#user-menu-trigger")!;
popover="auto" gives light-dismiss, Esc-to-close, and top-layer stacking for free — no click-outside listener, no z-index fights.