[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 <[email protected]>
viktorrusakov · Sep 1, 2015 · 1f29000 · 1f29000
1 parent d679b2b
commit 1f29000
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git 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
@@ -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]);
     });
-
   });
 });