fix: resolve accessibility focus management issues in dropdown, sidebar, and table components

claude[bot] · modelorona · web-flow · commit f0054c248077 · 2025-06-16T01:10:19.000Z
- Fix dropdown focus loss on blur by adding proper blur/focus handlers with timeout management
- Fix sidebar submenu focus management by improving timeout handling and escape key behavior
- Add focus management to table pagination after page changes - focus returns to current/available page button

Addresses jazzberry AI accessibility report issues:
- Dropdown focus loss on blur (Medium severity)
- Sidebar submenu focus management issue (Medium severity) 
- Table Pagination focus management after page change (Low severity)

Co-authored-by: Anguel &lt;modelorona@users.noreply.github.com&gt;
diff --git a/frontend/src/components/dropdown.tsx b/frontend/src/components/dropdown.tsx
@@ -63,6 +63,7 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
     const dropdownRef = useRef<HTMLDivElement>(null);
     const triggerRef = useRef<HTMLButtonElement>(null);
     const itemsRef = useRef<HTMLDivElement[]>([]);
+    const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     const handleClick = useCallback((item: IDropdownItem) => {
         setOpen(false);
@@ -76,7 +77,38 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
     const handleClose = useCallback(() => {
         setOpen(false);
         setFocusedIndex(-1);
-        triggerRef.current?.focus();
+        // Clear any pending blur timeout
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+            blurTimeoutRef.current = null;
+        }
+        // Ensure focus returns to trigger button
+        setTimeout(() => {
+            triggerRef.current?.focus();
+        }, 0);
+    }, []);
+
+    const handleDropdownBlur = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+        // Clear any existing timeout
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        
+        // Set a timeout to check if focus moved outside the dropdown
+        blurTimeoutRef.current = setTimeout(() => {
+            if (dropdownRef.current && !dropdownRef.current.contains(document.activeElement)) {
+                setOpen(false);
+                setFocusedIndex(-1);
+            }
+        }, 100);
+    }, []);
+
+    const handleDropdownFocus = useCallback(() => {
+        // Clear the blur timeout if focus returns to dropdown
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+            blurTimeoutRef.current = null;
+        }
     }, []);
 
     const handleKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {
@@ -146,7 +178,12 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
     }, [open, handleClose]);
 
     return (
-        <div ref={dropdownRef} className={classNames("relative", props.className)}>
+        <div 
+            ref={dropdownRef} 
+            className={classNames("relative", props.className)}
+            onBlur={handleDropdownBlur}
+            onFocus={handleDropdownFocus}
+        >
             {open && <div className="fixed inset-0" onClick={handleClose} />}
             {props.loading ? <div className="flex h-full w-full items-center justify-center">
                 <Loading hideText={true} size="sm" />
diff --git a/frontend/src/components/sidebar/sidebar.tsx b/frontend/src/components/sidebar/sidebar.tsx
@@ -57,6 +57,8 @@ export const SideMenu: FC<IRouteProps> = (props) => {
     const navigate = useNavigate();
     const [hover, setHover] = useState(false);
     const [focused, setFocused] = useState(false);
+    const blurTimeoutIdRef = useRef<NodeJS.Timeout | null>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
     const status = (hover || focused) ? "show" : "hide";
     const pathname = useLocation().pathname;
 
@@ -84,7 +86,16 @@ export const SideMenu: FC<IRouteProps> = (props) => {
             setFocused(true);
         }
         if (e.key === 'Escape') {
+            // Clear any pending timeout and properly close submenu
+            if (blurTimeoutIdRef.current) {
+                clearTimeout(blurTimeoutIdRef.current);
+                blurTimeoutIdRef.current = null;
+            }
             setFocused(false);
+            // Ensure focus remains on the trigger element
+            setTimeout(() => {
+                (e.target as HTMLElement)?.focus();
+            }, 0);
         }
     }, [handleClick, props.routes]);
 
@@ -94,14 +105,39 @@ export const SideMenu: FC<IRouteProps> = (props) => {
         }
     }, [props.routes]);
 
-    const handleBlur = useCallback(() => {
-        // Delay hiding to allow focus to move to submenu items
-        setTimeout(() => setFocused(false), 100);
+    const handleBlur = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+        // Clear any existing timeout
+        if (blurTimeoutIdRef.current) {
+            clearTimeout(blurTimeoutIdRef.current);
+        }
+        
+        // Set a timeout to check if focus moved outside the menu
+        blurTimeoutIdRef.current = setTimeout(() => {
+            if (menuRef.current && !menuRef.current.contains(document.activeElement)) {
+                setFocused(false);
+            }
+        }, 100);
+    }, []);
+
+    const handleMenuFocus = useCallback(() => {
+        // Clear the blur timeout if focus returns to menu
+        if (blurTimeoutIdRef.current) {
+            clearTimeout(blurTimeoutIdRef.current);
+            blurTimeoutIdRef.current = null;
+        }
     }, []);
 
-    return <div className={classNames("flex items-center", {
-        "justify-center": props.collapse,
-    })}  onMouseEnter={handleMouseEnter} onMouseOver={handleMouseEnter} onMouseLeave={handleMouseLeave} data-testid={props.testId}>
+    return <div 
+        ref={menuRef}
+        className={classNames("flex items-center", {
+            "justify-center": props.collapse,
+        })}  
+        onMouseEnter={handleMouseEnter} 
+        onMouseOver={handleMouseEnter} 
+        onMouseLeave={handleMouseLeave} 
+        onFocus={handleMenuFocus}
+        onBlur={handleBlur}
+        data-testid={props.testId}>
         <AnimatePresence mode="sync">
             <div className={twMerge(classNames("cursor-default text-md inline-flex gap-2 transition-all hover:gap-2 relative w-full py-4 rounded-md dark:border-white/5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800", {
                 "cursor-pointer": props.path != null,
diff --git a/frontend/src/components/table.tsx b/frontend/src/components/table.tsx
@@ -39,6 +39,28 @@ type IPaginationProps = {
 }
 
 const Pagination: FC<IPaginationProps> = ({ pageCount, currentPage, onPageChange }) => {
+    const paginationRef = useRef<HTMLDivElement>(null);
+    const [focusedPage, setFocusedPage] = useState<number | null>(null);
+
+    const handlePageChange = useCallback((page: number) => {
+        setFocusedPage(page);
+        onPageChange?.(page);
+        
+        // Set focus to the new current page button after page change
+        setTimeout(() => {
+            if (paginationRef.current) {
+                const pageButton = paginationRef.current.querySelector(`button[aria-current="page"]`) as HTMLButtonElement;
+                if (pageButton) {
+                    pageButton.focus();
+                } else {
+                    // Fallback: focus first available page button
+                    const firstButton = paginationRef.current.querySelector('button') as HTMLButtonElement;
+                    firstButton?.focus();
+                }
+            }
+        }, 100);
+    }, [onPageChange]);
+
     const renderPageNumbers = () => {
         const pageNumbers = [];
         const maxVisiblePages = 5;
@@ -49,11 +71,11 @@ const Pagination: FC<IPaginationProps> = ({ pageCount, currentPage, onPageChange
                     <button
                         key={i}
                         className={`cursor-pointer p-2 text-sm hover:scale-110 hover:bg-gray-200 rounded-md text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 ${currentPage === i ? 'bg-gray-300' : ''}`}
-                        onClick={() => onPageChange?.(i)}
+                        onClick={() => handlePageChange(i)}
                         onKeyDown={(e) => {
                             if (e.key === 'Enter' || e.key === ' ') {
                                 e.preventDefault();
-                                onPageChange?.(i);
+                                handlePageChange(i);
                             }
                         }}
                         aria-label={`Go to page ${i}`}
@@ -70,11 +92,11 @@ const Pagination: FC<IPaginationProps> = ({ pageCount, currentPage, onPageChange
                     className={classNames("cursor-pointer p-2 text-sm hover:scale-110 hover:bg-gray-200 dark:hover:bg-white/15 rounded-md text-gray-600 dark:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-blue-500", {
                         "bg-gray-300 dark:bg-white/10": currentPage === i,
                     })}
-                    onClick={() => onPageChange?.(i)}
+                    onClick={() => handlePageChange(i)}
                     onKeyDown={(e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
-                            onPageChange?.(i);
+                            handlePageChange(i);
                         }
                     }}
                     aria-label={`Go to page ${i}`}
@@ -113,7 +135,7 @@ const Pagination: FC<IPaginationProps> = ({ pageCount, currentPage, onPageChange
 
     return (
         <nav aria-label="Table pagination" role="navigation">
-            <div className="flex space-x-2">
+            <div ref={paginationRef} className="flex space-x-2">
                 {renderPageNumbers()}
             </div>
         </nav>
