Merge branch 'main' of https://github.com/codegouvfr/react-dsfr

Author: garronej

README.md

@@ -121,11 +121,12 @@ documentation of this starter for understanding the lifecycle of this repo.
 
 A few projects that use `@codegouvfr/react-dsfr`.
 
--   https://sill.code.gouv.fr
+-   https://code.gouv.fr/sill
 -   https://immersion-facile.beta.gouv.fr/
 -   https://refugies.info/fr
 -   https://www.mediateur-public.fr/
 -   https://signal.conso.gouv.fr/
+-   https://observatoire.numerique.gouv.fr/
 -   https://github.com/BaseAdresseNationale/adresse.data.gouv.fr
 -   https://github.com/DISIC/observatoire.numerique.gouv.fr
 -   https://github.com/DISIC/monfranceconnect

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.75.0",
+    "version": "0.75.3",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",

src/Tabs.tsx

@@ -108,31 +108,28 @@ 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;
+            if (selectedTabId !== undefined) {
+                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();
+                buttonRefs.current[targetIndex]?.focus();
             }
-            buttonRefs.current[targetIndex]?.click();
         };
 
-        React.useEffect(() => {
-            const targetTabButton = buttonRefs.current[selectedTabIndex];
-            if (targetTabButton) {
-                targetTabButton.focus();
-            }
-        }, [selectedTabIndex]);
-
         const { getPanelId, getTabId } = (function useClosure() {
             const id = useId();