@@ -255,6 +257,7 @@ exports[`Tabs tabBarGutter should work 2`] = `
class="ant-tabs ant-tabs-left"
>
@@ -387,6 +390,7 @@ exports[`Tabs tabPosition remove card 1`] = `
class="ant-tabs ant-tabs-left"
>
diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts
index 7ad2af0414..0f120de1fa 100644
--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@@ -1,7 +1,7 @@
import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';
-import { genFocusStyle, resetComponent, textEllipsis } from '../../style';
+import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import genMotionStyle from './motion';
@@ -165,9 +165,17 @@ const genCardStyle: GenerateStyle = (token: TabsToken): CSSObject =>
background: token.colorBgContainer,
},
+ [`${componentCls}-tab-focus`]: {
+ ...genFocusOutline(token, -3),
+ },
+
[`${componentCls}-ink-bar`]: {
visibility: 'hidden',
},
+
+ [`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn`]: {
+ outline: 'none',
+ },
},
// ========================== Top & Bottom ==========================
@@ -687,7 +695,6 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => {
'&:focus:not(:focus-visible), &:active': {
color: itemActiveColor,
},
- ...genFocusStyle(token),
},
'&-btn': {
outline: 'none',
@@ -716,6 +723,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => {
'&:hover': {
color: token.colorTextHeading,
},
+ ...genFocusStyle(token),
},
'&:hover': {
color: itemHoverColor,
@@ -726,6 +734,10 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => {
textShadow: token.tabsActiveTextShadow,
},
+ [`&${tabCls}-focus ${tabCls}-btn`]: {
+ ...genFocusOutline(token),
+ },
+
[`&${tabCls}-disabled`]: {
color: token.colorTextDisabled,
cursor: 'not-allowed',
@@ -961,7 +973,7 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject =>
color: itemActiveColor,
},
- ...genFocusStyle(token),
+ ...genFocusStyle(token, -3),
},
},
@@ -992,7 +1004,7 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject =>
},
[`${componentCls}-tabpane`]: {
- outline: 'none',
+ ...genFocusStyle(token),
'&-hidden': {
display: 'none',
},
diff --git a/package.json b/package.json
index 781a47f403..4563bf552a 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
"rc-table": "~7.49.0",
- "rc-tabs": "~15.4.0",
+ "rc-tabs": "~15.5.0",
"rc-textarea": "~1.8.2",
"rc-tooltip": "~6.2.1",
"rc-tree": "~5.10.1",