RovingFocusGroup + Refactor Tabs component to use RovingFocusGroup (#876)

Author: kotAPI

src/components/tools/SandboxEditor/SandboxEditor.tsx

@@ -1,9 +1,11 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { forwardRef, PropsWithChildren, useEffect, useState } from 'react';
 import Button from '~/components/ui/Button/Button';
 import Separator from '~/components/ui/Separator/Separator';
 import Heading from '~/components/ui/Heading/Heading';
 import Text from '~/components/ui/Text/Text';
 
+import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
+
 import colors from '~/colors';
 
 const SunIcon = () => {
@@ -22,11 +24,11 @@ type ColorSelectProps = {color:typeof colors[keyof typeof colors], colorName: st
 
 const ColorSelect = ({ color, colorName, changeAccentColor }: ColorSelectProps) => {
     const dimensions = 32;
-    return <button
-        onClick={() => changeAccentColor(colorName)}
+    return <span
         aria-label={`Change accent color to ${colorName}`}
-        className='cursor-pointer rounded-full hover:border-gray-700 border'
-        style={{ width: dimensions, height: dimensions, backgroundColor: color.light['900'] }}></button>;
+        className='cursor-pointer rounded-full inline-flex'
+        style={{ width: dimensions, height: dimensions, backgroundColor: color.light['900'] }}
+    ></span>;
 };
 
 type SandboxProps = {className?: string | ''} & PropsWithChildren
@@ -54,7 +56,7 @@ const SandboxEditor = ({ children, className } : SandboxProps) => {
                     <RadUILogo/>
                 </div>
                 <Separator orientation='vertical' />
-                <Button description="Click this button" variant="outline" onClick={toggleDarkMode}>{isDarkMode ? <SunIcon/> : <MoonIcon/>}</Button>
+                <Button description="Click this button" variant="solid" onClick={toggleDarkMode}>{isDarkMode ? <SunIcon/> : <MoonIcon/>}</Button>
             </div>
             <Separator />
             <div>
@@ -66,14 +68,25 @@ const SandboxEditor = ({ children, className } : SandboxProps) => {
                     </Text>
                 </div>
                 <Separator />
-                <div className='flex space-x-2 my-1'>
-                    {Object.keys(colors).map((color, idx) => {
-                        const colorName = color as AvailableColors;
-                        return <ColorSelect changeAccentColor={() => setColorName(colorName)} colorName={color} color={colors[colorName]} key={idx} />;
-                    }
-                    )}
-
-                </div>
+                <RovingFocusGroup.Root >
+                    <RovingFocusGroup.Group className='flex space-x-1 my-1'>
+                        {Object.keys(colors).map((color, idx) => {
+                            const colorName = color as AvailableColors;
+                            return <RovingFocusGroup.Item
+                                key={idx}
+                                className='cursor-pointer rounded-full inline-block w-8 h-8 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+                                onFocus={() => setColorName(colorName)}
+                                onClick={() => setColorName(colorName)}
+                            >
+                                <button>
+                                    <ColorSelect colorName={color} color={colors[colorName]}/>
+                                </button>
+                            </RovingFocusGroup.Item>;
+                        }
+                        )}
+                    </RovingFocusGroup.Group>
+
+                </RovingFocusGroup.Root>
             </div>
         </div>
         <Separator/>

src/components/ui/Tabs/fragments/TabList.tsx

@@ -4,6 +4,8 @@ import { clsx } from 'clsx';
 import { TabProps } from '../types';
 import TabsRootContext from '../context/TabsRootContext';
 
+import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
+
 const COMPONENT_NAME = 'TabList';
 
 // Define the Tab type if it's not imported
@@ -20,9 +22,9 @@ export type TabListProps = {
 
 const TabList = ({ className = '', children }: TabListProps) => {
     const { rootClass } = useContext(TabsRootContext);
-    return <div role="tablist" aria-orientation='horizontal' aria-label="todo" className={clsx(`${rootClass}-list`, className)}>
+    return <RovingFocusGroup.Group role="tablist" aria-orientation='horizontal' aria-label="todo" className={clsx(`${rootClass}-list`, className)}>
         {children}
-    </div>;
+    </RovingFocusGroup.Group>;
 };
 
 TabList.displayName = COMPONENT_NAME;

src/components/ui/Tabs/fragments/TabRoot.tsx

@@ -3,7 +3,8 @@ import React, { useState, useRef } from 'react';
 import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
 import TabsRootContext from '../context/TabsRootContext';
-import { getAllBatchElements, getNextBatchItem, getPrevBatchItem } from '~/core/batches';
+
+import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
 
 const COMPONENT_NAME = 'Tabs';
 
@@ -14,33 +15,19 @@ const TabRoot = ({ children, defaultTab = '', customRootClass, tabs = [], classN
 
     const [activeTab, setActiveTab] = useState(defaultTab || tabs[0].value || '');
 
-    const nextTab = () => {
-        const batches = getAllBatchElements(tabRef?.current);
-        const nextItem = getNextBatchItem(batches);
-        nextItem.focus();
-    };
-
-    const previousTab = () => {
-        const batches = getAllBatchElements(tabRef?.current);
-        const prevItem = getPrevBatchItem(batches);
-        prevItem.focus();
-    };
-
     const contextValues = {
         rootClass,
         activeTab,
         setActiveTab,
-        nextTab,
-        previousTab,
         tabs
     };
 
     return (
-        <TabsRootContext.Provider
-            value={contextValues}>
-            <div ref={tabRef} className={clsx(rootClass, className)} data-accent-color={color} {...props} >
+        <TabsRootContext.Provider value={contextValues}>
+            <RovingFocusGroup.Root direction="horizontal" loop ref={tabRef} className={clsx(rootClass, className)} data-accent-color={color} {...props}>
                 {children}
-            </div>
+            </RovingFocusGroup.Root>
+
         </TabsRootContext.Provider>
     );
 };

src/components/ui/Tabs/fragments/TabTrigger.tsx

@@ -5,6 +5,8 @@ import { TabProps } from '../types';
 
 import TabsRootContext from '../context/TabsRootContext';
 
+import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
+
 export type TabTriggerProps = {
     tab: TabProps;
     setActiveTab: React.Dispatch<Tab>;
@@ -17,24 +19,11 @@ export type TabTriggerProps = {
 
 const TabTrigger = ({ tab, className = '', ...props }: TabTriggerProps) => {
     // use context
-    const { previousTab, nextTab, activeTab, setActiveTab, rootClass } = useContext(TabsRootContext);
+    const { activeTab, setActiveTab, rootClass } = useContext(TabsRootContext);
     const ref = useRef<HTMLButtonElement>(null);
 
     const isActive = activeTab === tab.value;
 
-    const handleClick = (tab: TabProps) => {
-        setActiveTab(tab.value);
-    };
-
-    const handleKeyDownEvent = (e: React.KeyboardEvent) => {
-        if (e.key === 'ArrowLeft') {
-            previousTab();
-        }
-        if (e.key === 'ArrowRight') {
-            nextTab();
-        }
-    };
-
     const handleFocus = (tab: TabProps) => {
         if (ref.current) {
             ref.current?.focus();
@@ -47,17 +36,15 @@ const TabTrigger = ({ tab, className = '', ...props }: TabTriggerProps) => {
     };
 
     return (
-        <button
-            ref={ref}
-            role="tab" className={clsx(`${rootClass}-trigger`, `${isActive ? 'active' : ''}`, className)} {...props} onKeyDown={handleKeyDownEvent}
-            onClick={() => handleClick(tab)}
+        <RovingFocusGroup.Item
             onFocus={() => handleFocus(tab)}
-            tabIndex={isActive ? 0 : -1}
-            data-rad-ui-batch-element
-
         >
-            {tab.label}
-        </button>
+            <button
+                ref={ref}
+                className={clsx(`${rootClass}-trigger`, `${isActive ? 'active' : ''}`, className)} role="tab"{...props}>
+                {tab.label}
+            </button>
+        </RovingFocusGroup.Item>
     );
 };
 

src/core/utils/RovingFocusGroup/context/RovingFocusGroupContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, RefObject } from 'react';
+
+/**
+ * Type definition for the RovingFocusGroup context values
+ * @property {string|null} focusedItemId - ID of the currently focused item
+ * @property {Function} setFocusedItemId - Function to update the focused item ID
+ * @property {string[]} focusItems - Array of all item IDs in the focus group
+ * @property {Function} setFocusItems - Function to update the array of focus items
+ * @property {Function} addFocusItem - Function to add a new item to the focus group
+ * @property {RefObject<HTMLDivElement>|null} groupRef - Reference to the group container element
+ */
+export type RovingFocusGroupContextTypes = {
+  focusedItemId: string | null;
+  setFocusedItemId: (id: string | null) => void;
+  focusItems: string[];
+  setFocusItems: React.Dispatch<React.SetStateAction<string[]>>;
+  addFocusItem: (id: string) => void;
+  groupRef: RefObject<HTMLDivElement> | null;
+}
+
+/**
+ * Context that manages the state for a single RovingFocusGroup
+ * Tracks which items are in the group and which one is currently focused
+ * Used by child RovingFocusItem components to coordinate focus management
+ */
+export const RovingFocusGroupContext = createContext<RovingFocusGroupContextTypes>({
+    focusedItemId: null,
+    setFocusedItemId: () => {},
+    focusItems: [],
+    setFocusItems: () => {},
+    addFocusItem: () => {},
+    groupRef: null
+});

src/core/utils/RovingFocusGroup/context/RovingFocusRootContext.tsx

@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+
+/**
+ * Type definition for the RovingFocusRoot context values
+ * @property {('horizontal'|'vertical')} direction - The navigation direction for arrow keys
+ * @property {boolean} loop - Whether focus should loop from last to first item and vice versa
+ */
+export type RovingFocusRootContextTypes = {
+  direction: 'horizontal' | 'vertical';
+  loop: boolean;
+}
+
+/**
+ * Context that manages the root-level configuration for the RovingFocusGroup
+ * Provides direction and loop behavior settings to all nested groups and items
+ */
+export const RovingFocusRootContext = createContext<RovingFocusRootContextTypes>({
+    direction: 'horizontal',
+    loop: true
+});

src/core/utils/RovingFocusGroup/fragments/RovingFocusGroup.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState, useId, useRef } from 'react';
+import Primitive from '~/core/primitives/Primitive';
+
+import { RovingFocusGroupContext } from '../context/RovingFocusGroupContext';
+
+/**
+ * Props for the RovingFocusGroup component
+ * @property {React.ReactNode} children - Child components (should include RovingFocusItem components)
+ * @property {string} [aria-label] - Accessible label for this specific group
+ * @property {string} [aria-labelledby] - ID of an element that labels this specific group
+ */
+type RovingFocusGroupProps = {
+    children: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Group component for the roving focus pattern
+ *
+ * Manages the state of focusable items within a group and handles focus tracking.
+ * Multiple groups can exist within a single RovingFocusRoot.
+ * Each group maintains its own list of focusable items and tracks which item has focus.
+ *
+ * @example
+ * <RovingFocusGroup className="flex gap-2" aria-label="Navigation section">
+ *   <RovingFocusItem><Button>Item 1</Button></RovingFocusItem>
+ *   <RovingFocusItem><Button>Item 2</Button></RovingFocusItem>
+ * </RovingFocusGroup>
+ */
+const RovingFocusGroup = ({
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    ...props
+}: RovingFocusGroupProps) => {
+    const groupRef = useRef<HTMLDivElement>(null);
+    const [focusItems, setFocusItems] = useState<string[]>([]);
+    const [focusedItemId, setFocusedItemId] = useState<string | null>(null);
+    const groupId = useId();
+
+    /**
+     * Adds a new focusable item to the group
+     * @param id - Unique identifier for the item
+     */
+    const addFocusItem = (id: string) => {
+        setFocusItems((prev) => [...prev, id]);
+    };
+
+    // Set initial focus to the first item when items are added
+    useEffect(() => {
+        if (!focusedItemId && focusItems.length > 0) {
+            setFocusedItemId(focusItems[0]);
+        }
+    }, [focusItems, focusedItemId]);
+
+    const sendValues = {
+        focusedItemId,
+        setFocusedItemId,
+        focusItems,
+        setFocusItems,
+        addFocusItem,
+        groupRef
+    };
+
+    return <RovingFocusGroupContext.Provider value={sendValues}>
+        <Primitive.div
+            id={groupId}
+            ref={groupRef}
+            role="group"
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            {...props}
+        >
+            {children}
+        </Primitive.div>
+    </RovingFocusGroupContext.Provider>;
+};
+
+export default RovingFocusGroup;