fix: focus on thread and reactions

Author: OtavioStasiak

app/containers/message/Reactions.tsx

@@ -39,6 +39,8 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 			onPress={reactionInit}
 			key='message-add-reaction'
 			testID='message-add-reaction'
+			accessibilityRole='button'
+			accessibilityLabel='Add reaction'
 			style={[styles.reactionButton, { backgroundColor: themes[theme].surfaceRoom }]}
 			hitSlop={BUTTON_HIT_SLOP}>
 			<View style={[styles.reactionContainer, { borderColor: themes[theme].strokeLight, height }]}>
@@ -61,6 +63,9 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			onLongPress={onReactionLongPress}
 			key={reaction.emoji}
 			testID={`message-reaction-${reaction.emoji}`}
+			accessibilityRole='button'
+			accessibilityLabel={`${reaction.emoji}, ${reaction.usernames.length}`}
+			accessibilityState={{ selected: reacted }}
 			style={[styles.reactionButton, { backgroundColor: reacted ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom }]}
 			hitSlop={BUTTON_HIT_SLOP}>
 			<View

app/containers/message/Thread.tsx

@@ -7,13 +7,14 @@ import ThreadDetails from '../ThreadDetails';
 import I18n from '../../i18n';
 import { type IMessageThread } from './interfaces';
 import { useTheme } from '../../theme';
+import Touchable from './Touchable';
 
 const Thread = React.memo(
 	({ msg, tcount, tlm, isThreadRoom, id }: IMessageThread) => {
 		'use memo';
 
 		const { theme, colors } = useTheme();
-		const { threadBadgeColor, toggleFollowThread, user, replies } = useContext(MessageContext);
+		const { threadBadgeColor, toggleFollowThread, user, replies, onThreadPress } = useContext(MessageContext);
 
 		const backgroundColor = threadBadgeColor ? colors.badgeBackgroundLevel2 : colors.buttonBackgroundSecondaryDefault;
 		const textColor = threadBadgeColor || theme !== 'light' ? colors.fontWhite : colors.fontPureBlack;
@@ -24,9 +25,14 @@ const Thread = React.memo(
 
 		return (
 			<View style={styles.buttonContainer}>
-				<View style={[styles.button, { backgroundColor }]} testID={`message-thread-button-${msg}`}>
+				<Touchable
+					onPress={onThreadPress}
+					accessibilityRole='button'
+					accessibilityLabel={I18n.t('View_Thread')}
+					style={[styles.button, { backgroundColor }]}
+					testID={`message-thread-button-${msg}`}>
 					<Text style={[styles.buttonText, { color: textColor }]}>{I18n.t('View_Thread')}</Text>
-				</View>
+				</Touchable>
 				<ThreadDetails
 					item={{
 						tcount,

app/containers/message/Touchable.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { Pressable, type PressableProps } from 'react-native';
+import { withKeyboardFocus } from 'react-native-external-keyboard';
 
 import MessageContext from './Context';
 
@@ -8,15 +9,23 @@ interface IProps extends PressableProps {
 	onLongPress?: () => void;
 }
 
+const KeyboardPressable = withKeyboardFocus(Pressable);
+
 const RCTouchable: React.FC<IProps> = React.memo(({ children, ...props }) => {
 	'use memo';
 
 	const { onLongPress } = useContext(MessageContext);
+	const { onHoverIn, onHoverOut, ...rest } = props;
 
 	return (
-		<Pressable onLongPress={onLongPress} {...props}>
+		<KeyboardPressable
+			focusable
+			onLongPress={onLongPress}
+			onHoverIn={onHoverIn || undefined}
+			onHoverOut={onHoverOut || onLongPress}
+			{...rest}>
 			{children}
-		</Pressable>
+		</KeyboardPressable>
 	);
 });