From 1f2900005fbc26c710dece78b2bed0276b1c0c2c Mon Sep 17 00:00:00 2001
From: Kenny Wang <kwang@pivotal.io>
Date: Thu, 27 Aug 2015 15:06:28 -0700
Subject: [PATCH] [fixed] screen-reader accessible dismiss button on alerts

Before this change, the dismiss button was focusable in VoiceOver, but
not in JAWS.

Signed-off-by: Matt Royal <mroyal@pivotal.io>
---
 src/Alert.js      | 16 ++++++++++++++--
 test/AlertSpec.js | 16 ++++++++--------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/Alert.js b/src/Alert.js
index bd2d97fe5b..f3d35a6a5d 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -24,9 +24,20 @@ const Alert = React.createClass({
       <button
         type="button"
         className="close"
-        aria-label={this.props.closeLabel}
+        onClick={this.props.onDismiss}
+        aria-hidden="true">
+        <span>&times;</span>
+      </button>
+    );
+  },
+
+  renderSrOnlyDismissButton() {
+    return (
+      <button
+        type="button"
+        className="close sr-only"
         onClick={this.props.onDismiss}>
-        <span aria-hidden="true">&times;</span>
+        {this.props.closeLabel}
       </button>
     );
   },
@@ -41,6 +52,7 @@ const Alert = React.createClass({
       <div {...this.props} role="alert" className={classNames(this.props.className, classes)}>
         {isDismissable ? this.renderDismissButton() : null}
         {this.props.children}
+        {isDismissable ? this.renderSrOnlyDismissButton() : null}
       </div>
     );
   },
diff --git a/test/AlertSpec.js b/test/AlertSpec.js
index c667c25819..93cb445098 100644
--- a/test/AlertSpec.js
+++ b/test/AlertSpec.js
@@ -81,16 +81,16 @@ describe('Alert', function () {
       assert.equal(React.findDOMNode(instance).getAttribute('role'), 'alert');
     });
 
-    it('Should have add ARIAs to button', function () {
+    it('Should call onDismiss callback when the sr-only dismiss link is activated', function(done) {
+      let doneOp = function () {
+        done();
+      };
       let instance = ReactTestUtils.renderIntoDocument(
-        <Alert onDismiss={()=>{}} closeLabel='close'>Message</Alert>
+        <Alert onDismiss={doneOp}>
+          Message
+        </Alert>
       );
-
-      let button = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'button');
-
-      assert.equal(React.findDOMNode(button).getAttribute('aria-label'), 'close');
-      assert.equal(React.findDOMNode(button).children[0].getAttribute('aria-hidden'), 'true');
+      ReactTestUtils.Simulate.click(React.findDOMNode(instance).getElementsByClassName('sr-only')[0]);
     });
-
   });
 });