` can only compete with: ```css .modal::backdrop { background: rgb(0 0 0 / 0.5); } ``` ### Modal Requirements Modals MUST: 1. Use `` opened with `showModal()` 2. Keep focus inside the dialog while it is open 3. Return focus to the invoking element on close 4. Close on Escape key 5. Have accessible title (`aria-labelledby`) 6. Prevent background scroll, and restore whatever scroll state the page had **Why**: `showModal()` puts the dialog in the top layer, marks everything else in the document [inert](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal), and handles Escape as a close request. Chromium confirms it: with a modal dialog open, repeated Tab presses cycle only through the dialog's own controls, and Escape fires `cancel` then `close`. A hand-written focus trap and keydown listener therefore add nothing, and both are common sources of the lifecycle bugs below. ### Focus Management State that `open()` changes MUST be restored by the `close` event, not by the `close()` method, because Escape and a `

` submit close the dialog without going through it: ```javascript class Modal { constructor(dialog, { fallbackFocus = null } = {}) { this.dialog = dialog; this.fallbackFocus = fallbackFocus; this.invoker = null; this.previousOverflow = null; // Bound once. Reopening MUST NOT accumulate listeners, and every close // path — Escape, close(), method="dialog" — ends in this event. this.dialog.addEventListener('close', () => this.restore()); } open(invoker = document.activeElement) { if (this.dialog.open) return; this.invoker = invoker; // `close` is dispatched asynchronously, so a reopen in the same task can // land before the previous restore. Only the first lock records state. if (this.previousOverflow === null) { this.previousOverflow = document.body.style.overflow; } document.body.style.overflow = 'hidden'; this.dialog.showModal(); this.initialFocus().focus(); } close(returnValue) { this.dialog.close(returnValue); } restore() { if (this.dialog.open) return; // reopened before this close was delivered // Put back the page's own value, which may not have been the default. document.body.style.overflow = this.previousOverflow ?? ''; this.previousOverflow = null; // The invoker may have been removed by the action the dialog performed. const target = this.invoker?.isConnected ? this.invoker : this.fallbackFocus; this.invoker = null; target?.focus(); } initialFocus() { return ( this.dialog.querySelector('[autofocus]') ?? this.dialog.querySelector('.modal-body :is(a[href], button, input, select, textarea)') ?? this.dialog ); } } ``` Confirming a destructive action before it happens belongs in `cancel`, which is cancellable, rather than in a keydown handler: ```javascript dialog.addEventListener('cancel', (event) => { if (form.hasUnsavedChanges) event.preventDefault(); }); ``` The `fallbackFocus` element MUST itself be focusable — usually the heading of the region the dialog acted on, given `tabindex="-1"` — or focus silently falls back to ``. **Why**: each of these rules fixes a failure that headless Chromium reproduces in the naive version. Adding the keydown listener inside `open()` leaves two listeners after a second open, so one Escape runs `close()` twice. Setting `document.body.style.overflow = ''` on close discards a page that was already `clip`. Cleaning up in `close()` rather than on the `close` event leaves the body stuck at `hidden` when the dialog closes natively. Initial focus follows the [APG dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/): an explicit `autofocus` target, otherwise the first control in the body, otherwise the dialog itself, which `showModal()` makes focusable without a `tabindex`. *** ## Tables ### Data Table Structure ```html

List of all devices
Status	Hostname	Type	Actions
Active	blueridge	Bare Metal

``` ### Table Requirements * Tables MUST have `` (visible or `sr-only`) * Header cells MUST use `` with `scope="col"` or `scope="row"` * Sortable columns MUST expose sort state with `aria-sort` on the ``, never on the button inside it * No more than one header per table MUST carry `aria-sort` at a time * Action columns MUST have accessible labels * Responsive tables SHOULD scroll horizontally on small screens ### Sortable Columns The sort button is the control; the header cell holds the state: ```html Address ``` ```html ``` Sorting moves the attribute rather than adding a second one: ```javascript function setSortState(header, direction) { for (const th of header.closest('tr').querySelectorAll('th[aria-sort]')) { if (th === header) continue; th.removeAttribute('aria-sort'); th.querySelector('.sort-icon').textContent = ''; } header.setAttribute('aria-sort', direction); header.querySelector('.sort-icon').textContent = direction === 'ascending' ? '▲' : '▼'; } function initSortableTable(table, sortRows) { for (const button of table.querySelectorAll('th .table-sort')) { button.addEventListener('click', () => { const header = button.closest('th'); // An unsorted column starts ascending; the sorted column toggles. const direction = header.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending'; sortRows(header.cellIndex, direction); setSortState(header, direction); }); } } ``` The sort buttons' purpose SHOULD be described once in the caption rather than repeated in every button label: ```html Device inventory ``` **Why**: `aria-sort` is defined only for the `columnheader` and `rowheader` roles, which a nested `

Card Title

No devices found