feat(bounding-box): keyboard navigation for bounding boxes list (#741)

* feat(bounding-box): keyboard navigation for bounding boxes list

* feat(bounding-box): update stop propagation

Author: dlasecki-box

src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.tsx

@@ -8,15 +8,34 @@ import './BoundingBoxHighlightNav.scss';
 type Props = {
     currentIndex: number;
     total: number;
-    onPrev: (event: React.MouseEvent) => void;
-    onNext: (event: React.MouseEvent) => void;
+    onPrev: (event: React.MouseEvent | KeyboardEvent) => void;
+    onNext: (event: React.MouseEvent | KeyboardEvent) => void;
 };
 
 const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props): JSX.Element => {
     const intl = useIntl();
     const isPrevDisabled = currentIndex === 0;
     const isNextDisabled = currentIndex === total - 1;
 
+    React.useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent): void => {
+            if (event.key === 'ArrowLeft') {
+                event.stopPropagation();
+                if (!isPrevDisabled) {
+                    onPrev(event);
+                }
+            } else if (event.key === 'ArrowRight') {
+                event.stopPropagation();
+                if (!isNextDisabled) {
+                    onNext(event);
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown, { capture: true });
+        return () => document.removeEventListener('keydown', handleKeyDown, { capture: true });
+    }, [isPrevDisabled, isNextDisabled, onPrev, onNext]);
+
     return (
         <div className="ba-BoundingBoxHighlightNav" data-testid="ba-BoundingBoxHighlightNav">
             <button

src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.tsx

@@ -40,14 +40,14 @@ const BoundingBoxHighlightRect = ({
         onSelect?.(id);
     };
 
-    const handlePrev = (event: React.MouseEvent): void => {
+    const handlePrev = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (prevId) {
             onNavigate?.(prevId);
         }
     };
 
-    const handleNext = (event: React.MouseEvent): void => {
+    const handleNext = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (nextId) {
             onNavigate?.(nextId);

src/components/BoundingBoxHighlight/__tests__/BoundingBoxHighlightNav-test.tsx

@@ -116,6 +116,95 @@ describe('BoundingBoxHighlightNav', () => {
         });
     });
 
+    describe('keyboard navigation', () => {
+        test('should call onPrev when ArrowLeft is pressed', () => {
+            const onPrev = jest.fn();
+            renderNav({ currentIndex: 1, onPrev });
+
+            fireEvent.keyDown(document, { key: 'ArrowLeft' });
+
+            expect(onPrev).toHaveBeenCalledTimes(1);
+        });
+
+        test('should call onNext when ArrowRight is pressed', () => {
+            const onNext = jest.fn();
+            renderNav({ currentIndex: 1, onNext });
+
+            fireEvent.keyDown(document, { key: 'ArrowRight' });
+
+            expect(onNext).toHaveBeenCalledTimes(1);
+        });
+
+        test('should not call onPrev when ArrowLeft is pressed and at first item', () => {
+            const onPrev = jest.fn();
+            renderNav({ currentIndex: 0, onPrev });
+
+            fireEvent.keyDown(document, { key: 'ArrowLeft' });
+
+            expect(onPrev).not.toHaveBeenCalled();
+        });
+
+        test('should not call onNext when ArrowRight is pressed and at last item', () => {
+            const onNext = jest.fn();
+            renderNav({ currentIndex: 4, total: 5, onNext });
+
+            fireEvent.keyDown(document, { key: 'ArrowRight' });
+
+            expect(onNext).not.toHaveBeenCalled();
+        });
+
+        test('should stop propagation for ArrowLeft even when prev is disabled', () => {
+            renderNav({ currentIndex: 0 });
+            const event = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true });
+            jest.spyOn(event, 'stopPropagation');
+
+            document.dispatchEvent(event);
+
+            expect(event.stopPropagation).toHaveBeenCalled();
+        });
+
+        test('should stop propagation for ArrowRight even when next is disabled', () => {
+            renderNav({ currentIndex: 4, total: 5 });
+            const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true });
+            jest.spyOn(event, 'stopPropagation');
+
+            document.dispatchEvent(event);
+
+            expect(event.stopPropagation).toHaveBeenCalled();
+        });
+
+        test('should not stop propagation for non-arrow keys', () => {
+            renderNav({ currentIndex: 1 });
+            const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+            jest.spyOn(event, 'stopPropagation');
+
+            document.dispatchEvent(event);
+
+            expect(event.stopPropagation).not.toHaveBeenCalled();
+        });
+
+        test('should not call callbacks for non-arrow keys', () => {
+            const onPrev = jest.fn();
+            const onNext = jest.fn();
+            renderNav({ currentIndex: 1, onPrev, onNext });
+
+            fireEvent.keyDown(document, { key: 'Enter' });
+
+            expect(onPrev).not.toHaveBeenCalled();
+            expect(onNext).not.toHaveBeenCalled();
+        });
+
+        test('should remove keydown listener on unmount', () => {
+            const onPrev = jest.fn();
+            const { unmount } = renderNav({ currentIndex: 1, onPrev });
+
+            unmount();
+            fireEvent.keyDown(document, { key: 'ArrowLeft' });
+
+            expect(onPrev).not.toHaveBeenCalled();
+        });
+    });
+
     describe('accessibility', () => {
         test('should have aria-label on prev button', () => {
             renderNav();