feat: consistent and accessible modal on delete

DESIGN_DUIDELINES.md

@@ -331,14 +331,17 @@ No “silent success”.
 
 ### 10.2 Destructive actions: one standard confirmation pattern
 - **MUST:** All destructive actions use the same confirm style and wording conventions.
-- Choose one approach and standardize:
-  - `JS.confirm("…")` everywhere (simple, consistent)
-  - or a modal component everywhere (more flexible, more work)
+- **MUST:** Use the standard modal (see §10.3); do not use `data-confirm` / browser `confirm()` for destructive actions, so that focus and keyboard behaviour are consistent and accessible.
 
 **Recommended copy style:**
 - Title/confirm text is clear and specific (what will be deleted, consequences).
 - Buttons: `Cancel` (neutral) + `Delete` (danger).
 
+### 10.3 Dialogs and modals (mandatory)
+- **MUST:** For every dialog (confirmations, form overlays, delete role/group/data field, edit cycle, etc.) use the **same modal pattern**: `<dialog>` with DaisyUI `modal modal-open`, `role="dialog"`, `aria-labelledby` on the title, and focus moved into the modal when it opens (first focusable element).
+- **MUST NOT:** Use browser `confirm()` / `data-confirm` for destructive or important choices; use the LiveView-controlled modal so that keyboard users get focus inside the dialog and can confirm or cancel without the mouse.
+- **Reference:** Full structure, focus management, and accessibility rules are in **`CODE_GUIDELINES.md` §8.11 (Modals and Dialogs)**. Follow that section for implementation (e.g. `phx-mounted={JS.focus()}` on the first focusable, consistent `modal-box` / `modal-action` layout).
+
 ---
 
 ## 11) Detail pages (consistent structure)