Working item editor

Compose the existing dialog, field, chip, and action patterns. All data is synthetic and local to this page; reloading restores the sample.

This source example follows your system theme. The catalog's side-by-side panels force themes; the compiled package instead selects its palette from system preference. Theme guidance.

Composition and accessibility guidance

Name and Notes use the existing stacked field labels. No compact field-label API is introduced. editor.css is specimen-only layout CSS: it spaces the controls and field groups, permits wrapping, and separates Delete from Cancel/Save. It does not ship in the CSS package.

• Use a named native dialog opened with showModal(), visible labels, a meaningful close name, and an SVG excluded from the accessibility tree. Name receives initial focus here; a long explanatory dialog may need a static heading focused first. See APG dialog guidance.
• Cancel, Close, Escape, and outside dismissal discard the draft. Save validates then copies the draft to local sample state. Delete removes only this synthetic sample. Real applications own confirmation, permissions, pending writes, errors, and persistence; this demonstration is not a deletion policy.
• Read-only fields remain readable and focusable; unavailable changes are natively disabled, including Save, Delete, filters, and removal. Cancel and Close remain usable. Required Name uses native validation. See field labels and read-only behavior.
• Chip selection uses a stable button name and aria-pressed. Removing a selection focuses the next removable chip, then the previous one, then the first filter button. Informational chips are plain text. Locked example is a saved sample category whose removal is unavailable. Keep the generous targets and their layout space.
• Closing restores focus to Edit sample; deleting makes that trigger unavailable, so focus moves to Restore sample. A single pre-existing polite status reports the result outside the closed dialog. Do not announce every keystroke or duplicate focused-control names.
• Verify narrow layouts, long content, keyboard focus, real browser zoom, and actual screen-reader speech in supported browsers. Automated names, focus, and live-region assertions do not establish announcement quality. Detailed live-region guidance.