diff --git a/.changeset/bright-pots-melt.md b/.changeset/bright-pots-melt.md new file mode 100644 index 0000000000..259bea895b --- /dev/null +++ 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 index a64a512e89..059a39cc66 100644 --- 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 index 04fce6fa44..384ef62b0c 100644 --- 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

( 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") {