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} >