chore: Use useButtonPattern instead of manual key check

apps/meteor/client/components/message/MessageHeader.tsx

@@ -7,9 +7,10 @@ import {
 	MessageStatusPrivateIndicator,
 	MessageNameContainer,
 } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
 import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { useUserPresence } from '@rocket.chat/ui-contexts';
-import type { KeyboardEvent, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -35,6 +36,7 @@ const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 	const formatTime = useMessageListFormatTime();
 	const formatDateAndTime = useMessageListFormatDateAndTime();
 	const { triggerProps, openUserCard } = useUserCard();
+	const buttonProps = useButtonPattern((e) => openUserCard(e, message.u.username));
 
 	const showRealName = useMessageListShowRealName();
 	const user = { ...message.u, roles: [], ...useUserPresence(message.u._id) };
@@ -49,15 +51,10 @@ const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 	return (
 		<FuselageMessageHeader>
 			<MessageNameContainer
-				tabIndex={0}
-				role='button'
 				id={`${message._id}-displayName`}
 				aria-label={displayName}
-				onClick={(e) => openUserCard(e, message.u.username)}
-				onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {
-					(e.code === 'Enter' || e.code === 'Space') && openUserCard(e, message.u.username);
-				}}
 				style={{ cursor: 'pointer' }}
+				{...buttonProps}
 				{...triggerProps}
 			>
 				<MessageName

apps/meteor/client/components/message/content/Reactions.tsx

@@ -1,7 +1,8 @@
 import { useToolbar } from '@react-aria/toolbar';
 import type { IMessage } from '@rocket.chat/core-typings';
 import { MessageReactions, MessageReactionAction } from '@rocket.chat/fuselage';
-import type { HTMLAttributes, KeyboardEvent, ReactElement } from 'react';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import type { HTMLAttributes, ReactElement } from 'react';
 import { useContext, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,6 +22,7 @@ const Reactions = ({ message, ...props }: ReactionsProps): ReactElement => {
 	const { username } = useContext(MessageListContext);
 	const toggleReactionMutation = useToggleReactionMutation();
 	const { toolbarProps } = useToolbar(props, ref);
+	const buttonProps = useButtonPattern(openEmojiPicker);
 
 	return (
 		<MessageReactions ref={ref} {...toolbarProps} {...props}>
@@ -33,17 +35,10 @@ const Reactions = ({ message, ...props }: ReactionsProps): ReactElement => {
 						name={name}
 						names={reactions.usernames.filter((user) => user !== username).map((username) => `@${username}`)}
 						messageId={message._id}
-						onKeyDown={(e: KeyboardEvent) =>
-							(e.code === 'Space' || e.code === 'Enter') && toggleReactionMutation.mutate({ mid: message._id, reaction: name })
-						}
 						onClick={() => toggleReactionMutation.mutate({ mid: message._id, reaction: name })}
 					/>
 				))}
-			<MessageReactionAction
-				title={t('Add_Reaction')}
-				onKeyDown={(e: KeyboardEvent) => (e.code === 'Space' || e.code === 'Enter') && openEmojiPicker(e)}
-				onClick={openEmojiPicker}
-			/>
+			<MessageReactionAction title={t('Add_Reaction')} {...buttonProps} />
 		</MessageReactions>
 	);
 };

apps/meteor/client/components/message/content/reactions/Reaction.tsx

@@ -1,4 +1,5 @@
 import { MessageReaction as MessageReactionTemplate, MessageReactionEmoji, MessageReactionCounter } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
 import { useTooltipClose, useTooltipOpen } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import { useRef, useContext } from 'react';
@@ -15,9 +16,10 @@ type ReactionProps = {
 	name: string;
 	names: string[];
 	messageId: string;
+	onClick: () => void;
 } & ComponentProps<typeof MessageReactionTemplate>;
 
-const Reaction = ({ hasReacted, counter, name, names, messageId, ...props }: ReactionProps): ReactElement => {
+const Reaction = ({ hasReacted, counter, name, names, messageId, onClick, ...props }: ReactionProps): ReactElement => {
 	const { t } = useTranslation();
 	const ref = useRef<HTMLDivElement>(null);
 	const openTooltip = useTooltipOpen();
@@ -27,6 +29,7 @@ const Reaction = ({ hasReacted, counter, name, names, messageId, ...props }: Rea
 	const mine = hasReacted(name);
 
 	const emojiProps = getEmojiClassNameAndDataTitle(name);
+	const buttonProps = useButtonPattern(onClick);
 
 	return (
 		<MessageReactionTemplate
@@ -56,6 +59,7 @@ const Reaction = ({ hasReacted, counter, name, names, messageId, ...props }: Rea
 			onMouseLeave={(): void => {
 				closeTooltip();
 			}}
+			{...buttonProps}
 			{...props}
 		>
 			<MessageReactionEmoji {...emojiProps} />

apps/meteor/client/components/message/variants/SystemMessage.tsx

@@ -11,11 +11,12 @@ import {
 	MessageUsername,
 	MessageNameContainer,
 } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useUserDisplayName } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useUserPresence } from '@rocket.chat/ui-contexts';
-import type { ComponentProps, ReactElement, KeyboardEvent } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -59,6 +60,7 @@ const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps
 	const toggleSelected = useToggleSelect(message._id);
 	const isSelected = useIsSelectedMessage(message._id);
 	useCountSelected();
+	const buttonProps = useButtonPattern((e) => openUserCard(e, user.username));
 
 	return (
 		<MessageSystem
@@ -78,16 +80,7 @@ const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps
 			</MessageSystemLeftContainer>
 			<MessageSystemContainer>
 				<MessageSystemBlock>
-					<MessageNameContainer
-						tabIndex={0}
-						role='button'
-						onClick={(e) => user.username && openUserCard(e, user.username)}
-						onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {
-							(e.code === 'Enter' || e.code === 'Space') && openUserCard(e, message.u.username);
-						}}
-						style={{ cursor: 'pointer' }}
-						{...triggerProps}
-					>
+					<MessageNameContainer style={{ cursor: 'pointer' }} {...buttonProps} {...triggerProps}>
 						<MessageSystemName>{displayName}</MessageSystemName>
 						{showUsername && (
 							<>

apps/meteor/client/views/room/Header/ParentRoom.tsx

@@ -1,4 +1,5 @@
 import type { IRoom } from '@rocket.chat/core-typings';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
 import type { ReactElement } from 'react';
 
 import { HeaderTag, HeaderTagIcon } from '../../../components/Header';
@@ -12,15 +13,11 @@ type ParentRoomProps = {
 const ParentRoom = ({ room }: ParentRoomProps): ReactElement => {
 	const icon = useRoomIcon(room);
 
-	const handleRedirect = (): void => roomCoordinator.openRouteLink(room.t, { rid: room._id, ...room });
+	const handleRedirect = () => roomCoordinator.openRouteLink(room.t, { rid: room._id, ...room });
+	const buttonProps = useButtonPattern(handleRedirect);
 
 	return (
-		<HeaderTag
-			role='button'
-			tabIndex={0}
-			onKeyDown={(e) => (e.code === 'Space' || e.code === 'Enter') && handleRedirect()}
-			onClick={handleRedirect}
-		>
+		<HeaderTag {...buttonProps}>
 			<HeaderTagIcon icon={icon} />
 			{roomCoordinator.getRoomName(room.t, room)}
 		</HeaderTag>

apps/meteor/client/views/room/Header/ParentTeam.tsx

@@ -1,5 +1,6 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { TEAM_TYPE } from '@rocket.chat/core-typings';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
 import { useUserId, useEndpoint } from '@rocket.chat/ui-contexts';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
@@ -56,6 +57,8 @@ const ParentTeam = ({ room }: { room: IRoom }): ReactElement | null => {
 		goToRoomById(rid);
 	};
 
+	const buttonProps = useButtonPattern(redirectToMainRoom);
+
 	if (teamInfoLoading || userTeamsLoading) {
 		return <HeaderTagSkeleton />;
 	}
@@ -65,12 +68,7 @@ const ParentTeam = ({ room }: { room: IRoom }): ReactElement | null => {
 	}
 
 	return (
-		<HeaderTag
-			role='button'
-			tabIndex={0}
-			onKeyDown={(e) => (e.code === 'Space' || e.code === 'Enter') && redirectToMainRoom()}
-			onClick={redirectToMainRoom}
-		>
+		<HeaderTag {...buttonProps}>
 			<HeaderTagIcon icon={{ name: isTeamPublic ? 'team' : 'team-lock' }} />
 			{teamInfoData?.teamInfo.name}
 		</HeaderTag>

apps/meteor/client/views/room/Header/RoomTitle.tsx

@@ -1,7 +1,7 @@
 import { isTeamRoom, type IRoom } from '@rocket.chat/core-typings';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useButtonPattern, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useDocumentTitle } from '@rocket.chat/ui-client';
-import type { KeyboardEvent, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 import HeaderIconWithRoom from './HeaderIconWithRoom';
 import { HeaderTitle, HeaderTitleButton } from '../../../components/Header';
@@ -35,14 +35,10 @@ const RoomTitle = ({ room }: { room: IRoom }): ReactElement => {
 		}
 	});
 
+	const buttonProps = useButtonPattern(handleOpenRoomInfo);
+
 	return (
-		<HeaderTitleButton
-			onKeyDown={(e: KeyboardEvent) => (e.code === 'Enter' || e.code === 'Space') && handleOpenRoomInfo()}
-			onClick={() => handleOpenRoomInfo()}
-			tabIndex={0}
-			role='button'
-			mie={4}
-		>
+		<HeaderTitleButton {...buttonProps} mie={4}>
 			<HeaderIconWithRoom room={room} />
 			<HeaderTitle is='h1'>{room.name}</HeaderTitle>
 		</HeaderTitleButton>

apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx

@@ -1,7 +1,6 @@
 import { isTeamRoom, type IRoom } from '@rocket.chat/core-typings';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useButtonPattern, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useDocumentTitle } from '@rocket.chat/ui-client';
-import type { KeyboardEvent } from 'react';
 
 import HeaderIconWithRoom from './HeaderIconWithRoom';
 import { HeaderTitle, HeaderTitleButton } from '../../../components/Header';
@@ -37,14 +36,10 @@ const RoomTitle = ({ room }: RoomTitleProps) => {
 		}
 	});
 
+	const buttonProps = useButtonPattern(handleOpenRoomInfo);
+
 	return (
-		<HeaderTitleButton
-			onKeyDown={(e: KeyboardEvent) => (e.code === 'Enter' || e.code === 'Space') && handleOpenRoomInfo()}
-			onClick={() => handleOpenRoomInfo()}
-			tabIndex={0}
-			role='button'
-			mie={4}
-		>
+		<HeaderTitleButton {...buttonProps} mie={4}>
 			<HeaderIconWithRoom room={room} />
 			<HeaderTitle>{room.name}</HeaderTitle>
 		</HeaderTitleButton>

packages/gazzodown/package.json

@@ -31,6 +31,7 @@
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "~0.31.25",
 		"@rocket.chat/fuselage": "^0.64.0",
+		"@rocket.chat/fuselage-hooks": "^0.36.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/message-parser": "workspace:^",

packages/gazzodown/src/mentions/ChannelMentionElement.tsx

@@ -1,5 +1,6 @@
 import { Message } from '@rocket.chat/fuselage';
-import { memo, ReactElement, useContext, useMemo, KeyboardEvent } from 'react';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import { memo, ReactElement, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
@@ -16,23 +17,14 @@ const ChannelMentionElement = ({ mention }: ChannelMentionElementProps): ReactEl
 
 	const resolved = useMemo(() => resolveChannelMention?.(mention), [mention, resolveChannelMention]);
 	const handleClick = useMemo(() => (resolved ? onChannelMentionClick?.(resolved) : undefined), [resolved, onChannelMentionClick]);
+	const buttonProps = useButtonPattern((e) => handleClick?.(e));
 
 	if (!resolved) {
 		return <>#{mention}</>;
 	}
 
 	return (
-		<Message.Highlight
-			title={t('Mentions_channel')}
-			tabIndex={0}
-			role='button'
-			variant='link'
-			clickable
-			onClick={handleClick}
-			onKeyDown={(e: KeyboardEvent<HTMLSpanElement>): void => {
-				(e.code === 'Enter' || e.code === 'Space') && handleClick?.(e);
-			}}
-		>
+		<Message.Highlight title={t('Mentions_channel')} variant='link' clickable {...buttonProps}>
 			{handleChannelMention(resolved.fname ?? mention, showMentionSymbol)}
 		</Message.Highlight>
 	);

packages/gazzodown/src/mentions/UserMentionElement.tsx

@@ -1,5 +1,6 @@
 import { Message } from '@rocket.chat/fuselage';
-import { memo, ReactElement, useContext, useMemo, KeyboardEvent } from 'react';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import { memo, ReactElement, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
@@ -18,6 +19,7 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement
 
 	const resolved = useMemo(() => resolveUserMention?.(mention), [mention, resolveUserMention]);
 	const handleClick = useMemo(() => (resolved ? onUserMentionClick?.(resolved) : undefined), [resolved, onUserMentionClick]);
+	const buttonProps = useButtonPattern((e) => handleClick?.(e));
 
 	if (mention === 'all') {
 		return (
@@ -44,12 +46,7 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement
 			variant={resolved._id === ownUserId ? 'critical' : 'other'}
 			title={resolved._id === ownUserId ? t('Mentions_you') : t('Mentions_user')}
 			clickable
-			tabIndex={0}
-			role='button'
-			onClick={handleClick}
-			onKeyDown={(e: KeyboardEvent<HTMLSpanElement>): void => {
-				(e.code === 'Enter' || e.code === 'Space') && handleClick?.(e);
-			}}
+			{...buttonProps}
 			{...triggerProps}
 			data-uid={resolved._id}
 		>

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx

@@ -1,5 +1,5 @@
 import { Box, Button } from '@rocket.chat/fuselage';
-import { useOutsideClick, useToggle } from '@rocket.chat/fuselage-hooks';
+import { useButtonPattern, useOutsideClick, useToggle } from '@rocket.chat/fuselage-hooks';
 import type { ComponentProps, FormEvent, ReactElement, RefObject } from 'react';
 import { useCallback, useRef } from 'react';
 
@@ -96,18 +96,18 @@ export const MultiSelectCustom = ({
 	);
 
 	const selectedOptionsCount = dropdownOptions.filter((option) => option.hasOwnProperty('checked') && option.checked).length;
+	const buttonProps = useButtonPattern(() => toggleCollapsed(!collapsed));
 
 	return (
 		<Box display='flex' position='relative'>
 			<MultiSelectCustomAnchor
 				ref={reference}
 				collapsed={collapsed}
-				onClick={() => toggleCollapsed(!collapsed)}
-				onKeyDown={(e) => (e.code === 'Enter' || e.code === 'Space') && toggleCollapsed(!collapsed)}
 				defaultTitle={defaultTitle}
 				selectedOptionsTitle={selectedOptionsTitle}
 				selectedOptionsCount={selectedOptionsCount}
 				maxCount={dropdownOptions.length}
+				{...buttonProps}
 				{...props}
 			/>
 			{collapsed && (

yarn.lock

@@ -8970,6 +8970,7 @@ __metadata:
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": "npm:~0.31.25"
     "@rocket.chat/fuselage": "npm:^0.64.0"
+    "@rocket.chat/fuselage-hooks": "npm:^0.36.0"
     "@rocket.chat/fuselage-tokens": "npm:~0.33.2"
     "@rocket.chat/jest-presets": "workspace:~"
     "@rocket.chat/message-parser": "workspace:^"