Improve Alert Behavior on Sketch Collection Deletion

Increasing Access

Increasing Access

Using a native browser alert for collection deletion creates an inconsistent and sometimes less accessible experience for keyboard and screen-reader users. Replacing it with an in-app confirmation modal allows proper focus management, clearer context about what will be deleted, and more consistent messaging across the editor.

Feature request details

Increasing Access

Currently, when deleting a sketch collection, the editor shows a native browser confirmation alert (e.g. window.confirm()).

This creates multiple issues:

• The alert UI is inconsistent with the editor’s design system.
• The message provides limited context (what exactly is being deleted, and what the impact is).
• The interaction can be less accessible than an in-app dialog (focus management, keyboard flow, screen reader context).
• The text may be harder to localize/standardize compared to app UI components.

Current Behaviour

• Navigate to a collection / sketches list.
• Trigger delete from the “…” menu.
• A native browser alert appears with Cancel / OK.

Image

(attach screenshot)

Feature enhancement details

1. Replace native browser alert with an in-app confirmation modal
   • Use the project’s modal/dialog component styling.
2. Clear, contextual confirmation copy
   • Example: “You are about to delete the collection ‘’. This action cannot be undone.”
   • If applicable, include counts (e.g. number of sketches affected).
3. Accessibility
   • Proper dialog semantics (role="dialog" / aria-modal="true")
   • Focus moves into the dialog and returns to the trigger on close
   • Keyboard support (Tab/Shift+Tab, Esc to close)
   • Default focus on the safest action (Cancel)
4. Confirmation & feedback
   • Show success/error feedback (toast or inline message) after completion.
   • Disable buttons while delete is in progress to prevent double-submit.

Expected Behaviour

Deleting a sketch collection should use an accessible in-app confirmation modal with clear context and consistent UX (instead of a native browser alert).

Steps to reproduce

1. Open the editor and go to My sketches / collections view.
2. Open the “…” menu for a collection.
3. Click Delete.
4. Observe the native browser alert prompt.

Start at the collections view’s “…” menu and delete action, then trace where the native browser confirmation or window.confirm() is invoked. Read the project’s existing modal/dialog component and check its accessibility behavior. Done means deletion uses an accessible contextual confirmation modal with safe default focus, keyboard handling, feedback, and protection against duplicate submissions.