design(ui): add stacked Undo banner pattern for concurrent actions

[Oyinkans0la12]

Closes #501

Summary

Introduce a scalable stacked Undo banner pattern that consolidates multiple concurrent undoable actions into a single, accessible notification stack with both per-item Undo actions and an aggregate Undo all affordance.

Problem

When users perform several undoable actions in quick succession, multiple Undo banners can compete for screen space, create notification clutter, and make individual actions difficult to manage.

The current experience does not define how concurrent undo notifications should behave, limiting scalability and consistency across the application.

Solution

This PR introduces a reusable stacked Undo banner design that groups concurrent undoable actions into a single component while preserving individual undo functionality and adding an optional Undo all action.

The pattern is fully documented for accessibility, responsive layouts, interaction behavior, and implementation guidance.

Implementation Details

Stack Layout

Updated the UndoBanner design to support:

• newest-first ordering
• up to 4 visible undo items
• individual Undo actions
• clear visual grouping of concurrent actions

Overflow Handling

When more than four undoable actions are pending, the stack displays:

• +N more

This communicates additional hidden items while preventing excessive vertical growth.

Undo All

Added a consolidated Undo all affordance for stacked notifications.

The documentation defines expected behavior for:

• mixed action types
• partially expired actions
• failed undo operations
• partial completion scenarios

Auto-dismiss Strategy

Documented timer behavior that scales with stack size while remaining predictable and non-intrusive.

The guidance includes:

• timer reset behavior
• stack updates after new actions
• expiration handling

Accessibility

The pattern has been designed to satisfy WCAG 2.1 AA requirements, including:

• keyboard navigation
• focus management
• ARIA live announcements
• screen reader-friendly action labels
• accessible overflow messaging
• reduced-motion considerations

Responsive Design

Documented behavior for:

• desktop
• tablet
• mobile

including stack placement, spacing, overflow handling, and touch targets.

Edge Cases

Documented expected behavior for:

• rapid action bursts
• stack overflow
• expired actions
• partial individual undos
• Undo all interactions
• offline/error scenarios

Testing

Validated using:

• npm run lint
• component tests
• visual regression tests
• accessibility (axe) checks

Included:

• before/after screenshots
• responsive layouts
• accessibility validation notes

Behavioral Changes

The Undo notification experience now supports multiple simultaneous undoable actions without overwhelming the interface while maintaining individual control and accessibility.

Checklist

• Designed stacked Undo banner pattern.
• Added per-item Undo support.
• Added Undo all affordance.
• Implemented 4-item stack cap with +N more overflow.
• Documented auto-dismiss behavior.
• Validated WCAG 2.1 AA accessibility.
• Added responsive design guidance.
• Updated design system documentation.
• Component and visual tests pass.
• Ready for review.

[drips-wave]

@Oyinkans0la12 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits