toast: cap message max-height with scroll; assertive role for danger toasts (P2-38, P3-55)

This commit is contained in:
ZacharyZhang-NY committed 2026-04-16 23:09:11 -04:00
1 parent cd85419d1d
commit 3a1f79324d
1 file changed
+4 -2
+4 -2
View File
@@ -17,7 +17,7 @@ export default function ToastContainer() {
if (toasts.length === 0) return null
return (
<div className="fixed bottom-4 right-4 z-[60] flex flex-col gap-2" aria-live="polite">
<div className="fixed bottom-4 right-4 z-[60] flex flex-col gap-2">
<AnimatePresence>
{toasts.map((toast) => {
const cfg = TONE_CONFIG[toast.tone]
@@ -25,6 +25,8 @@ export default function ToastContainer() {
return (
<motion.div
key={toast.id}
role={toast.tone === "danger" ? "alert" : "status"}
aria-live={toast.tone === "danger" ? "assertive" : "polite"}
initial={reduced ? { opacity: 0 } : { opacity: 0, y: 12, scale: 0.96 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={reduced ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.96 }}
@@ -32,7 +34,7 @@ export default function ToastContainer() {
className={`flex w-[320px] items-start gap-2.5 rounded-lg border px-4 py-3 shadow-lg ${cfg.className}`}
>
<Icon size={16} weight="fill" className="mt-px shrink-0" />
<span className="min-w-0 flex-1 break-words text-[13px] font-medium">
<span className="max-h-[6.5rem] min-w-0 flex-1 overflow-y-auto break-words text-[13px] font-medium leading-relaxed">
{toast.message}
</span>
<button