Improve Alert Behavior on Sketch Collection Deletion

[SinhaS12]

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.

[SinhaS12]

Hi @raclim ,
I would love to work on this issue. Could you please assign it to me?
Thank you!

[Nishthajain7]

It could look something like this