chore(ModalHeader): enable dynamic aria-label value (#2961)

* chore(ModalHeader): enable dynamic value * refactor: adjust defaults * chore: add changelog --------- Co-authored-by: Kathrin Holzmann <Lelith@users.noreply.github.com>
contentful · Jan 9, 2025 · dcc3a32 · dcc3a32
1 parent 59a56df
commit dcc3a32
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/chilled-lizards-crash.md b/.changeset/chilled-lizards-crash.md
@@ -0,0 +1,5 @@
+---
+"@contentful/f36-modal": patch
+---
+
+Enable dynamic `aria-label` value
diff --git 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,9 @@ export const ModalHeader = ({
   testId = 'cf-ui-modal-header',
   className,
   children,
+  aria = {
+    closeIconLabel: 'Close',
+  },
   ...otherProps
 }: ModalHeaderProps): React.ReactElement => {
   const styles = getModalHeaderStyles();
@@ -55,7 +61,7 @@ export const ModalHeader = ({
         <Flex alignItems="center" className={styles.buttonContainer}>
           <IconButton
             variant="transparent"
-            aria-label="Close"
+            aria-label={aria.closeIconLabel}
             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
@@ -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',