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({
);
},
@@ -36,7 +38,7 @@ const Alert = React.createClass({
classes['alert-dismissable'] = isDismissable;
return (
-
+
{isDismissable ? this.renderDismissButton() : null}
{this.props.children}
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(
+
Message
+ );
+
+ assert.equal(React.findDOMNode(instance).getAttribute('role'), 'alert');
+ });
+
+ it('Should have add ARIAs to button', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
{}} closeLabel='close'>Message
+ );
+
+ 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');
+ });
+
+ });
});