Give the toast close button reliable Escape-to-dismiss and focus handling

[mikewheeleer]

Improve keyboard accessibility of toast notifications

Description

Toasts in components/ToastProvider.jsx can only be dismissed by clicking "Close" or waiting for the timer; there is no keyboard shortcut to dismiss, and hovering pauses the timer but focusing (keyboard equivalent of hover) does not — so a keyboard user reading a toast can have it disappear mid-read. This issue adds keyboard parity: pause on focus, dismiss on Escape, and sensible focus return.

Requirements and context

• Repository scope: Liquifact/Liquifact-frontend only.
• Pause/resume the auto-dismiss timer on focus/blur of the toast (mirroring the existing mouseenter/mouseleave pause/resume) so focusing a toast does not let it vanish.
• Allow Escape to dismiss the focused toast.
• Ensure the "Close" button and toast are reachable in a sensible tab order and that focus moves to a safe element after dismissal (no focus loss to body).
• Keep the role="status"/aria-live="polite" region and all existing variant styling.

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/toast-22-keyboard-dismiss
• Implement changes
  • Write code in: update components/ToastProvider.jsx.
  • Write comprehensive tests in: create components/ToastProvider.keyboard.test.tsx using user-event and fake timers — assert focus pauses the timer, Escape dismisses, and focus return.
  • Add documentation: note the keyboard behaviour in README.md.
  • Add comments on the focus/blur pause parity.
  • Validate a11y: no jest-axe violations and keyboard-operable dismissal.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: focus-pause, Escape dismiss, and focus return after close.
• Include the full npm test output.

Example commit message

fix: add escape-to-dismiss and focus pause to toast notifications

Guidelines

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

Community & contribution rewards

• 💬 Join the Liquifact community on Discord for questions, reviews, and faster merges: https://discord.gg/JrGPH4V3
• ⭐ 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

[edrizxabdulganiyu-blip]

@edrizxabdulganiyu-blip has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello Maintainer, I’ve reviewed the issue description and I’m confident I can work on it effectively. Please assign it to me.Hello Maintainer, I’ve reviewed the issue description and I’m confident I can work on it effectively. Please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @edrizxabdulganiyu-blip to this issue.

[drips-wave]

Congratulations, @edrizxabdulganiyu-blip! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @edrizxabdulganiyu-blip: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊