chore(ModalHeader): enable dynamic value

contentful · Dec 17, 2024 · a4af0a8 · a4af0a8
1 parent d5305b6
commit a4af0a8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
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,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
@@ -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',