From a4af0a8a76098cfbec16f44829053ad25469869a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Lenoir?= <remy.lenoir@contentful.com>
Date: Mon, 16 Dec 2024 14:59:48 +0100
Subject: [PATCH 1/2] chore(ModalHeader): enable dynamic  value

---
 packages/components/modal/src/ModalHeader/ModalHeader.tsx | 6 +++++-
 packages/components/modal/stories/Modal.stories.tsx       | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/components/modal/src/ModalHeader/ModalHeader.tsx b/packages/components/modal/src/ModalHeader/ModalHeader.tsx
index 847ee9d1ea..b84a6280cf 100644
--- a/packages/components/modal/src/ModalHeader/ModalHeader.tsx
+++ b/packages/components/modal/src/ModalHeader/ModalHeader.tsx
@@ -16,6 +16,9 @@ interface ModalHeaderInternalProps extends CommonProps {
   subtitle?: string;
   onClose?: Function;
   children?: React.ReactNode;
+  aria?: {
+    closeIconLabel?: string;
+  };
 }
 
 export type ModalHeaderProps = PropsWithHTMLElement<
@@ -30,6 +33,7 @@ export const ModalHeader = ({
   testId = 'cf-ui-modal-header',
   className,
   children,
+  aria,
   ...otherProps
 }: ModalHeaderProps): React.ReactElement => {
   const styles = getModalHeaderStyles();
@@ -55,7 +59,7 @@ export const ModalHeader = ({
         <Flex alignItems="center" className={styles.buttonContainer}>
           <IconButton
             variant="transparent"
-            aria-label="Close"
+            aria-label={aria?.closeIconLabel || 'Close'}
             size="small"
             icon={<CloseIcon size="small" />}
             onClick={() => {
diff --git a/packages/components/modal/stories/Modal.stories.tsx b/packages/components/modal/stories/Modal.stories.tsx
index 7133be825a..22060d5760 100644
--- a/packages/components/modal/stories/Modal.stories.tsx
+++ b/packages/components/modal/stories/Modal.stories.tsx
@@ -59,6 +59,9 @@ export const Basic: Story<ModalProps> = (props) => {
         {...props}
         modalHeaderProps={{
           className: 'additional-modal-header-class',
+          aria: {
+            closeIconLabel: 'Custom close modal aria label',
+          },
         }}
         modalContentProps={{
           className: 'additional-modal-content-class',

From 73d03fdd24ea05caed68d8b3dd7010dd7e575dd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Lenoir?= <remy.lenoir@contentful.com>
Date: Tue, 17 Dec 2024 11:36:57 +0100
Subject: [PATCH 2/2] refactor: adjust defaults

---
 packages/components/modal/src/ModalHeader/ModalHeader.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/modal/src/ModalHeader/ModalHeader.tsx b/packages/components/modal/src/ModalHeader/ModalHeader.tsx
index b84a6280cf..00aa9bb743 100644
--- a/packages/components/modal/src/ModalHeader/ModalHeader.tsx
+++ b/packages/components/modal/src/ModalHeader/ModalHeader.tsx
@@ -33,7 +33,9 @@ export const ModalHeader = ({
   testId = 'cf-ui-modal-header',
   className,
   children,
-  aria,
+  aria = {
+    closeIconLabel: 'Close',
+  },
   ...otherProps
 }: ModalHeaderProps): React.ReactElement => {
   const styles = getModalHeaderStyles();
@@ -59,7 +61,7 @@ export const ModalHeader = ({
         <Flex alignItems="center" className={styles.buttonContainer}>
           <IconButton
             variant="transparent"
-            aria-label={aria?.closeIconLabel || 'Close'}
+            aria-label={aria.closeIconLabel}
             size="small"
             icon={<CloseIcon size="small" />}
             onClick={() => {