From b9e35860e4a052f4917bb8a95a0d0d5f7afe3681 Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Mon, 11 Jun 2018 12:57:34 -0400
Subject: [PATCH] fix(modal): x aria-labelledby closeText element (#277)

Before, passing an element to the `closeText` prop would cause the modal's x
button's `aria-label` to be `[object Object]`. Now, the button is labelled by
the close button in the modal footer so that the screenreader reads out the same
text for both buttons.
---
 src/Modal/index.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Modal/index.jsx b/src/Modal/index.jsx
index d3ee6c8174..6cdcfc6f50 100644
--- a/src/Modal/index.jsx
+++ b/src/Modal/index.jsx
@@ -10,6 +10,8 @@ import Icon from '../Icon';
 import newId from '../utils/newId';
 import Variant from '../utils/constants';
 
+const closeModalButtonId = 'paragonCloseModalButton';
+
 class Modal extends React.Component {
   constructor(props) {
     super(props);
@@ -202,7 +204,7 @@ class Modal extends React.Component {
                 <Button
                   label={<Icon className={['fa', 'fa-times']} />}
                   className={['p-1']}
-                  aria-label={this.props.closeText}
+                  aria-labelledby={closeModalButtonId}
                   onClick={this.close}
                   inputRef={this.setFirstFocusableElement}
                   onKeyDown={this.handleKeyDown}
@@ -215,6 +217,7 @@ class Modal extends React.Component {
             <div className={styles['modal-footer']}>
               {this.renderButtons()}
               <Button
+                id={closeModalButtonId}
                 label={this.props.closeText}
                 buttonType="secondary"
                 onClick={this.close}