fix: hold keyboard focus on the rooms list for hardware-keyboard navigation (#7467)

Author: diegolmello

app/containers/Header/components/HeaderButton/Common.tsx

@@ -1,7 +1,7 @@
-import { memo } from 'react';
+import { forwardRef, memo } from 'react';
 import { StackActions, useNavigation } from '@react-navigation/native';
 import { type StyleProp, type ViewStyle } from 'react-native';
-import { withKeyboardFocus } from 'react-native-external-keyboard';
+import { type KeyboardFocus, withKeyboardFocus } from 'react-native-external-keyboard';
 
 import I18n from '../../../../i18n';
 import { isIOS } from '../../../../lib/methods/helpers/deviceInfo';
@@ -17,33 +17,32 @@ interface IHeaderButtonCommon extends IHeaderButtonItem {
 }
 
 // Left
-export const Drawer = ({
-	navigation,
-	testID,
-	style = {},
-	onPress = () => navigation?.toggleDrawer(),
-	...props
-}: IHeaderButtonCommon) => {
-	const { colors } = useTheme();
+export const Drawer = forwardRef<KeyboardFocus, IHeaderButtonCommon>(
+	({ navigation, testID, style = {}, onPress = () => navigation?.toggleDrawer(), ...props }, ref) => {
+		const { colors } = useTheme();
 
-	const item = (
-		<ItemChildren
-			autoFocus
-			accessibilityLabel={I18n.t('Menu')}
-			iconName='hamburguer'
-			onPress={onPress}
-			testID={testID}
-			color={colors.fontDefault}
-			{...props}
-		/>
-	);
+		const item = (
+			<ItemChildren
+				ref={ref}
+				autoFocus
+				accessibilityLabel={I18n.t('Menu')}
+				iconName='hamburguer'
+				onPress={onPress}
+				testID={testID}
+				color={colors.fontDefault}
+				{...props}
+			/>
+		);
 
-	return (
-		<Container style={style} left>
-			{item}
-		</Container>
-	);
-};
+		return (
+			<Container style={style} left>
+				{item}
+			</Container>
+		);
+	}
+);
+
+Drawer.displayName = 'HeaderButton.Drawer';
 
 export const CloseModal = memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
 	const { dispatch } = useNavigation();

app/views/RoomsListView/hooks/useHeader.tsx

@@ -1,9 +1,12 @@
-import { useNavigation } from '@react-navigation/native';
-import { useCallback, useContext, useLayoutEffect, useState } from 'react';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { InteractionManager } from 'react-native';
+import { type KeyboardFocus } from 'react-native-external-keyboard';
 
 import * as HeaderButton from '../../../containers/Header/components/HeaderButton';
 import i18n from '../../../i18n';
 import { useAppSelector } from '../../../lib/hooks/useAppSelector';
+import { useIsAccessibilityNavigationEnabled } from '../../../lib/hooks/useIsAccessibilityNavigationEnabled';
 import { useMasterDetail } from '../../../lib/hooks/useMasterDetail';
 import { usePermissions } from '../../../lib/hooks/usePermissions';
 import { isTablet } from '../../../lib/methods/helpers';
@@ -18,6 +21,8 @@ export const useHeader = () => {
 
 	const { searchEnabled, search, startSearch, stopSearch } = useContext(RoomsSearchContext);
 	const [options, setOptions] = useState<any>(null);
+	const isAccessibilityNavigationEnabled = useIsAccessibilityNavigationEnabled();
+	const drawerButtonRef = useRef<KeyboardFocus>(null);
 	const supportedVersionsStatus = useAppSelector(state => state.supportedVersions.status);
 	const requirePasswordChange = useAppSelector(state => getUserSelector(state).requirePasswordChange);
 	const isMasterDetail = useMasterDetail();
@@ -101,6 +106,7 @@ export const useHeader = () => {
 		const options = {
 			headerLeft: () => (
 				<HeaderButton.Drawer
+					ref={drawerButtonRef}
 					navigation={navigation}
 					testID='rooms-list-view-sidebar'
 					onPress={
@@ -171,5 +177,21 @@ export const useHeader = () => {
 		search
 	]);
 
+	// The rooms list header persists across native-stack navigation, so autoFocus (mount-only)
+	// won't re-fire on back-return or after the list/banner render asynchronously. Re-assert focus
+	// on the drawer button every time the screen is focused so external-keyboard/screen-reader
+	// navigation always starts from a known element. Regular touch users are left untouched.
+	useFocusEffect(
+		useCallback(() => {
+			if (!isAccessibilityNavigationEnabled) {
+				return;
+			}
+			const task = InteractionManager.runAfterInteractions(() => {
+				drawerButtonRef.current?.focus();
+			});
+			return () => task.cancel();
+		}, [isAccessibilityNavigationEnabled])
+	);
+
 	return { options };
 };