From 96aa677d342353c01936b98477d287c84aa5d948 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 27 Jan 2021 14:53:05 -0800
Subject: [PATCH] fix(ComposedModal): add accessible name and aria-label prop
 (#7609)

* fix(ComposedModal): add accessible name and aria-label prop

* chore(tests): update snapshots

* fix(ComposedModal): generate aria-label only if one is not provided

Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  3 +++
 .../components/ComposedModal/ComposedModal.js | 20 ++++++++++++++++---
 .../__snapshots__/ComposedModal-test.js.snap  |  1 +
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 96f9df4e065f..0fdfd725735f 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -646,6 +646,9 @@ Map {
       "selectorPrimaryFocus": "[data-modal-primary-focus]",
     },
     "propTypes": Object {
+      "aria-label": Object {
+        "type": "string",
+      },
       "children": Object {
         "type": "node",
       },
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
index 0ceaa74ad3b3..aa9c28dd4a4f 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -33,6 +33,11 @@ export default class ComposedModal extends Component {
   endSentinel = React.createRef();
 
   static propTypes = {
+    /**
+     * Specify the aria-label for bx--modal-container
+     */
+    ['aria-label']: PropTypes.string,
+
     /**
      * Specify the content to be placed in the ComposedModal
      */
@@ -216,6 +221,7 @@ export default class ComposedModal extends Component {
   render() {
     const { open } = this.state;
     const {
+      ['aria-label']: ariaLabel,
       className,
       containerClassName,
       children,
@@ -239,9 +245,12 @@ export default class ComposedModal extends Component {
       [containerClassName]: containerClassName,
     });
 
+    // Generate aria-label based on Modal Header label if one is not provided (L253)
+    let generatedAriaLabel;
     const childrenWithProps = React.Children.toArray(children).map((child) => {
       switch (child.type) {
         case React.createElement(ModalHeader).type:
+          generatedAriaLabel = child.props.label;
           return React.cloneElement(child, {
             closeModal: this.closeModal,
           });
@@ -273,7 +282,12 @@ export default class ComposedModal extends Component {
           className={`${prefix}--visually-hidden`}>
           Focus sentinel
         </span>
-        <div ref={this.innerModal} className={containerClass} role="dialog">
+        <div
+          ref={this.innerModal}
+          className={containerClass}
+          role="dialog"
+          aria-modal="true"
+          aria-label={ariaLabel ? ariaLabel : generatedAriaLabel}>
           {childrenWithProps}
         </div>
         {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
@@ -403,9 +417,9 @@ export class ModalHeader extends Component {
 
     return (
       <div className={headerClass} {...other}>
-        {label && <p className={labelClass}>{label}</p>}
+        {label && <h2 className={labelClass}>{label}</h2>}
 
-        {title && <p className={titleClass}>{title}</p>}
+        {title && <h3 className={titleClass}>{title}</h3>}
 
         {children}
 
diff --git a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap
index 72e2c71502b2..df472ab51e85 100644
--- a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap
+++ b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap
@@ -23,6 +23,7 @@ exports[`<ComposedModal /> renders 1`] = `
       Focus sentinel
     </span>
     <div
+      aria-modal="true"
       className="bx--modal-container"
       role="dialog"
     />