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'); + }); + + }); });