diff --git a/src/components/Tabs/Tabs.context.tsx b/src/components/Tabs/Tabs.context.tsx
index 343778369..2dd31e5bb 100644
--- a/src/components/Tabs/Tabs.context.tsx
+++ b/src/components/Tabs/Tabs.context.tsx
@@ -35,7 +35,7 @@ const TabsProvider = ({
themeContainerId,
statgrouptheme,
value,
- enableArrowNav = false,
+ enableArrowNav = true,
variant = TabVariant.default,
}: TabsContextProps) => {
const [currentActiveTab, setCurrentActiveTab] = useState(value);
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 4caa47c3a..dafe6dd22 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -180,7 +180,7 @@ const tabsArgs: Object = {
variant: TabVariant.default,
size: TabSize.Medium,
underlined: false,
- enableArrowNav: false,
+ enableArrowNav: true,
children: tabs.map((tab) => ),
style: {},
};
diff --git a/src/components/Tabs/Tabs.types.ts b/src/components/Tabs/Tabs.types.ts
index 4b132e116..20a501224 100644
--- a/src/components/Tabs/Tabs.types.ts
+++ b/src/components/Tabs/Tabs.types.ts
@@ -129,7 +129,7 @@ export interface TabsContextProps {
variant?: TabVariant;
/**
Whether to enable arrow key navigation between tabs
- @default false
+ @default true
*/
enableArrowNav?: boolean;
}
@@ -229,7 +229,7 @@ export interface ITabsContext {
handleKeyDown?: (event: React.KeyboardEvent, tabIndex: number) => void;
/**
Whether to enable arrow key navigation between tabs
- @default false
+ @default true
*/
enableArrowNav?: boolean;
/**
@@ -296,7 +296,7 @@ export interface TabProps extends OcBaseProps {
ariaControls?: string;
/**
Whether to enable arrow key navigation between tabs
- @default false
+ @default true
*/
enableArrowNav?: boolean;
/*
diff --git a/src/components/Tabs/Tabs/AnimatedTabs.tsx b/src/components/Tabs/Tabs/AnimatedTabs.tsx
index 24ac16fa9..e344a61a0 100644
--- a/src/components/Tabs/Tabs/AnimatedTabs.tsx
+++ b/src/components/Tabs/Tabs/AnimatedTabs.tsx
@@ -27,7 +27,7 @@ export const AnimatedTabs: FC = React.forwardRef(
style,
underlined = false,
variant = TabVariant.default,
- enableArrowNav = false,
+ enableArrowNav = true,
...rest
},
ref: Ref
diff --git a/src/components/Tabs/Tabs/index.tsx b/src/components/Tabs/Tabs/index.tsx
index c4edb1b77..1cf634bd7 100644
--- a/src/components/Tabs/Tabs/index.tsx
+++ b/src/components/Tabs/Tabs/index.tsx
@@ -23,7 +23,7 @@ export const Tabs: FC = React.forwardRef(
themeContainerId,
value,
variant,
- enableArrowNav = false,
+ enableArrowNav = true,
} = props;
const { configContextProps, ...restProps } = props;
return (
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index 48e233fbe..d31d44fe8 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`Tabs pill tabs large snapshot 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="tab"
- tabIndex={0}
+ tabIndex={-1}
>