feat: Message keyboard navigability (#31549)

RocketChat · Feb 20, 2024 · 51f90dc · 51f90dc
1 parent 1738e14
commit 51f90dc
Show file tree

Hide file tree

Showing 25 changed files with 291 additions and 115 deletions.
diff --git a/.changeset/spicy-wombats-shout.md b/.changeset/spicy-wombats-shout.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Introduces message navigability, allowing users to navigate on messages through keyboard
diff --git a/apps/meteor/client/components/message/MessageHeader.tsx b/apps/meteor/client/components/message/MessageHeader.tsx
@@ -8,7 +8,7 @@ import {
 	MessageNameContainer,
 } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { KeyboardEvent, ReactElement } from 'react';
 import React, { memo } from 'react';
 
 import { getUserDisplayName } from '../../../lib/getUserDisplayName';
@@ -45,31 +45,30 @@ const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 
 	return (
 		<FuselageMessageHeader>
-			<MessageNameContainer>
+			<MessageNameContainer
+				tabIndex={0}
+				role='button'
+				aria-label={getUserDisplayName(user.name, user.username, showRealName)}
+				{...(user.username !== undefined &&
+					chat?.userCard && {
+						onClick: (e) => chat?.userCard.openUserCard(e, message.u.username),
+						onKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => {
+							(e.code === 'Enter' || e.code === 'Space') && chat?.userCard.openUserCard(e, message.u.username);
+						},
+						style: { cursor: 'pointer' },
+					})}
+			>
 				<MessageName
 					{...(!showUsername && { 'data-qa-type': 'username' })}
 					title={!showUsername && !usernameAndRealNameAreSame ? `@${user.username}` : undefined}
 					data-username={user.username}
-					{...(user.username !== undefined &&
-						chat?.userCard && {
-							onClick: (e) => chat?.userCard.openUserCard(e, message.u.username),
-							style: { cursor: 'pointer' },
-						})}
 				>
 					{message.alias || getUserDisplayName(user.name, user.username, showRealName)}
 				</MessageName>
 				{showUsername && (
 					<>
 						{' '}
-						<MessageUsername
-							data-username={user.username}
-							data-qa-type='username'
-							{...(user.username !== undefined &&
-								chat?.userCard && {
-									onClick: (e) => chat?.userCard.openUserCard(e, message.u.username),
-									style: { cursor: 'pointer' },
-								})}
-						>
+						<MessageUsername data-username={user.username} data-qa-type='username'>
 							@{user.username}
 						</MessageUsername>
 					</>

diff --git a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx
@@ -1,11 +1,12 @@
+import { useToolbar } from '@react-aria/toolbar';
 import type { IMessage, IRoom, ISubscription, ITranslatedMessage } from '@rocket.chat/core-typings';
 import { isThreadMessage, isRoomFederated, isVideoConfMessage } from '@rocket.chat/core-typings';
 import { MessageToolbar as FuselageMessageToolbar, MessageToolbarItem } from '@rocket.chat/fuselage';
 import { useFeaturePreview } from '@rocket.chat/ui-client';
 import { useUser, useSettings, useTranslation, useMethod, useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
-import React, { memo, useMemo } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
@@ -45,19 +46,23 @@ type MessageToolbarProps = {
 	room: IRoom;
 	subscription?: ISubscription;
 	onChangeMenuVisibility: (visible: boolean) => void;
-};
+} & ComponentProps<typeof FuselageMessageToolbar>;
 
 const MessageToolbar = ({
 	message,
 	messageContext,
 	room,
 	subscription,
 	onChangeMenuVisibility,
+	...props
 }: MessageToolbarProps): ReactElement | null => {
 	const t = useTranslation();
 	const user = useUser() ?? undefined;
 	const settings = useSettings();
 
+	const toolbarRef = useRef(null);
+	const { toolbarProps } = useToolbar(props, toolbarRef);
+
 	const quickReactionsEnabled = useFeaturePreview('quickReactions');
 
 	const setReaction = useMethod('setReaction');
@@ -106,7 +111,7 @@ const MessageToolbar = ({
 	};
 
 	return (
-		<FuselageMessageToolbar>
+		<FuselageMessageToolbar ref={toolbarRef} {...toolbarProps} aria-label={t('Message_actions')} {...props}>
 			{quickReactionsEnabled &&
 				isReactionAllowed &&
 				quickReactions.slice(0, 3).map(({ emoji, image }) => {

diff --git a/apps/meteor/client/components/message/variants/RoomMessage.tsx b/apps/meteor/client/components/message/variants/RoomMessage.tsx
@@ -3,7 +3,7 @@ import { Message, MessageLeftContainer, MessageContainer, CheckBox } from '@rock
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { MessageAvatar } from '@rocket.chat/ui-avatar';
 import { useUserId } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import React, { useRef, memo } from 'react';
 
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
@@ -33,7 +33,7 @@ type RoomMessageProps = {
 	context?: MessageActionContext;
 	ignoredUser?: boolean;
 	searchText?: string;
-};
+} & ComponentProps<typeof Message>;
 
 const RoomMessage = ({
 	message,
@@ -45,6 +45,7 @@ const RoomMessage = ({
 	context,
 	ignoredUser,
 	searchText,
+	...props
 }: RoomMessageProps): ReactElement => {
 	const uid = useUserId();
 	const editing = useIsMessageHighlight(message._id);
@@ -60,10 +61,13 @@ const RoomMessage = ({
 	useCountSelected();
 
 	useJumpToMessage(message._id, messageRef);
+
 	return (
 		<Message
 			ref={messageRef}
 			id={message._id}
+			role='listitem'
+			tabIndex={0}
 			onClick={selecting ? toggleSelected : undefined}
 			isSelected={selected}
 			isEditing={editing}
@@ -78,6 +82,7 @@ const RoomMessage = ({
 			data-own={message.u._id === uid}
 			data-qa-type='message'
 			aria-busy={message.temp}
+			{...props}
 		>
 			<MessageLeftContainer>
 				{!sequential && message.u.username && !selecting && showUserAvatar && (
@@ -95,10 +100,8 @@ const RoomMessage = ({
 				{selecting && <CheckBox checked={selected} onChange={toggleSelected} />}
 				{sequential && <StatusIndicators message={message} />}
 			</MessageLeftContainer>
-
 			<MessageContainer>
 				{!sequential && <MessageHeader message={message} />}
-
 				{ignored ? (
 					<IgnoredContent onShowMessageIgnored={toggleDisplayIgnoredMessage} />
 				) : (

diff --git a/apps/meteor/client/components/message/variants/SystemMessage.tsx b/apps/meteor/client/components/message/variants/SystemMessage.tsx
@@ -14,7 +14,7 @@ import {
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import React, { memo } from 'react';
 
 import { MessageTypes } from '../../../../app/ui-utils/client';
@@ -37,9 +37,9 @@ import { useMessageListShowRealName, useMessageListShowUsername } from '../list/
 type SystemMessageProps = {
 	message: IMessage;
 	showUserAvatar: boolean;
-};
+} & ComponentProps<typeof MessageSystem>;
 
-const SystemMessage = ({ message, showUserAvatar }: SystemMessageProps): ReactElement => {
+const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps): ReactElement => {
 	const t = useTranslation();
 	const formatTime = useFormatTime();
 	const formatDateAndTime = useFormatDateAndTime();
@@ -59,11 +59,14 @@ const SystemMessage = ({ message, showUserAvatar }: SystemMessageProps): ReactEl
 
 	return (
 		<MessageSystem
+			role='listitem'
+			tabIndex={0}
 			onClick={isSelecting ? toggleSelected : undefined}
 			isSelected={isSelected}
 			data-qa-selected={isSelected}
 			data-qa='system-message'
 			data-system-message-type={message.t}
+			{...props}
 		>
 			<MessageSystemLeftContainer>
 				{!isSelecting && showUserAvatar && <UserAvatar username={message.u.username} size='x18' />}

diff --git a/apps/meteor/client/components/message/variants/ThreadMessage.tsx b/apps/meteor/client/components/message/variants/ThreadMessage.tsx
@@ -39,6 +39,8 @@ const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMe
 
 	return (
 		<Message
+			role='listitem'
+			tabIndex={0}
 			id={message._id}
 			ref={messageRef}
 			isEditing={editing}

diff --git a/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx b/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx
@@ -14,7 +14,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { MessageAvatar } from '@rocket.chat/ui-avatar';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import React, { memo } from 'react';
 
 import { MessageTypes } from '../../../../app/ui-utils/client';
@@ -36,7 +36,7 @@ type ThreadMessagePreviewProps = {
 	message: IThreadMessage;
 	showUserAvatar: boolean;
 	sequential: boolean;
-};
+} & ComponentProps<typeof ThreadMessage>;
 
 const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }: ThreadMessagePreviewProps): ReactElement => {
 	const parentMessage = useParentMessage(message.tmid);
@@ -56,23 +56,30 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }:
 
 	const goToThread = useGoToThread();
 
+	const handleThreadClick = () => {
+		if (!isSelecting) {
+			if (!sequential) {
+				return parentMessage.isSuccess && goToThread({ rid: message.rid, tmid: message.tmid, msg: parentMessage.data?._id });
+			}
+
+			return goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id });
+		}
+
+		return toggleSelected();
+	};
+
 	return (
 		<ThreadMessage
-			{...props}
-			onClick={isSelecting ? toggleSelected : undefined}
+			tabIndex={0}
+			onClick={handleThreadClick}
+			onKeyDown={(e) => e.code === 'Enter' && handleThreadClick()}
 			isSelected={isSelected}
 			data-qa-selected={isSelected}
 			role='link'
+			{...props}
 		>
 			{!sequential && (
-				<ThreadMessageRow
-					role='link'
-					onClick={
-						!isSelecting && parentMessage.isSuccess
-							? () => goToThread({ rid: message.rid, tmid: message.tmid, msg: parentMessage.data?._id })
-							: undefined
-					}
-				>
+				<ThreadMessageRow>
 					<ThreadMessageLeftContainer>
 						<ThreadMessageIconThread />
 					</ThreadMessageLeftContainer>
@@ -100,7 +107,7 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }:
 					</ThreadMessageContainer>
 				</ThreadMessageRow>
 			)}
-			<ThreadMessageRow onClick={!isSelecting ? () => goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id }) : undefined}>
+			<ThreadMessageRow>
 				<ThreadMessageLeftContainer>
 					{!isSelecting && showUserAvatar && (
 						<MessageAvatar

diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx
@@ -30,7 +30,6 @@ const EmojiElement = ({ emoji, image, onClick, small = false, ...props }: EmojiE
 
 	return (
 		<IconButton
-			{...props}
 			{...(small && { className: emojiSmallClass })}
 			small={small}
 			medium={!small}
@@ -40,6 +39,7 @@ const EmojiElement = ({ emoji, image, onClick, small = false, ...props }: EmojiE
 			data-emoji={emoji}
 			aria-label={emoji}
 			icon={emojiElement}
+			{...props}
 		/>
 	);
 };

diff --git a/apps/meteor/client/views/room/Room.tsx b/apps/meteor/client/views/room/Room.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { createElement, lazy, memo, Suspense } from 'react';
+import { FocusScope } from 'react-aria';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { ContextualbarSkeleton } from '../../components/Contextualbar';
@@ -25,30 +26,36 @@ const Room = (): ReactElement => {
 	return (
 		<ChatProvider>
 			<MessageHighlightProvider>
-				<RoomLayout
-					aria-label={t('Channel')}
-					data-qa-rc-room={room._id}
-					header={<Header room={room} />}
-					body={<RoomBody />}
-					aside={
-						(toolbox.tab?.tabComponent && (
-							<ErrorBoundary fallback={null}>
-								<SelectedMessagesProvider>
-									<Suspense fallback={<ContextualbarSkeleton />}>{createElement(toolbox.tab.tabComponent)}</Suspense>
-								</SelectedMessagesProvider>
-							</ErrorBoundary>
-						)) ||
-						(contextualBarView && (
-							<ErrorBoundary fallback={null}>
-								<SelectedMessagesProvider>
-									<Suspense fallback={<ContextualbarSkeleton />}>
-										<UiKitContextualBar key={contextualBarView.id} initialView={contextualBarView} />
-									</Suspense>
-								</SelectedMessagesProvider>
-							</ErrorBoundary>
-						))
-					}
-				/>
+				<FocusScope>
+					<RoomLayout
+						data-qa-rc-room={room._id}
+						aria-label={
+							room.t === 'd'
+								? t('Conversation_with__roomName__', { roomName: room.name })
+								: t('Channel__roomName__', { roomName: room.name })
+						}
+						header={<Header room={room} />}
+						body={<RoomBody />}
+						aside={
+							(toolbox.tab?.tabComponent && (
+								<ErrorBoundary fallback={null}>
+									<SelectedMessagesProvider>
+										<Suspense fallback={<ContextualbarSkeleton />}>{createElement(toolbox.tab.tabComponent)}</Suspense>
+									</SelectedMessagesProvider>
+								</ErrorBoundary>
+							)) ||
+							(contextualBarView && (
+								<ErrorBoundary fallback={null}>
+									<SelectedMessagesProvider>
+										<Suspense fallback={<ContextualbarSkeleton />}>
+											<UiKitContextualBar key={contextualBarView.id} initialView={contextualBarView} />
+										</Suspense>
+									</SelectedMessagesProvider>
+								</ErrorBoundary>
+							))
+						}
+					/>
+				</FocusScope>
 			</MessageHighlightProvider>
 		</ChatProvider>
 	);