adding support for keyboard lef/right arrow for navigation menu items (#706)

* adding support for keyboard lef/right arrow for navigation menu items expand/collapse

* removing redundant code

* adding focusable prop

* adding keyboardEvents

* removing enter

---------

Co-authored-by: Protik Biswas <protikbiswas100@microsoft.com>

Author: protikbiswas100

NewArch/src/App.tsx

@@ -130,7 +130,6 @@ const DrawerListItem = React.forwardRef<Pressable, DrawerListItemProps>(
     return (
       <Pressable
         ref={ref}
-        onKeyDown={onKeyDown}
         onPress={() => navigation.navigate(route, { shouldFocus: true, focusTimestamp: Date.now() })}
         onPressIn={() => setIsPressed(true)}
         onPressOut={() => setIsPressed(false)}
@@ -140,7 +139,11 @@ const DrawerListItem = React.forwardRef<Pressable, DrawerListItemProps>(
         accessibilityLabel={label}
         style={localStyles.drawerListItem}
         onAccessibilityTap={() => navigation.navigate(route, { shouldFocus: true, focusTimestamp: Date.now() })}
-        focusable={true}>
+        {...({
+          onKeyDown: onKeyDown,
+          keyboardEvents: ['keyDown'],
+          focusable: true,
+        } as any)}>
         <View style={styles.indentContainer}>
           <SelectedNavigationItemPill
             currentRoute={currentRoute}
@@ -201,6 +204,23 @@ const DrawerCollapsibleCategory = ({
     }
   };
 
+  const handleKeyDown = (e: any) => {
+    
+    // Handle Left Arrow to collapse if expanded
+    if (e.nativeEvent.key === 'ArrowLeft' && isExpanded) {
+      e.preventDefault();
+      setIsExpanded(false);
+      return;
+    }
+    
+    // Handle Right Arrow to expand if collapsed
+    if (e.nativeEvent.key === 'ArrowRight' && !isExpanded) {
+      e.preventDefault();
+      setIsExpanded(true);
+      return;
+    }
+  };
+
   return (
     <View style={styles.category}>
       <Pressable
@@ -222,7 +242,11 @@ const DrawerCollapsibleCategory = ({
           }
         }}
         onAccessibilityTap={() => onPress()}
-        focusable={true}>
+        {...({
+          onKeyDown: handleKeyDown,
+          keyboardEvents: ['keyDown'],
+          focusable: true,
+        } as any)}>
         <View style={styles.indentContainer}>
           <SelectedNavigationItemPill
             currentRoute={currentRoute}
@@ -302,40 +326,37 @@ function CustomDrawerContent({ navigation }: { navigation: any }) {
   const navigationState = navigation.getState();
   const currentRoute = navigationState.routeNames[navigationState.index];
 
-  // Refs for hamburger, home and settings buttons
+  // Refs for main navigation items
   const hamburgerRef = useRef<View>(null);
   const homeRef = useRef<View>(null);
+  const allSamplesRef = useRef<any>(null);
   const settingsRef = useRef<View>(null);
 
-  // When drawer opens, focus the Home menu item
-  useEffect(() => {
-  if (isDrawerOpen && homeRef.current) {
-    InteractionManager.runAfterInteractions(() => {
-      homeRef.current?.focus();
-    });
-  }
-}, [isDrawerOpen]);
-  // Keyboard navigation looping handlers
-  const onHamburgerKeyDown = (e: RNKeyboardEvent) => {
-    if (e.nativeEvent.key === 'Tab' && e.nativeEvent.shiftKey) {
-      e.preventDefault();
-      settingsRef.current?.focus();
+  // Simple keyboard handler that just handles arrow keys for basic navigation
+  const handleKeyDown = (e: any) => {
+    // Let the default behavior handle most navigation
+    // This is a minimal implementation to support arrow keys
+    if (e.nativeEvent.key === 'ArrowDown' || e.nativeEvent.key === 'ArrowUp') {
+      // Allow default focus management
+      return;
     }
   };
-  const onSettingsKeyDown = (e: RNKeyboardEvent) => {
-    if (e.nativeEvent.key === 'Tab' && !e.nativeEvent.shiftKey) {
-      e.preventDefault();
-      hamburgerRef.current?.focus();
+
+  // When drawer opens, focus the Home menu item
+  useEffect(() => {
+    if (isDrawerOpen && homeRef.current) {
+      InteractionManager.runAfterInteractions(() => {
+        homeRef.current?.focus();
+      });
     }
-  };
+  }, [isDrawerOpen]);
 
   return (
     <View style={styles.drawer}>
       <Pressable
         ref={hamburgerRef}
         accessibilityRole="button"
         accessibilityLabel="Navigation menu"
-        tooltip={ 'Collapse navigation menu'}
         accessibilityHint={'Tap to collapse navigation menu'}
         style={styles.menu}
         onPress={() => {
@@ -354,9 +375,11 @@ function CustomDrawerContent({ navigation }: { navigation: any }) {
             navigation.openDrawer();
           }
         }}
-         onKeyDown={onHamburgerKeyDown}
-        keyboardEvents={['keyDown']}
-        focusable={true}>
+        {...({
+          onKeyDown: handleKeyDown,
+          keyboardEvents: ['keyDown'],
+          focusable: true,
+        } as any)}>
         <Text style={styles.icon}>&#xE700;</Text>
       </Pressable>
 
@@ -369,21 +392,26 @@ function CustomDrawerContent({ navigation }: { navigation: any }) {
             icon="&#xE80F;"
             navigation={navigation}
             currentRoute={currentRoute}
-            onKeyDown={() => {}}
+            onKeyDown={handleKeyDown}
             keyboardEvents={['keyDown']}
             focusable={true}
           />
           <DrawerListItem
+            ref={allSamplesRef}
             route="All samples"
             label="All samples"
             icon="&#xE71D;"
             navigation={navigation}
             currentRoute={currentRoute}
+            onKeyDown={handleKeyDown}
             keyboardEvents={['keyDown']}
             focusable={true}
           />
           <View style={styles.drawerDivider} />
-          <DrawerListView navigation={navigation} currentRoute={currentRoute} />
+          <DrawerListView 
+            navigation={navigation} 
+            currentRoute={currentRoute}
+          />
           <View style={styles.drawerDivider} />
 
           <DrawerListItem
@@ -393,7 +421,7 @@ function CustomDrawerContent({ navigation }: { navigation: any }) {
             icon="&#xE713;"
             navigation={navigation}
             currentRoute={currentRoute}
-            onKeyDown={onSettingsKeyDown}
+            onKeyDown={handleKeyDown}
             keyboardEvents={['keyDown']}
             focusable={true}
           />
@@ -408,15 +436,15 @@ const Drawer = createDrawerNavigator();
 function MyDrawer() {
   return (
     <Drawer.Navigator
-      drawerContent={(props) => <CustomDrawerContent {...props} />}
+      drawerContent={(props: any) => <CustomDrawerContent {...props} />}
       screenOptions={{ headerShown: false }}
       defaultStatus="closed"
       initialRouteName="Home">
       {RNGalleryList.map((item) => (
         <Drawer.Screen
           name={item.key}
           key={item.key}
-          component={item.component}
+          component={item.component as any}
         />
       ))}
     </Drawer.Navigator>