From 603ec298511e1dd9314dd201ad8181d831a98632 Mon Sep 17 00:00:00 2001
From: BrianRid <brianridolce@gmail.com>
Date: Wed, 26 Jul 2023 10:47:39 +0200
Subject: [PATCH 1/2] feat: adding keyboard navigation to Tabs component for
 accessibility purpose

---
 src/Tabs.tsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index 35600dec9..8c413b2f4 100644
--- a/src/Tabs.tsx
+++ b/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,45 @@ 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;
+            }
+            setSelectedTabIndex(targetIndex);
+        };
+
+        React.useEffect(() => {
+            const targetTabButton = buttonRefs.current[selectedTabIndex];
+            if (targetTabButton) {
+                targetTabButton.focus();
+            }
+        }, [selectedTabIndex]);
+
+        React.useEffect(() => {
+            if (selectedTabId === undefined) {
+                onTabChange?.({
+                    tabIndex: selectedTabIndex,
+                    "tab": tabs[selectedTabIndex]
+                });
+            } else {
+                onTabChange(tabs[selectedTabIndex].tabId);
+            }
+        }, [selectedTabIndex]);
+
         const { getPanelId, getTabId } = (function useClosure() {
             const id = useId();
 
@@ -124,10 +164,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"),

From 2f65c4e93dc62eb2c59eadc670751aa9e0007ec7 Mon Sep 17 00:00:00 2001
From: BrianRid <brianridolce@gmail.com>
Date: Wed, 26 Jul 2023 11:03:30 +0200
Subject: [PATCH 2/2] feat: improving logic by simulating click on tabs

---
 src/Tabs.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index 8c413b2f4..1a5543b2b 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -123,7 +123,7 @@ export const Tabs = memo(
                     targetIndex = tabs.length - 1;
                     break;
             }
-            setSelectedTabIndex(targetIndex);
+            buttonRefs.current[targetIndex]?.click();
         };
 
         React.useEffect(() => {
@@ -133,17 +133,6 @@ export const Tabs = memo(
             }
         }, [selectedTabIndex]);
 
-        React.useEffect(() => {
-            if (selectedTabId === undefined) {
-                onTabChange?.({
-                    tabIndex: selectedTabIndex,
-                    "tab": tabs[selectedTabIndex]
-                });
-            } else {
-                onTabChange(tabs[selectedTabIndex].tabId);
-            }
-        }, [selectedTabIndex]);
-
         const { getPanelId, getTabId } = (function useClosure() {
             const id = useId();