Give the toast container a non-blocking accessible name and dismiss buttons

[1nonlypiece]

Improve toast accessibility with labels and manual dismissal

Description

src/components/ToastProvider.tsx renders toasts in an aria-live region that auto-dismisses after 4000ms with no way to dismiss manually and no per-toast close affordance. WCAG 2.2.1 (Timing Adjustable) expects users to be able to dismiss or extend transient messages, and motor-impaired users may miss a 4s window. This issue makes toasts dismissible and better labelled.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Add a "Dismiss" button to each toast (accessible name e.g. "Dismiss notification") that removes it immediately and clears its timer.
• Pause the auto-dismiss timer on hover/focus within a toast and resume on blur/leave, so users reading a message are not cut off (document the chosen behaviour).
• Keep role="status" for info and role="alert" for error, the aria-live="polite" container, and the existing visual styling.
• Ensure removing one toast does not disrupt the timers of the others (per-toast timer cleanup).

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/toasts-29-dismiss-and-label
• Implement changes
  • Write code in: src/components/ToastProvider.tsx.
  • Write comprehensive tests in: create src/components/__tests__/ToastProvider.test.tsx covering manual dismiss, hover-pause (fake timers), and per-toast cleanup.
  • Add documentation: note the dismiss/pause behaviour in README.md.
  • Add JSDoc to the timer/dismiss logic.
  • Validate timers are cleared on manual dismiss and unmount.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: manual dismiss, auto-dismiss, hover pause/resume, multiple toasts, and error vs info role.
• Include the full npm test output and a11y notes in the PR description.

Example commit message

a11y: add dismiss buttons and hover-pause to toasts

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[ekwe7]

I would love to work on this issue. I have experience building production ready applications and collaborating through GitHub workflows. I'll carefully analyze the current implementation, propose a reliable solution, and submit a well-tested PR. My focus is on clean code, maintainability, and timely delivery

[ZuLu0890]

I would love to work on this issue