From 4adaa7030193becf3f38aa6cc74c01571877f6b9 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 18 Jun 2015 01:23:45 -0400
Subject: [PATCH] [added] Accessibility: role 'alert' and aria-label to Alert
 component

---
 src/Alert.js      | 14 ++++++++------
 test/AlertSpec.js | 22 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/Alert.js b/src/Alert.js
index 419b1e6613..4d22b6efe9 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -7,13 +7,15 @@ const Alert = React.createClass({
 
   propTypes: {
     onDismiss: React.PropTypes.func,
-    dismissAfter: React.PropTypes.number
+    dismissAfter: React.PropTypes.number,
+    closeLabel: React.PropTypes.string
   },
 
   getDefaultProps() {
     return {
       bsClass: 'alert',
-      bsStyle: 'info'
+      bsStyle: 'info',
+      closeLabel: 'Close Alert'
     };
   },
 
@@ -22,9 +24,9 @@ const Alert = React.createClass({
       <button
         type="button"
         className="close"
-        onClick={this.props.onDismiss}
-        aria-hidden="true">
-        &times;
+        aria-label={this.props.closeLabel}
+        onClick={this.props.onDismiss}>
+        <span aria-hidden="true">&times;</span>
       </button>
     );
   },
@@ -36,7 +38,7 @@ const Alert = React.createClass({
     classes['alert-dismissable'] = isDismissable;
 
     return (
-      <div {...this.props} className={classNames(this.props.className, classes)}>
+      <div {...this.props} role='alert' className={classNames(this.props.className, classes)}>
         {isDismissable ? this.renderDismissButton() : null}
         {this.props.children}
       </div>
diff --git a/test/AlertSpec.js b/test/AlertSpec.js
index 03e11f65f5..c667c25819 100644
--- a/test/AlertSpec.js
+++ b/test/AlertSpec.js
@@ -71,4 +71,26 @@ describe('Alert', function () {
     );
     assert.ok(React.findDOMNode(instance).className.match(/\balert-danger\b/));
   });
+
+  describe('Web Accessibility', function(){
+    it('Should have alert role', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Alert>Message</Alert>
+      );
+
+      assert.equal(React.findDOMNode(instance).getAttribute('role'), 'alert');
+    });
+
+    it('Should have add ARIAs to button', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Alert onDismiss={()=>{}} closeLabel='close'>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');
+    });
+
+  });
 });