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'
>