feat: allow user to activate action with keyboard

PlanB-Network · Dec 19, 2024 · 053607a · 053607a
1 parent d032b34
commit 053607a
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/packages/ui/src/atoms/toast.tsx b/packages/ui/src/atoms/toast.tsx
@@ -122,6 +122,7 @@ export const customToast = (
       className: textVariants({
         mode: options.mode,
       }),
+      onClick: options.onClick,
     }),
     {
       autoClose: options.time || 5000,
@@ -172,10 +173,26 @@ export const customToast = (
 const ToastContent = ({
   message,
   className,
+  onClick,
 }: {
   message: string;
   className: string;
-}) => <span className={className}>{message}</span>;
+  onClick?: () => void;
+}) => (
+  <span
+    className={className}
+    onKeyDown={(e) => {
+      if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        onClick();
+      }
+    }}
+    role={onClick ? 'button' : undefined}
+    tabIndex={onClick ? 0 : undefined}
+  >
+    {message}
+  </span>
+);
 
 const ToastCloseButton = ({
   closeToast,