toast: cap message max-height with scroll; assertive role for danger toasts (P2-38, P3-55)
This commit is contained in:
1 parent
cd85419d1d
commit
3a1f79324d
1 file changed
+4
-2
@@ -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
|
||||
|
||||
Reference in new issue
Block a user