[UI/UX Design] Design an in-app announcement banner system #371

Description

Product announcements are made via toasts that vanish and cannot be revisited. Design a persistent in-app announcement banner slot mounted below the header with priority ordering and dismiss-per-announcement rules.

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/components/Layout.tsx
• Respect priority tokens: info, success, warn, blocker

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/announcement-banner
• Implement changes
  • Design banner variants per priority with icons and copy patterns
  • Add per-user dismiss tracking with re-appear rules on version change
  • Provide a screen-reader-friendly polite announce on show
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Multiple simultaneous banners, RTL layout, mobile stacking
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: in-app announcement banner

Guidelines

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