From 95aca19e9c34f40845680197d90464741e46868d Mon Sep 17 00:00:00 2001
From: Dominick Reinhold <dreinhold@pivotal.io>
Date: Thu, 27 Aug 2015 10:28:09 -0700
Subject: [PATCH] fix(alerts): JAWS indicates that alerts are alerts

[Finishes #101817262]

Signed-off-by: Caroline Taymor <ctaymor@pivotal.io>
Signed-off-by: Dominick Reinhold <dreinhold@pivotal.io>
---
 spec/pivotal-ui-react/alerts/alerts_spec.js | 16 ++++++++++++++++
 src/pivotal-ui-react/alerts/alerts.js       | 20 ++++++++++++++------
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/spec/pivotal-ui-react/alerts/alerts_spec.js b/spec/pivotal-ui-react/alerts/alerts_spec.js
index d79b8f0c3..1c9ee8b54 100644
--- a/spec/pivotal-ui-react/alerts/alerts_spec.js
+++ b/spec/pivotal-ui-react/alerts/alerts_spec.js
@@ -87,6 +87,10 @@ describe('SuccessAlert', function() {
     it('renders an icon in the alert', function() {
       expect('i').toHaveClass('fa-check-circle');
     });
+
+    it('has a "success alert" label', function() {
+      expect('.alert .sr-only').toContainText('success alert message,');
+    });
   });
 });
 
@@ -104,6 +108,10 @@ describe('InfoAlert', function() {
     it('renders an icon in the alert', function() {
       expect('i').toHaveClass('fa-info-circle');
     });
+
+    it('has a "info alert" label', function() {
+      expect('.alert .sr-only').toContainText('info alert message,');
+    });
   });
 });
 
@@ -121,6 +129,10 @@ describe('WarningAlert', function() {
      it('renders an icon in the alert', function() {
        expect('i').toHaveClass('fa-exclamation-triangle');
      });
+
+     it('has a "warning alert" label', function() {
+       expect('.alert .sr-only').toContainText('warning alert message,');
+     });
    });
 });
 
@@ -138,5 +150,9 @@ describe('ErrorAlert', function() {
      it('renders an icon in the alert', function() {
        expect('i').toHaveClass('fa-exclamation-triangle');
      });
+
+     it('has an "error alert" label', function() {
+       expect('.alert .sr-only').toContainText('error alert message,');
+     });
    });
 });
diff --git a/src/pivotal-ui-react/alerts/alerts.js b/src/pivotal-ui-react/alerts/alerts.js
index beb8a2424..d0b1118b9 100644
--- a/src/pivotal-ui-react/alerts/alerts.js
+++ b/src/pivotal-ui-react/alerts/alerts.js
@@ -54,7 +54,15 @@ function defAlert(props) {
       withIcon: types.bool
     },
     render() {
-      return <Alert {...props} {...this.props} />;
+      const {children, ...others} = this.props;
+      return (
+        <Alert {...props} {...others}>
+          <span className="sr-only">
+            {(props.bsStyle === 'danger' ? 'error' : props.bsStyle) + ' alert message,'}
+          </span>
+          {children}
+        </Alert>
+      );
     }
   });
 }
@@ -179,13 +187,13 @@ var SuccessAlert = require('pui-react-alerts').SuccessAlert;
 
 
 ```react_example_table
-<SuccessAlert>success</SuccessAlert>
+<SuccessAlert>Everything is wonderful</SuccessAlert>
 
-<InfoAlert>info</InfoAlert>
+<InfoAlert>Here's some information for you</InfoAlert>
 
-<WarningAlert>warning</WarningAlert>
+<WarningAlert>There is no parking on the dancefloor</WarningAlert>
 
-<ErrorAlert>error</ErrorAlert>
+<ErrorAlert>Something has gone horribly awry</ErrorAlert>
 ```
 */
 
@@ -199,7 +207,7 @@ parent: alerts_react
 Add the `dismissable` property to add a close button to the alert.
 
 ```react_example_table
-<SuccessAlert dismissable>success</SuccessAlert>
+<SuccessAlert dismissable>Everything is wonderful</SuccessAlert>
 ```
 
 If you want a callback to be called when the close button is