feat(a11y): Bring keyboard shortcuts to a global context

.changeset/purple-pillows-prove.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': patch
+'@rocket.chat/meteor': patch
+---
+
+Moves keyboard shortcuts from the contextual bar into a modal accessible from the user menu, and adds a hotkey to open it.

apps/meteor/client/navbar/NavBarSearch/NavBarSearch.tsx

@@ -87,6 +87,7 @@ const NavBarSearch = () => {
 					ref={mergedRefs}
 					role='combobox'
 					aria-autocomplete='list'
+					aria-keyshortcuts='Control+K Meta+K Control+P Meta+P'
 					small
 					addon={
 						isDirty ? (

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/KeyboardShortcutsModal.tsx

@@ -0,0 +1,136 @@
+import { Box, Divider } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import type { ReactElement } from 'react';
+import { Fragment, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type KeyCombo = {
+	mac: readonly string[];
+	other: readonly string[];
+};
+
+type ShortcutDefinition = {
+	id: string;
+	descriptionKey: string;
+	combos: readonly KeyCombo[];
+};
+
+const SHORTCUTS: readonly ShortcutDefinition[] = [
+	{
+		id: 'openKeyboardShortcuts',
+		descriptionKey: 'Keyboard_Shortcuts_Show_Keyboard_Shortcuts',
+		combos: [{ mac: ['Shift', '?'], other: ['Shift', '?'] }],
+	},
+	{
+		id: 'openSearch',
+		descriptionKey: 'Keyboard_Shortcuts_Open_Channel_Slash_User_Search',
+		combos: [
+			{ mac: ['Command', 'P'], other: ['Control', 'P'] },
+			{ mac: ['Command', 'K'], other: ['Control', 'K'] },
+		],
+	},
+	{
+		id: 'markAllAsRead',
+		descriptionKey: 'Keyboard_Shortcuts_Mark_all_as_read',
+		combos: [{ mac: ['Shift', 'Escape'], other: ['Control', 'Escape'] }],
+	},
+	{
+		id: 'editPreviousMessage',
+		descriptionKey: 'Keyboard_Shortcuts_Edit_Previous_Message',
+		combos: [{ mac: ['ArrowUp'], other: ['ArrowUp'] }],
+	},
+	{
+		id: 'moveToBeginningHorizontal',
+		descriptionKey: 'Keyboard_Shortcuts_Move_To_Beginning_Of_Message',
+		combos: [{ mac: ['Command', 'ArrowLeft'], other: ['Alt', 'ArrowLeft'] }],
+	},
+	{
+		id: 'moveToBeginningVertical',
+		descriptionKey: 'Keyboard_Shortcuts_Move_To_Beginning_Of_Message',
+		combos: [{ mac: ['Command', 'ArrowUp'], other: ['Alt', 'ArrowUp'] }],
+	},
+	{
+		id: 'moveToEndHorizontal',
+		descriptionKey: 'Keyboard_Shortcuts_Move_To_End_Of_Message',
+		combos: [{ mac: ['Command', 'ArrowRight'], other: ['Alt', 'ArrowRight'] }],
+	},
+	{
+		id: 'moveToEndVertical',
+		descriptionKey: 'Keyboard_Shortcuts_Move_To_End_Of_Message',
+		combos: [{ mac: ['Command', 'ArrowDown'], other: ['Alt', 'ArrowDown'] }],
+	},
+	{
+		id: 'newLine',
+		descriptionKey: 'Keyboard_Shortcuts_New_Line_In_Message',
+		combos: [{ mac: ['Shift', 'Enter'], other: ['Shift', 'Enter'] }],
+	},
+];
+
+const KEY_LABEL_TRANSLATIONS: Record<string, string> = {
+	Command: 'Keyboard_Shortcut_Key_Command',
+	Control: 'Keyboard_Shortcut_Key_Control',
+	Option: 'Keyboard_Shortcut_Key_Option',
+	Alt: 'Keyboard_Shortcut_Key_Alt',
+	Shift: 'Keyboard_Shortcut_Key_Shift',
+	Enter: 'Keyboard_Shortcut_Key_Enter',
+	Escape: 'Keyboard_Shortcut_Key_Escape',
+	ArrowUp: 'Keyboard_Shortcut_Key_ArrowUp',
+	ArrowDown: 'Keyboard_Shortcut_Key_ArrowDown',
+	ArrowLeft: 'Keyboard_Shortcut_Key_ArrowLeft',
+	ArrowRight: 'Keyboard_Shortcut_Key_ArrowRight',
+};
+
+const isMacPlatform = (): boolean =>
+	typeof navigator !== 'undefined' && typeof navigator.platform === 'string' && navigator.platform.toLowerCase().includes('mac');
+
+type KeyboardShortcutsModalProps = {
+	onClose: () => void;
+};
+
+const KeyboardShortcutsModal = ({ onClose }: KeyboardShortcutsModalProps): ReactElement => {
+	const { t } = useTranslation();
+	const isMac = isMacPlatform();
+
+	return (
+		<GenericModal icon='keyboard' variant='info' title={t('Keyboard_Shortcuts_Title')} cancelText={t('Close')} onCancel={onClose}>
+			<Box is='dl' aria-label={t('Keyboard_Shortcuts_Title')} m={0}>
+				{SHORTCUTS.map(({ id, descriptionKey, combos }) => (
+					<Box key={id} mbe={12}>
+						<Box is='dt' fontScale='p2m' fontWeight='700' mbe={4}>
+							{t(descriptionKey)}
+						</Box>
+						<Box is='dd' fontScale='p2' m={0} mbe={8}>
+							{combos.map((combo, comboIndex) => {
+								const keys = isMac ? combo.mac : combo.other;
+								return (
+									<Fragment key={comboIndex}>
+										{comboIndex > 0 && (
+											<Box is='span' mi={8} color='hint'>
+												{t('or')}
+											</Box>
+										)}
+										<Box is='kbd'>
+											{keys.map((token, tokenIndex) => (
+												<Fragment key={tokenIndex}>
+													{tokenIndex > 0 && (
+														<Box is='span' mi={4} aria-hidden='true'>
+															+
+														</Box>
+													)}
+													<Box is='kbd'>{KEY_LABEL_TRANSLATIONS[token] ? t(KEY_LABEL_TRANSLATIONS[token]) : token}</Box>
+												</Fragment>
+											))}
+										</Box>
+									</Fragment>
+								);
+							})}
+						</Box>
+						<Divider aria-hidden='true' m={0} />
+					</Box>
+				))}
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default memo(KeyboardShortcutsModal);

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useKeyboardShortcutsModalHandler.tsx

@@ -0,0 +1,12 @@
+import { useSetModal } from '@rocket.chat/ui-contexts';
+
+import KeyboardShortcutsModal from '../KeyboardShortcutsModal';
+
+export const useKeyboardShortcutsModalHandler = () => {
+	const setModal = useSetModal();
+
+	return () => {
+		const handleModalClose = () => setModal(null);
+		setModal(<KeyboardShortcutsModal onClose={handleModalClose} />);
+	};
+};

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx

@@ -6,19 +6,28 @@ import { useTranslation } from 'react-i18next';
 
 import UserMenuHeader from '../UserMenuHeader';
 import { useAccountItems } from './useAccountItems';
+import { useKeyboardShortcutsModalHandler } from './useKeyboardShortcutsModalHandler';
 import { useStatusItems } from './useStatusItems';
 
 export const useUserMenu = (user: IUser) => {
 	const { t } = useTranslation();
 
 	const statusItems = useStatusItems();
 	const accountItems = useAccountItems();
+	const handleKeyboardShortcuts = useKeyboardShortcutsModalHandler();
 
 	const logout = useLogout();
 	const handleLogout = useEffectEvent(() => {
 		logout();
 	});
 
+	const keyboardShortcutsItem: GenericMenuItemProps = {
+		id: 'keyboardShortcuts',
+		icon: 'keyboard',
+		content: t('Keyboard_Shortcuts_Title'),
+		onClick: handleKeyboardShortcuts,
+	};
+
 	const logoutItem: GenericMenuItemProps = {
 		id: 'logout',
 		icon: 'sign-out',
@@ -39,6 +48,9 @@ export const useUserMenu = (user: IUser) => {
 			title: t('Account'),
 			items: accountItems,
 		},
+		{
+			items: [keyboardShortcutsItem],
+		},
 		{
 			items: [logoutItem],
 		},

apps/meteor/client/ui.ts

@@ -15,7 +15,6 @@ import { useDiscussionsRoomAction } from './hooks/roomActions/useDiscussionsRoom
 import { useE2EERoomAction } from './hooks/roomActions/useE2EERoomAction';
 import { useExportMessagesRoomAction } from './hooks/roomActions/useExportMessagesRoomAction';
 import { useGameCenterRoomAction } from './hooks/roomActions/useGameCenterRoomAction';
-import { useKeyboardShortcutListRoomAction } from './hooks/roomActions/useKeyboardShortcutListRoomAction';
 import { useMediaCallRoomAction } from './hooks/roomActions/useMediaCallRoomAction';
 import { useMembersListRoomAction } from './hooks/roomActions/useMembersListRoomAction';
 import { useMentionsRoomAction } from './hooks/roomActions/useMentionsRoomAction';
@@ -52,7 +51,6 @@ export const roomActionHooks = [
 	useE2EERoomAction,
 	useExportMessagesRoomAction,
 	useGameCenterRoomAction,
-	useKeyboardShortcutListRoomAction,
 	useBannedUsersRoomAction,
 	useMembersListRoomAction,
 	useMentionsRoomAction,

apps/meteor/client/views/root/AppLayout.tsx

@@ -23,6 +23,7 @@ import { useEscapeKeyStroke } from './hooks/useEscapeKeyStroke';
 import { useGoogleTagManager } from './hooks/useGoogleTagManager';
 import { useIframeCommands } from './hooks/useIframeCommands';
 import { useIframeLoginListener } from './hooks/useIframeLoginListener';
+import { useKeyboardShortcutsHotkey } from './hooks/useKeyboardShortcutsHotkey';
 import { useLivechatEnterprise } from './hooks/useLivechatEnterprise';
 import { useLoadMissedMessages } from './hooks/useLoadMissedMessages';
 import { useLoadRoomForAllowedAnonymousRead } from './hooks/useLoadRoomForAllowedAnonymousRead';
@@ -48,6 +49,7 @@ const AppLayout = () => {
 	useGoogleTagManager();
 	useAnalytics();
 	useEscapeKeyStroke();
+	useKeyboardShortcutsHotkey();
 	useAnalyticsEventTracking();
 	useLoadRoomForAllowedAnonymousRead();
 	useNotificationPermission();

apps/meteor/client/views/root/hooks/useKeyboardShortcutsHotkey.tsx

@@ -0,0 +1,43 @@
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+import tinykeys from 'tinykeys';
+
+import KeyboardShortcutsModal from '../../../navbar/NavBarSettingsToolbar/UserMenu/KeyboardShortcutsModal';
+
+const shouldIgnoreKeyStroke = (target: EventTarget | null): boolean => {
+	if (!(target instanceof Element)) {
+		return false;
+	}
+
+	if (target instanceof HTMLElement && target.isContentEditable) {
+		return true;
+	}
+
+	const { tagName } = target;
+	if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
+		return true;
+	}
+
+	return target.closest('dialog[open]') !== null;
+};
+
+export const useKeyboardShortcutsHotkey = () => {
+	const setModal = useSetModal();
+
+	useEffect(() => {
+		const handler = (event: KeyboardEvent) => {
+			if (shouldIgnoreKeyStroke(event.target)) {
+				return;
+			}
+
+			event.preventDefault();
+
+			const handleClose = () => setModal(null);
+			setModal(<KeyboardShortcutsModal onClose={handleClose} />);
+		};
+
+		return tinykeys(window, {
+			'Shift+?': handler,
+		});
+	}, [setModal]);
+};