From 8c42546d2ba53ae18b01690a2733d88fbc29b1d5 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 5 Aug 2024 09:17:22 +0200
Subject: [PATCH] add `closeButtonTitle` to modal header

---
 .../src/components/Modal/ModalHeader.tsx      | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

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<HTMLDivElement, ModalHeaderProps>(
   (
-    { 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<HTMLDivElement, ModalHeaderProps>(
             autoFocus
             icon={true}
             className='ds-modal__header__button'
+            title={closeButtonTitle}
           >
-            <XMarkIcon title='close modal' fontSize='1.5em' />
+            <XMarkIcon title={closeButtonTitle} fontSize='1.5em' />
           </Button>
         )}
       </Component>