[added] Accessibility: role 'alert' and aria-label to Alert component

viktorrusakov · Jun 18, 2015 · 4adaa70 · 4adaa70
1 parent 3423e70
commit 4adaa70
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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');
+    });
+
+  });
 });