fix(aboutmodal): set a customize aria-label to the close button

packages/react-core/src/components/AboutModal/AboutModal.tsx

@@ -30,6 +30,8 @@ export interface AboutModalProps {
   noAboutModalBoxContentContainer?: boolean;
   /** The parent container to append the modal to. Defaults to document.body */
   appendTo?: HTMLElement | (() => HTMLElement);
+  /** Set aria label to the close button */
+  closeButtonAriaLabel?: string;
 }
 
 interface ModalState {

packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -9,15 +9,18 @@ export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivEl
   className?: string;
   /** A callback for when the close button is clicked  */
   onClose?: () => void;
+  /** Set close button aria label */
+  'aria-label'?: string;
 }
 
 export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxCloseButtonProps> = ({
   className = '',
   onClose = () => undefined as any,
+  'aria-label': ariaLabel = 'Close Dialog',
   ...props
 }: AboutModalBoxCloseButtonProps) => (
   <div className={css(styles.aboutModalBoxClose, className)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label="Close Dialog">
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
       <TimesIcon />
     </Button>
   </div>

packages/react-core/src/components/AboutModal/AboutModalContainer.tsx

@@ -37,6 +37,8 @@ export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement
   ariaLabelledbyId: string;
   /** id to use for About Modal Box aria described by  */
   ariaDescribedById: string;
+  /** Set close button aria label */
+  closeButtonAriaLabel?: string;
 }
 
 export const AboutModalContainer: React.FunctionComponent<AboutModalContainerProps> = ({
@@ -51,6 +53,7 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
   backgroundImageSrc,
   ariaLabelledbyId,
   ariaDescribedById,
+  closeButtonAriaLabel,
   ...props
 }: AboutModalContainerProps) => {
   if (!isOpen) {
@@ -61,7 +64,7 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
       <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }} className={css(styles.bullseye)}>
         <AboutModalBox className={className} aria-labelledby={ariaLabelledbyId} aria-describedby={ariaDescribedById}>
           <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
-          <AboutModalBoxCloseButton onClose={onClose} />
+          <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
           {productName && <AboutModalBoxHeader id={ariaLabelledbyId} productName={productName} />}
           <AboutModalBoxContent
             trademark={trademark}

packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx

@@ -12,3 +12,9 @@ test('AboutModalBoxCloseButton Test onclose', () => {
   const view = shallow(<AboutModalBoxCloseButton onClose={onClose} />);
   expect(view).toMatchSnapshot();
 });
+
+test('AboutModalBoxCloseButton Test close button aria label', () => {
+  const closeButtonAriaLabel = 'Klose Daylok'
+  const view = shallow(<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} />);
+  expect(view).toMatchSnapshot();
+});

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -19,6 +19,25 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
 </div>
 `;
 
+exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
+<div
+  className="pf-c-about-modal-box__close"
+>
+  <Component
+    aria-label="Klose Daylok"
+    onClick={[Function]}
+    variant="plain"
+  >
+    <TimesIcon
+      color="currentColor"
+      noVerticalAlign={false}
+      size="sm"
+      title={null}
+    />
+  </Component>
+</div>
+`;
+
 exports[`AboutModalBoxCloseButton Test onclose 1`] = `
 <div
   className="pf-c-about-modal-box__close"