adding changes to support horizontal scroll with keyboard (#660)

* adding changes to support horiontal scroll with keyboard

* adding a percentage of window size scroll instead of hardcoding

* adding onkeyDown event

---------

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

Author: protikbiswas100

NewArch/src/examples/ScrollViewExample.tsx

@@ -1,5 +1,5 @@
 'use strict';
-import {Text, ScrollView} from 'react-native';
+import {Text, ScrollView, View, Dimensions} from 'react-native';
 import React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
@@ -9,6 +9,37 @@ import {usePageFocusManagement} from '../hooks/usePageFocusManagement';
 export const ScrollViewExamplePage: React.FunctionComponent<{navigation?: any}> = ({navigation}) => {
   const firstScrollViewExampleRef = usePageFocusManagement(navigation);
   const {colors} = useTheme();
+  
+  // Refs and state for keyboard-focusable ScrollViews
+  const horizontalScrollViewRef = React.useRef<ScrollView>(null);
+  const [scrollOffset, setScrollOffset] = React.useState(0);
+  
+  // Keyboard event handler for horizontal ScrollView
+  const handleHorizontalScrollViewKeyDown = (e: any) => {
+    if (!horizontalScrollViewRef.current) return;
+    
+    const windowWidth = Dimensions.get('window').width;
+    const scrollAmount = windowWidth * 0.1; // 10% of window width
+    
+    if (e.nativeEvent.key === 'ArrowLeft') {
+      e.preventDefault();
+      const newOffset = Math.max(0, scrollOffset - scrollAmount);
+      setScrollOffset(newOffset);
+      horizontalScrollViewRef.current.scrollTo({
+        x: newOffset,
+        animated: true,
+      });
+    } else if (e.nativeEvent.key === 'ArrowRight') {
+      e.preventDefault();
+      const newOffset = scrollOffset + scrollAmount;
+      setScrollOffset(newOffset);
+      horizontalScrollViewRef.current.scrollTo({
+        x: newOffset,
+        animated: true,
+      });
+    }
+  };
+
   const example1jsx = `<ScrollView style={{height: 40}}>
   <Text>
     Here is a very long snippet of text. The goal is for this text to be
@@ -130,6 +161,52 @@ export const ScrollViewExamplePage: React.FunctionComponent<{navigation?: any}>
           </Text>
         </ScrollView>
       </Example>
+      <Example title="A keyboard-focusable horizontal ScrollView." code={`<View>
+  <Text style={{marginBottom: 8, color: 'gray', fontSize: 12}}>
+    Focus this ScrollView with Tab, then use Arrow Left/Right keys to scroll
+  </Text>
+  <ScrollView 
+    ref={horizontalScrollViewRef}
+    style={{height: 40, borderWidth: 1, borderColor: 'gray'}} 
+    horizontal={true}
+    onKeyDown={handleHorizontalScrollViewKeyDown}
+    keyboardEvents={['keyDown']}
+    focusable={true}
+    onScroll={(event) => setScrollOffset(event.nativeEvent.contentOffset.x)}
+    scrollEventThrottle={16}>
+    <Text>
+      Here is a very long snippet of text that requires horizontal scrolling...
+    </Text>
+  </ScrollView>
+</View>`}>
+        <View>
+          <Text style={{marginBottom: 8, color: colors.text, fontSize: 12}}>
+            Focus this ScrollView with Tab, then use Arrow Left/Right keys to scroll
+          </Text>
+          <ScrollView 
+            ref={horizontalScrollViewRef}
+            style={{height: 40, borderWidth: 1, borderColor: colors.border}} 
+            horizontal={true}
+            {...({
+              onKeyDown: handleHorizontalScrollViewKeyDown,
+              keyboardEvents: ['keyDown'],
+              focusable: true,
+            } as any)}
+            onScroll={(event: any) => setScrollOffset(event.nativeEvent.contentOffset.x)}
+            scrollEventThrottle={16}>
+            <Text style={{color: colors.text}}>
+              Here is a very long snippet of text. The goal is for this text to be
+              too long to fit inside this view which has a width restriction, so you
+              can use the arrow keys to scroll horizontally when this ScrollView is focused.
+              This demonstrates keyboard navigation support for horizontal ScrollViews.
+              You can press Tab to focus this ScrollView, then use the Left and Right arrow
+              keys to scroll the content horizontally. This is very useful for accessibility
+              and keyboard-only navigation. Let's make this text even longer to demonstrate
+              the scrolling functionality more effectively.
+            </Text>
+          </ScrollView>
+        </View>
+      </Example>
       <Example title="A disabled ScrollView." code={example3jsx}>
         <ScrollView style={{height: 40}} scrollEnabled={false}>
           <Text style={{color: colors.text}}>