fix(Modal): add closeButtonLabel prop, add default value (#9998)

dakahn · sstrubberg · tay1orjones · tay1orjones · commit ee6ee203a0c4 · 2021-11-01T14:18:26.000-05:00
Co-authored-by: Scott Strubberg &lt;sstrubberg@protonmail.com&gt;
Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3829,6 +3829,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "closeButtonLabel": Object {
+        "type": "string",
+      },
       "danger": Object {
         "type": "bool",
       },
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -49,6 +49,11 @@ export default class Modal extends Component {
      */
     className: PropTypes.string,
 
+    /**
+     * Specify an label for the close button of the modal; defaults to close
+     */
+    closeButtonLabel: PropTypes.string,
+
     /**
      * Specify whether the Modal is for dangerous actions
      */
@@ -384,6 +389,7 @@ export default class Modal extends Component {
       shouldSubmitOnEnter, // eslint-disable-line
       size,
       hasScrollingContent,
+      closeButtonLabel,
       preventCloseOnClickOutside, // eslint-disable-line
       ...other
     } = this.props;
@@ -420,11 +426,10 @@ export default class Modal extends Component {
         type="button"
         onClick={onRequestClose}
         title={ariaLabel ? ariaLabel : iconDescription}
-        aria-label={ariaLabel ? ariaLabel : iconDescription}
+        aria-label={closeButtonLabel ? closeButtonLabel : 'close'}
         ref={this.button}>
         <Close20
           aria-hidden="true"
-          aria-label="close"
           tabIndex="-1"
           className={`${this.modalCloseButtonClass}__icon`}
         />
diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -109,19 +109,18 @@ exports[`ModalWrapper should render 1`] = `
               Transactional Modal
             </h3>
             <button
+              aria-label="close"
               className="bx--modal-close"
               onClick={[Function]}
               type="button"
             >
               <ForwardRef(Close20)
                 aria-hidden="true"
-                aria-label="close"
                 className="bx--modal-close__icon"
                 tabIndex="-1"
               >
                 <Icon
                   aria-hidden="true"
-                  aria-label="close"
                   className="bx--modal-close__icon"
                   fill="currentColor"
                   height={20}
@@ -132,15 +131,12 @@ exports[`ModalWrapper should render 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <svg
-                    aria-hidden="true"
-                    aria-label="close"
+                    aria-hidden={true}
                     className="bx--modal-close__icon"
                     fill="currentColor"
-                    focusable="true"
+                    focusable="false"
                     height={20}
                     preserveAspectRatio="xMidYMid meet"
-                    role="img"
-                    tabIndex="-1"
                     viewBox="0 0 32 32"
                     width={20}
                     xmlns="http://www.w3.org/2000/svg"
