fix(Toast): improve responsive and interaction behavior

[rubyycheung]

Summary

• Keeps Toast responsive within viewport and safe-area gutters while preserving the desktop default bottomEnd placement.
• Adds wrapping for long localized messages/action labels and keeps the close control visible/stable.
• Changes default timing so plain info toasts remain transient, while error/actionable toasts persist by default; explicit auto-hide remains available with WCAG 2.2.1 caveats documented.
• Separates live announcements from the interactive visual toast: ToastViewport announces through the singleton live regions, while visual toasts no longer put controls inside role="status"/role="alert".
• Adds compact <=640px queue behavior: one visible toast at a time with FIFO promotion; wide viewports keep the current default stack of 5; explicit maxVisible still overrides the responsive default.
• Adds optional touch/pen horizontal swipe-to-dismiss with Pointer Events, pointer capture, touch-action: pan-y, logical edge direction/RTL support, threshold/cancel handling, and pause during gesture. The close button, F6 focus entry, Escape/layer behavior, and imperative dismiss remain available.
• Adds mobile placement/stacking Storybook scenarios for bottom/top obstruction, BottomSheet context, keyboard-heavy form, long localized action, RTL/safe-area notes, swipe, wide stack order, compact queue pressure, and persistent+transient timing.

Responsive and Interaction Readiness outcomes

Responsive layout

Check	Result	Evidence
Scenario: wide viewport + fine pointer + hover	Pass	Existing desktop stories and ToastViewport default preserve bottomEnd; ToastViewport.test.tsx asserts default bottom/end alignment and wide stack behavior.
Scenario: narrow viewport + fine pointer + hover	Pass	Compact queue is based on the 640px available-width breakpoint, not pointer type; ToastViewport.test.tsx covers compact queue behavior and wrapping.
Requirement: available space/content fit/wrapping/overflow	Pass	Toast.tsx uses border-box maxWidth: 100%, long-message overflowWrap, wrapping trailing content, and a non-shrinking dismiss control; Mobile situations / Long localized action demonstrates it.

Touch, pointer, and hover

Check	Result	Evidence
Scenario: narrow viewport + coarse pointer + no hover	Pass	Compact queue is width-driven; swipe uses Pointer Events with touch-action: pan-y; mouse drag is ignored. Storybook notes that stories do not emulate touch unless the reviewer uses touch emulation/device.
Scenario: wide viewport + coarse pointer + no hover	Pass	Pointer capability does not force mobile geometry; wide viewports keep stack behavior unless maxVisible is overridden.
Requirement: hover independence	Pass	Auto-hide pauses on hover, focus, window blur, and active pointer gesture; required actions are visible without hover.
Requirement: pointer/custom gesture behavior	Pass	Swipe is optional, horizontal-only after 8px slop and directional intent; distance threshold is 40% width, or 48px plus 1.2 px/ms flick; pointercancel/lost capture reset safely.
Requirement: non-gesture alternatives	Pass	Dismiss button, imperative dismiss, and F6 keyboard entry remain; swipe is not the only dismissal path.

Accessibility and interaction contracts

Check	Result	Evidence
Requirement: WCAG 2.2 AA target size	Pass	The close control remains Button size="sm" isIconOnly (28x28 CSS px), satisfying WCAG 2.5.8 AA. No AAA/48px requirement is introduced.
Requirement: semantics	Pass	ToastViewport retains a named notifications region and announces once through useAnnounce; visual toasts no longer put interactive content inside status/alert regions.
Requirement: keyboard/focus/dismissal	Pass	Existing F6 focus entry, focus handoff/restore, manual dismiss, and imperative dismiss tests remain; swipe is additive.
Requirement: timing	Pass	Plain info toasts auto-hide by default; error/actionable toasts persist by default; explicit auto-hide is documented with the WCAG 2.2.1 timed-content caveat. Queued toast timers start only when visible.
Requirement: reduced motion	Pass	Existing transition durations continue to honor prefers-reduced-motion: reduce; swipe operability remains available.

Mobile viewport constraints

Check	Result	Evidence
Requirement: software keyboard	Partial	Docs and stories recommend top placement for keyboard-heavy flows, but Storybook cannot prove real software-keyboard occlusion. Device validation is still needed for actual keyboard/inset behavior.
Requirement: safe-area insets	Pass	ToastViewport owns logical fixed safe-area gutters using env(safe-area-inset-*), with RTL-aware inline start/end. Storybook RTL story labels safe-area as device-only behavior rather than faking pixel proof.
Requirement: dynamic viewport and scroll behavior	N/A	Toast does not own body locking, visual viewport resizing, or nested scroll containers.

Storybook

• Toast docs: http://localhost:6006/?path=/docs/core-toast--docs
• Bottom unobstructed: http://localhost:6006/?path=/story/core-toast--mobile-bottom-unobstructed
• Top with bottom navigation: http://localhost:6006/?path=/story/core-toast--mobile-top-with-bottom-navigation
• Top with BottomSheet open: http://localhost:6006/?path=/story/core-toast--mobile-top-with-bottom-sheet-open
• Keyboard-heavy form: http://localhost:6006/?path=/story/core-toast--mobile-top-with-keyboard-heavy-form
• Long localized action: http://localhost:6006/?path=/story/core-toast--mobile-long-localized-action
• RTL logical placement: http://localhost:6006/?path=/story/core-toast--mobile-rtl-safe-area-placement
• Swipe to dismiss: http://localhost:6006/?path=/story/core-toast--mobile-swipe-to-dismiss
• Bottom stack, newest nearest edge: http://localhost:6006/?path=/story/core-toast--mobile-bottom-stack-newest-nearest-edge
• Top stack, newest nearest edge: http://localhost:6006/?path=/story/core-toast--mobile-top-stack-newest-nearest-edge
• Narrow stack pressure: http://localhost:6006/?path=/story/core-toast--mobile-narrow-stack-pressure
• Persistent action then transient: http://localhost:6006/?path=/story/core-toast--mobile-persistent-then-transient

Validation

• pnpm exec prettier --check packages/core/src/Toast/Toast.tsx packages/core/src/Toast/ToastViewport.tsx packages/core/src/Toast/ToastViewport.test.tsx packages/core/src/Toast/types.ts apps/storybook/stories/Toast.stories.tsx .changeset/toast-responsive-interaction.md
• pnpm exec vitest run --project ui packages/core/src/Toast/ToastViewport.test.tsx packages/core/src/Toast/useToast.test.tsx — 39 Toast tests passed
• pnpm -F @astryxdesign/core build
• pnpm -F @astryxdesign/core typecheck
• pnpm -F @astryxdesign/core typecheck:docs
• pnpm -F @astryxdesign/docsite generate
• pnpm -F @astryxdesign/docsite typecheck
• pnpm -F @astryxdesign/storybook typecheck
• pnpm check:changesets
• pnpm lab:readiness:check — passes; existing unrelated List Input / Transfer List readiness gaps are still reported
• pnpm check:repo
• pnpm lint — exits 0; existing unrelated repo warnings remain
• git diff --check

Notes

• There is no universal top/bottom rule for touch. Placement is an obstruction/content-priority decision and should stay consistent within a flow.
• Compact queue policy follows available width (<=640px), not touch capability. Explicit maxVisible overrides the responsive default.
• The BottomSheet story was browser-measured after the fix: the toast remains inside the 360x640 mobile canvas; the global Storybook LayerProvider viewport remains empty.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 23, 2026 6:57am

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

Toast _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1031	-
Complexity	N/A	Very High (167)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 moderate.

Toast - 1 issue(s)

• 🟡 moderate: Ensure landmarks are unique
  • Rule: landmark-unique · Affects 11/22 stories · Learn more

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}