diff --git a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.test.tsx b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.test.tsx index 1158ca0a35..39d47a357d 100644 --- a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.test.tsx +++ b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.test.tsx @@ -5,7 +5,9 @@ import {shallow} from 'enzyme'; import React from 'react'; import QuickSwitchModal from 'components/quick_switch_modal/quick_switch_modal'; +import ChannelNavigator from 'components/sidebar/channel_navigator/channel_navigator'; +import {renderWithContext, screen, userEvent} from 'tests/react_testing_utils'; import Constants from 'utils/constants'; describe('components/QuickSwitchModal', () => { @@ -144,4 +146,28 @@ describe('components/QuickSwitchModal', () => { }); }); }); + + describe('accessibility', () => { + it('should restore focus to button', () => { + const channelNavigatorProps = { + showUnreadsCategory: false, + isQuickSwitcherOpen: false, + actions: { + openModal: jest.fn(), + closeModal: jest.fn(), + }, + }; + + renderWithContext( + <> + + + , + ); + + userEvent.click(screen.getByTestId('SidebarChannelNavigatorButton')); + userEvent.keyboard('{escape}'); + expect(screen.getByTestId('SidebarChannelNavigatorButton')).toHaveFocus(); + }); + }); }); diff --git a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx index 7b128460bd..0018f94380 100644 --- a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx +++ b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx @@ -96,7 +96,7 @@ export default class QuickSwitchModal extends React.PureComponent this.focusTextbox(); }; - private onHide = (): void => { + private hideOnSelect = (): void => { this.focusPostTextbox(); this.setState({ text: '', @@ -115,6 +115,16 @@ export default class QuickSwitchModal extends React.PureComponent } }; + private hideOnCancel = () => { + this.props.onExited?.(); + setTimeout(() => { + const modalButton = document.querySelector('.SidebarChannelNavigator_jumpToButton') as HTMLElement; + if (modalButton) { + modalButton.focus(); + } + }); + }; + private onChange = (e: React.ChangeEvent): void => { this.setState({text: e.target.value, shouldShowLoadingSpinner: true}); }; @@ -137,12 +147,12 @@ export default class QuickSwitchModal extends React.PureComponent } switchToChannel(selectedChannel).then((result: ActionResult) => { if ('data' in result) { - this.onHide(); + this.hideOnSelect(); } }); } else { getHistory().push('/' + selected.name); - this.onHide(); + this.hideOnSelect(); } }; @@ -188,7 +198,7 @@ export default class QuickSwitchModal extends React.PureComponent { className={'SidebarChannelNavigator_jumpToButton'} onClick={this.openQuickSwitcher} aria-label={Utils.localizeMessage('sidebar_left.channel_navigator.channelSwitcherLabel', 'Channel Switcher')} + aria-haspopup='dialog' + data-testid='SidebarChannelNavigatorButton' >