Skip to content

Commit

Permalink
[fixed] screen-reader accessible dismiss button on alerts
Browse files Browse the repository at this point in the history
Before this change, the dismiss button was focusable in VoiceOver, but
not in JAWS.

Signed-off-by: Matt Royal <mroyal@pivotal.io>
  • Loading branch information
Kenny Wang authored and Caroline Taymor committed Sep 1, 2015
1 parent d679b2b commit 1f29000
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 10 deletions.
16 changes: 14 additions & 2 deletions src/Alert.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
},
Expand All @@ -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>
);
},
Expand Down
16 changes: 8 additions & 8 deletions test/AlertSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
});

});
});

0 comments on commit 1f29000

Please sign in to comment.