About this set
To-do lists where tasks can be renamed in place and a deleted task can be brought back. Edit button and double-click is a newsletter checklist with a pencil and a bin button on every row; Compact list with text buttons is a bug bash list with small Edit and Delete buttons. Double-clicking a task’s text or pressing Edit swaps the text for a field with the caret at the end: Enter saves, Escape cancels, and leaving the field saves too. An empty name is refused and the old one kept, and the row’s Edit and Delete buttons are renamed to match the new text. Delete removes the row and shows a dark message bar under the list with Undo and Dismiss buttons. Undo puts the task back in the same position and focuses its checkbox. The bar hides itself after eight seconds, but the timer pauses while the pointer or keyboard focus is on it, so there is time to reach Undo. About ninety lines of vanilla JavaScript handle both lists, and a short hint above each list says how editing works. The Bootstrap version uses .list-group, .form-control and a restyled .toast.
What’s included
- Rename by double-click or the Edit button, Enter saves and Escape cancels
- Edit and Delete buttons renamed after the task changes
- Delete shows a message bar with Undo and Dismiss
- Undo restores the task in its old position
- Message timer pauses while it has the pointer or focus
Accessibility
Each checkbox is named by its task text through aria-labelledby, and the Edit and Delete buttons are named after the task, such as Delete “Typo on the pricing page”. Saving, cancelling, deleting and restoring are announced in a polite status region; after a delete focus moves to the next row, or to Undo when the list is empty, and after editing it returns to the Edit button. Every control has a visible focus outline, and the message bar's entrance animation stops under prefers-reduced-motion.
Customise it
Change --ed-accent, --ed-accent-dark, --ed-toast and --ed-undo on .ed for the list and the message bar. Bootstrap maps them onto .form-check-input, .form-control and .toast; in Tailwind swap the #0e7490, #0b2730 and #a5f3fc colour utilities.
