Merge pull request #152 from BrianRid/feat/keyboard-nav-in-tabs

feat: adding keyboard navigation to Tabs component for accessibility …

Author: garronej

src/Tabs.tsx

@@ -83,13 +83,14 @@ export const Tabs = memo(
             return index === -1 ? 0 : index;
         };
 
+        const buttonRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
+
         const [selectedTabIndex, setSelectedTabIndex] = useState<number>(getSelectedTabIndex);
 
         useEffect(() => {
             if (selectedTabId === undefined) {
                 return;
             }
-
             setSelectedTabIndex(getSelectedTabIndex());
         }, [selectedTabId]);
 
@@ -104,6 +105,34 @@ export const Tabs = memo(
             }
         });
 
+        const onKeyboardNavigation = (
+            event: React.KeyboardEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLUListElement>
+        ) => {
+            let targetIndex = selectedTabIndex;
+            switch (event.key) {
+                case "ArrowRight":
+                    targetIndex = selectedTabIndex < tabs.length - 1 ? selectedTabIndex + 1 : 0;
+                    break;
+                case "ArrowLeft":
+                    targetIndex = selectedTabIndex === 0 ? tabs.length - 1 : selectedTabIndex - 1;
+                    break;
+                case "Home":
+                    targetIndex = 0;
+                    break;
+                case "End":
+                    targetIndex = tabs.length - 1;
+                    break;
+            }
+            buttonRefs.current[targetIndex]?.click();
+        };
+
+        React.useEffect(() => {
+            const targetTabButton = buttonRefs.current[selectedTabIndex];
+            if (targetTabButton) {
+                targetTabButton.focus();
+            }
+        }, [selectedTabIndex]);
+
         const { getPanelId, getTabId } = (function useClosure() {
             const id = useId();
 
@@ -124,10 +153,16 @@ export const Tabs = memo(
                 style={style}
                 {...rest}
             >
-                <ul className={fr.cx("fr-tabs__list")} role="tablist" aria-label={label}>
+                <ul
+                    className={fr.cx("fr-tabs__list")}
+                    role="tablist"
+                    aria-label={label}
+                    onKeyDownCapture={e => onKeyboardNavigation(e)}
+                >
                     {tabs.map(({ label, iconId }, tabIndex) => (
                         <li key={label + (iconId ?? "")} role="presentation">
                             <button
+                                ref={button => (buttonRefs.current[tabIndex] = button)}
                                 id={getTabId(tabIndex)}
                                 className={cx(
                                     fr.cx("fr-tabs__tab", iconId, "fr-tabs__tab--icon-left"),