[UI/UX Design] Design the Toast/Snackbar notification component and stacking behavior

[thlpkee20-wq]

Description

This is a UI/UX design task to design a Toast/Snackbar system for transient feedback (e.g. blacklist add/remove, report submitted). No toast pattern exists yet. Define variants (success, error, info, warning), placement, stacking, auto-dismiss, and accessibility.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/index.css (color tokens --success/--error), src/App.tsx
• Toasts must use an ARIA live region and never rely on color alone

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/toast-component
• Implement changes
  • Design toast variants with icon + text and consistent placement
  • Design stacking, max-visible, and auto-dismiss-with-pause-on-hover behavior
  • Document live-region usage and dismiss affordances
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • multiple stacked toasts, long messages, mobile placement, reduced motion, screen-reader announcement, contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: toast notification component and stacking

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours