fix(toast-stack): pass custom ariaProps to the Toast component (#1856)

vtex · Aug 26, 2024 · fdd9b30 · fdd9b30
2 parents 6564615 + 67db9f9
commit fdd9b30
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/packages/shoreline/src/components/toast/toast-stack.tsx b/packages/shoreline/src/components/toast/toast-stack.tsx
@@ -2,8 +2,8 @@ import type { CSSProperties } from 'react'
 import type { DefaultToastOptions } from 'react-hot-toast/headless'
 import { useToaster } from 'react-hot-toast/headless'
 
-import { ToastAppear } from './toast-appear'
 import { Toast } from './toast'
+import { ToastAppear } from './toast-appear'
 
 /**
  * Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss.
@@ -53,6 +53,8 @@ export function ToastStack(props: ToastStackProps) {
               id={t.id}
               loading={t.type === 'loading'}
               variant={(t as any).variant as any}
+              {...t.ariaProps}
+              {...toastOptions?.ariaProps}
             >
               {(t as any).message}
             </Toast>

diff --git a/packages/shoreline/src/components/toast/toast.tsx b/packages/shoreline/src/components/toast/toast.tsx
@@ -1,4 +1,8 @@
-import type { MouseEventHandler, ReactNode } from 'react'
+import type {
+  ComponentPropsWithoutRef,
+  MouseEventHandler,
+  ReactNode,
+} from 'react'
 import { Children, isValidElement } from 'react'
 import { toast as hotToast } from 'react-hot-toast/headless'
 import {
@@ -9,12 +13,12 @@ import {
   IconXCircleFill,
 } from '../../icons'
 
-import { Spinner } from '../spinner'
 import { Bleed } from '../bleed'
+import { Button } from '../button'
+import { IconButton } from '../icon-button'
+import { Spinner } from '../spinner'
 import { Text } from '../text'
 import type { ToastVariant } from './toast-types'
-import { IconButton } from '../icon-button'
-import { Button } from '../button'
 
 /**
  * Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss.
@@ -23,12 +27,24 @@ import { Button } from '../button'
  * <Toast variant="success">Success!</Toast>
  */
 export function Toast(props: ToastProps) {
-  const { id, variant = 'informational', children, loading, onDismiss } = props
+  const {
+    id,
+    variant = 'informational',
+    children,
+    loading,
+    onDismiss,
+    ...restProps
+  } = props
 
   const icon = loading ? <Spinner /> : getIcon(variant)
 
   return (
-    <div data-sl-toast data-loading={loading} data-variant={variant}>
+    <div
+      data-sl-toast
+      data-loading={loading}
+      data-variant={variant}
+      {...restProps}
+    >
       <div data-sl-toast-icon-container>{icon}</div>
       <div data-sl-toast-container>{renderChildren(children)}</div>
       <Bleed top="$space-2" end="$space-2" bottom="$space-2">
@@ -88,7 +104,7 @@ function getIcon(variant: ToastVariant = 'informational') {
   }
 }
 
-interface ToastProps {
+interface ToastProps extends ComponentPropsWithoutRef<'div'> {
   /**
    * Toast variant
    * @default 'informational'