style: fix Tabs unexpected focus style#53901
Conversation
|
|
📝 WalkthroughSummary by CodeRabbit
Walkthrough本次变更主要优化了 Tabs 组件卡片样式和常规样式下的聚焦（focus）与轮廓（outline）行为。通过更精确的选择器和伪类，调整了聚焦时的样式表现，避免出现多余的蓝色边框，提升了交互一致性，并进行了部分样式分组和格式微调。 Changes
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🧬 Code Graph Analysis (1)components/tabs/style/index.ts (1)
⏰ Context from checks skipped due to timeout of 90000ms (13)
🔇 Additional comments (4)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
👁 Visual Regression Report for PR #53901 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
WalkthroughThis pull request addresses an issue with the Tabs component where an unexpected focus style was applied. The changes modify the CSS to ensure that the focus style is only applied when the tab button is focus-visible, thereby fixing the issue of residual focus styles after clicking on tabs. Changes
|
|
|
Deploying ant-design with
|
| Latest commit: |
14fb413
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://30d8065c.ant-design.pages.dev |
| Branch Preview URL: | https://style-tabs-unexpected-focus.ant-design.pages.dev |
|
|
||
| [`${componentCls}-tab-focus`]: { | ||
| ...genFocusOutline(token, -3), | ||
| [`${componentCls}-tab-focus:has(${componentCls}-tab-btn:focus-visible)`]: genFocusOutline( |
There was a problem hiding this comment.
The focus style is now correctly applied only when the tab button is focus-visible, which resolves the issue of unexpected focus styles persisting after tab clicks.
There was a problem hiding this comment.
size-limit report 📦
|
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 48 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #53901 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 774 774
Lines 14019 14019
Branches 3712 3712
=========================================
Hits 14019 14019 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes an issue where unexpected focus styles remain on Tabs by refining the focus style rules with updated selectors.
- Updates the focus outline styling to only apply when a tab button is focus-visible.
- Introduces the use of the :has pseudo-class and removes redundant outline rules to improve the focus state styling.
Comments suppressed due to low confidence (2)
components/tabs/style/index.ts:178
- [nitpick] The use of the :has pseudo-class is valid for modern browsers; please confirm that its support aligns with the target browser list or add fallback styles if necessary.
[`${componentCls}-tab-focus:has(${componentCls}-tab-btn:focus-visible)`]: genFocusOutline(token, -3),
components/tabs/style/index.ts:183
- [nitpick] Consider consolidating or adding a comment to explain the explicit removal of the outline here to improve clarity and maintainability in the focus styling logic.
[`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn:focus-visible`]: { outline: 'none', },
There was a problem hiding this comment.
Pull Request Overview
This PR refines the Tabs focus styling by switching to :focus-visible, removing residual outlines on click, and tightening selectors to only show outlines for keyboard navigation.
- Swap general focus selectors for
:focus-visiblevariants - Remove default outlines on tab buttons when clicked
- Adjust CSS rule specificity to prevent unexpected focus rings
|
|
||
| [`${componentCls}-tab-focus`]: { | ||
| ...genFocusOutline(token, -3), | ||
| [`${componentCls}-tab-focus:has(${componentCls}-tab-btn:focus-visible)`]: genFocusOutline( |
There was a problem hiding this comment.
CSS :has() is not fully supported in all browsers (e.g. Firefox). Consider providing a fallback or using an alternative selector so that focus outlines aren’t lost where :has() isn’t available.
| -3, | ||
| ), | ||
|
|
||
| [`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn:focus-visible`]: { |
There was a problem hiding this comment.
[nitpick] The selector & ${componentCls}-tab${componentCls}-tab-focus combines two classes without a clear delimiter. For readability, consider writing it as & .ant-tabs-tab.ant-tabs-tab-focus or splitting into separate rules.
| [`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn:focus-visible`]: { | |
| [`& .${componentCls}-tab.${componentCls}-tab-focus ${componentCls}-tab-btn:focus-visible`]: { |
| [`&${tabCls}-focus ${tabCls}-btn`]: { | ||
| ...genFocusOutline(token), | ||
| }, | ||
| [`&${tabCls}-focus ${tabCls}-btn:focus-visible`]: genFocusOutline(token), |
There was a problem hiding this comment.
[nitpick] Selector formatting is inconsistent: here there’s no space after & when targeting the parent class, unlike other rules. Standardize spacing (e.g. & ${tabCls}-focus) for clarity.
| [`&${tabCls}-focus ${tabCls}-btn:focus-visible`]: genFocusOutline(token), | |
| [`& ${tabCls}-focus ${tabCls}-btn:focus-visible`]: genFocusOutline(token), |
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
Introduced in #52002
💡 Background and Solution
close #52435
close #53599
close #53886
close react-component/tabs#842
📝 Change Log