diff --git a/packages/react/src/components/Modal/ModalHeader.tsx b/packages/react/src/components/Modal/ModalHeader.tsx index 5b193d92fc..c4ba9432d8 100644 --- a/packages/react/src/components/Modal/ModalHeader.tsx +++ b/packages/react/src/components/Modal/ModalHeader.tsx @@ -15,6 +15,14 @@ export type ModalHeaderProps = { * @default true */ closeButton?: boolean; + /** + * The title of the close button. + * @default 'close modal' + */ + closeButtonTitle?: string; + /** + * The subtitle of the modal. + */ subtitle?: string; /** * Change the default rendered element for the one passed as a child, merging their props and behavior. @@ -25,7 +33,15 @@ export type ModalHeaderProps = { export const ModalHeader = forwardRef( ( - { closeButton = true, children, subtitle, asChild, className, ...rest }, + { + closeButton = true, + closeButtonTitle = 'close modal', + children, + subtitle, + asChild, + className, + ...rest + }, ref, ) => { const Component = asChild ? Slot : 'div'; @@ -60,8 +76,9 @@ export const ModalHeader = forwardRef( autoFocus icon={true} className='ds-modal__header__button' + title={closeButtonTitle} > - + )}