diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index ccd1658c71..cd2dafdc1d 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -1,6 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSProperties } from 'react'; -import { resetComponent } from '../../style'; +import { genFocusOutline, resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genStepsCustomIconStyle from './custom-icon'; @@ -171,6 +171,7 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): const genStepsItemStyle: GenerateStyle = (token) => { const { componentCls, motionDurationSlow } = token; const stepsItemCls = `${componentCls}-item`; // .ant-steps-item + const stepItemIconCls = `${stepsItemCls}-icon`; return { [stepsItemCls]: { @@ -189,12 +190,18 @@ const genStepsItemStyle: GenerateStyle = (token) => { }, [`${stepsItemCls}-container`]: { outline: 'none', + + [`&:focus-visible`]: { + [stepItemIconCls]: { + ...genFocusOutline(token), + }, + }, }, - [`${stepsItemCls}-icon, ${stepsItemCls}-content`]: { + [`${stepItemIconCls}, ${stepsItemCls}-content`]: { display: 'inline-block', verticalAlign: 'top', }, - [`${stepsItemCls}-icon`]: { + [stepItemIconCls]: { width: token.iconSize, height: token.iconSize, marginTop: 0, diff --git a/package.json b/package.json index a5d3d65722..e28cd897f7 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "rc-segmented": "~2.2.0", "rc-select": "~14.5.0", "rc-slider": "~10.1.0", - "rc-steps": "~6.0.0", + "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.32.1", "rc-tabs": "~12.9.0",