Merge pull request react-bootstrap#1237 from pivotal-cf/add-accessible-close-button-to-alerts

[fixed] screen-reader accessible dismiss button on alerts

Author: taion

docs/src/ComponentsPage.js

@@ -623,6 +623,11 @@ const ComponentsPage = React.createClass({
                   <p>just pass in a <code>onDismiss</code> function.</p>
                   <ReactPlayground codeText={Samples.AlertDismissable} />
 
+                  <div className="bs-callout bs-callout-info">
+                    <h4>Screen Reader Accessibility</h4>
+                  <p>Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.</p>
+                  </div>
+
                   <h4><Anchor id="alerts-auto-closeable">Auto closeable</Anchor></h4>
                   <p>Auto close after a set time with <code>dismissAfter</code> prop.</p>
                   <ReactPlayground codeText={Samples.AlertAutoDismissable} />

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>
     );
   },

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]);
     });
-
   });
 });