diff --git a/src/components/experimental/Snackbar/Snackbar.tsx b/src/components/experimental/Snackbar/Snackbar.tsx index 26804cf1..c96b30df 100644 --- a/src/components/experimental/Snackbar/Snackbar.tsx +++ b/src/components/experimental/Snackbar/Snackbar.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, type ReactElement } from 'react'; +import React, { forwardRef, ReactNode, type ReactElement } from 'react'; import styled from 'styled-components'; import { SpaceProps, LayoutProps, PositionProps, FlexboxProps } from 'styled-system'; @@ -32,28 +32,31 @@ const DismissButton = styled(IconButton)` padding: 0; `; -interface SnackbarProps extends SpaceProps, LayoutProps, PositionProps, FlexboxProps { +interface SnackbarProps + extends SpaceProps, + LayoutProps, + PositionProps, + FlexboxProps, + React.HTMLAttributes { children: ReactNode; hasDismissButton?: boolean; onDismiss?: () => void; } -const Snackbar = ({ - children, - hasDismissButton = false, - onDismiss = null, - ...restProps -}: SnackbarProps): ReactElement => ( - - {children} - {hasDismissButton && ( - } - onPress={onDismiss} - /> - )} - +const Snackbar = forwardRef( + ({ children, hasDismissButton = false, onDismiss = null, ...restProps }, ref): ReactElement => ( + + {children} + {hasDismissButton && ( + } + onPress={onDismiss} + aria-label="close" + /> + )} + + ) ); export { Snackbar, SnackbarProps };