fix(boxai-sidebar): Arrow Key Navigation on Suggested Questions (#3865)

* feat(boxai-sidebar): Arrow Key Navigation on Suggested Questions

* feat(boxai-sidebar): ArrowLeft/Right browser-native button behavior fix

* feat(boxai-sidebar): UT added

Author: DanilaRubleuski

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -99,6 +99,20 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         questionsWithoutInProgress = questionsWithoutInProgress.slice(0, -1);
     }
 
+    const handleKeyPress = React.useCallback((event: KeyboardEvent) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, []);
+
+    React.useEffect(() => {
+        document.addEventListener('keydown', handleKeyPress,{ capture: true });
+        return () => {
+            document.removeEventListener('keydown', handleKeyPress, { capture: true });
+        };
+    }, [handleKeyPress]);
+
     const localizedQuestions = DOCUMENT_SUGGESTED_QUESTIONS.map(question => ({
         id: question.id,
         label: formatMessage(messages[question.labelId]),

src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx

@@ -220,4 +220,29 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
 
         expect(screen.queryByTestId('content-answers-modal')).not.toBeInTheDocument();
     });
+
+    describe('BoxAISidebar handleKeyPress', () => {
+
+        test('should prevent default behavior and stop propagation for ArrowLeft and ArrowRight keys', async () => {
+            await renderComponent();
+
+            const eventLeft = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+            const preventDefaultSpy = jest.spyOn(eventLeft, 'preventDefault');
+            const stopPropagationSpy = jest.spyOn(eventLeft, 'stopPropagation');
+
+            document.dispatchEvent(eventLeft);
+
+            expect(preventDefaultSpy).toHaveBeenCalled();
+            expect(stopPropagationSpy).toHaveBeenCalled();
+
+            const eventRight = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+            const preventDefaultSpyRight = jest.spyOn(eventRight, 'preventDefault');
+            const stopPropagationSpyRight = jest.spyOn(eventRight, 'stopPropagation');
+
+            document.dispatchEvent(eventRight);
+
+            expect(preventDefaultSpyRight).toHaveBeenCalled();
+            expect(stopPropagationSpyRight).toHaveBeenCalled();
+        });
+    });
 });