Respect meta-keys when navigating in Tabs, ToggleGroup (#3041)

* bug: RovingFocus now respects alt-keys * memo: changeset
navikt · Jul 8, 2024 · 2fe2586 · 2fe2586
1 parent 420c5c3
commit 2fe2586
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/.changeset/bright-pots-melt.md b/.changeset/bright-pots-melt.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Tabs, ToggleGroup: Rovingfocus now respects shift, alt, ctrl and meta-keys when navigating.
diff --git a/@navikt/core/react/src/tabs/parts/tablist/useTabList.ts b/@navikt/core/react/src/tabs/parts/tablist/useTabList.ts
@@ -48,9 +48,16 @@ export function useTabList() {
         End: lastTab,
       };
 
+      const shouldDoAction = !(
+        event.shiftKey ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.metaKey
+      );
+
       const action = keyMap[event.key];
 
-      if (action) {
+      if (shouldDoAction && action) {
         event.preventDefault();
         action(event);
       } else if (event.key === "Tab") {

diff --git a/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts b/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts
@@ -77,9 +77,16 @@ export function useToggleItem<P extends UseToggleItemProps>(
         End: lastTab,
       };
 
+      const shouldDoAction = !(
+        event.shiftKey ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.metaKey
+      );
+
       const action = keyMap[event.key];
 
-      if (action) {
+      if (shouldDoAction && action) {
         event.preventDefault();
         action(event);
       } else if (event.key === "Tab") {