Skip to content

Commit

Permalink
fix(statusalert): Expose focus function on StatusAlert component
Browse files Browse the repository at this point in the history
In order to make focus management for accessible pages easier, expose a focus function on the component to allow parent to call focus on the component ref.
  • Loading branch information
MichaelRoytman committed Dec 7, 2017
1 parent 4f253ff commit b783247
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 0 deletions.
19 changes: 19 additions & 0 deletions src/StatusAlert/StatusAlert.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { mount } from 'enzyme';

import StatusAlert from './index';
import Button from '../Button';

const statusAlertOpen = (isOpen, wrapper) => {
expect(wrapper.childAt(0).hasClass('show')).toEqual(isOpen);
Expand Down Expand Up @@ -114,4 +115,22 @@ describe('<StatusAlert />', () => {
statusAlertOpen(true, wrapper);
});
});
describe('focus functions properly', () => {
it('focus function changes focus', () => {
wrapper = mount(<div>
<Button label="test" />
<StatusAlert {...defaultProps} />
</div>);

const buttons = wrapper.find('button');

// move focus away from default StatusAlert xButton
buttons.at(0).simulate('click');
expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);

const statusAlert = wrapper.find('StatusAlert').instance();
statusAlert.focus();
expect(buttons.at(1).html()).toEqual(document.activeElement.outerHTML);
});
});
});
4 changes: 4 additions & 0 deletions src/StatusAlert/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ class StatusAlert extends React.Component {
}
}

focus() {
this.xButton.focus();
}

close() {
this.setState({ open: false });
this.props.onClose();
Expand Down

0 comments on commit b783247

Please sign in to comment.