feat: Add closeButtonAriaLabel to Modal Component (#959)

Co-authored-by: Alan B Smith <alanbsmith@users.noreply.github.com>
Workday · Feb 4, 2021 · 221fa1c · 221fa1c
1 parent 339be74
commit 221fa1c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/modules/modal/react/README.md b/modules/modal/react/README.md
@@ -120,3 +120,9 @@ default behavior.
 
 If this ref is not provided the modal will try to use the close icon. If that icon is not available,
 it will make the modal heading focusable and focus on that instead.
+
+#### `closeButtonAriaLabel: string`
+
+> Aria label string for the close icon button
+
+---
diff --git a/modules/modal/react/lib/ModalContent.tsx b/modules/modal/react/lib/ModalContent.tsx
@@ -60,6 +60,10 @@ export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement>
    * @default document.body
    */
   container?: HTMLElement;
+  /**
+   * The `aria-label` for the Popup close button.
+   */
+  closeButtonAriaLabel?: string;
 }
 
 const fadeIn = keyframes`
@@ -193,6 +197,7 @@ const ModalContent = ({
   children,
   firstFocusRef,
   heading,
+  closeButtonAriaLabel,
   ...elemProps
 }: ModalContentProps) => {
   const centeringRef = React.useRef<HTMLDivElement>(null);
@@ -228,6 +233,7 @@ const ModalContent = ({
           transformOrigin={transformOrigin}
           aria-modal={true}
           ariaLabel={ariaLabel}
+          closeButtonAriaLabel={closeButtonAriaLabel}
         >
           {children}
         </Popup>

diff --git a/modules/modal/react/spec/Modal.spec.tsx b/modules/modal/react/spec/Modal.spec.tsx
@@ -26,9 +26,9 @@ describe('Modal', () => {
     );
   });
 
-  test('Modal should replace aria-labeldBy with custom aria-label', () => {
-    const customAriaLabel = 'custom aria label';
-    const {getByRole} = renderModal({ariaLabel: customAriaLabel});
-    expect(getByRole('dialog')).toHaveAttribute('aria-label', customAriaLabel);
+  test('Modal should forward closeButtonAriaLabel prop to Popup', () => {
+    const closeButtonAriaLabel = 'close button aria label';
+    const {getByRole} = renderModal({closeButtonAriaLabel});
+    expect(getByRole('button')).toHaveAttribute('aria-label', closeButtonAriaLabel);
   });
 });
diff --git a/modules/popup/react/README.md b/modules/popup/react/README.md
@@ -222,7 +222,7 @@ Default: `PopupPadding.l`
 
 ---
 
-#### `closeLabel: string`
+#### `closeButtonAriaLabel: string`
 
 > Aria label string for the close icon button