Skip to content

fix(docs): hide component overview search focus outline - #161

Merged
cc-hearts merged 1 commit into
mainfrom
sync/ant-design-x-1987
Aug 4, 2026
Merged

fix(docs): hide component overview search focus outline#161
cc-hearts merged 1 commit into
mainfrom
sync/ant-design-x-1987

Conversation

@cc-hearts

Copy link
Copy Markdown
Member

🤔 本次变更属于 ...

  • 🆕 新功能
  • 🐞 Bug 修复
  • 📝 站点 / 文档改进
  • 📽️ Demo 改进
  • 💄 组件样式改进
  • 🤖 TypeScript 类型定义改进
  • 📦 包体积优化
  • ⚡️ 性能优化
  • ⭐️ 功能增强
  • 🌐 国际化
  • 🛠 重构
  • 🎨 代码风格优化
  • ✅ 测试用例
  • 🔀 分支合并
  • ⏩ 工作流
  • ⌨️ 无障碍改进
  • ❓ 其他(请说明)

🔗 相关 Issue

💡 背景与方案

组件总览页的 borderless 搜索框在聚焦时会显示与页面设计不一致的蓝色 outline。

本次在 .component-overview-search-input 范围内覆盖 wrapper 自身的 :focus-visible,以及内部 input 获得 :focus-visible 的场景。该选择器由组件总览根样式作用域限定,不影响文档站其他输入框。

验证:

  • 键盘与鼠标聚焦时,wrapper 和内部 input 的 computed outline-style 均为 none
  • 搜索、清除与 Affix 状态切换正常
  • vp run docs:build 通过
  • vp test 通过(45 files,442 tests)

📝 变更日志

语言 变更日志
🇺🇸 英文 Hide the focus outline on the Components Overview search input.
🇨🇳 中文 移除组件总览搜索框聚焦时的额外轮廓。

@cc-hearts
cc-hearts merged commit e593252 into main Aug 4, 2026
1 check passed
@cc-hearts

Copy link
Copy Markdown
Member Author

Review:✅ 修复合理,可以合并(附一条 a11y 提示)

选择器与上游 ant-design/x#1987 逐字一致:

"&:focus-visible, &:has(input:focus-visible)": { outline: "none !important" }

两个选择器分别覆盖 Input 外层 wrapper 获焦、内部 input 元素获焦两种情况,符合 issue 的实现范围。规则嵌在 .component-overview-search-input 内部,作用域没有外溢到其他文档站输入框,也没碰全站可访问性样式。

一条非阻塞提示

outline: none 没有提供替代的焦点指示,键盘用户在该搜索框上会失去可见焦点,严格说不满足 WCAG 2.4.7 (Focus Visible)。上游同样如此、issue 也是这么要求的,所以不算本 PR 引入的问题,不阻塞合并。但如果后续想补,建议用 box-shadow 之类不影响布局的方式给一个低调的焦点态,而不是完全去掉。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[sync][P3] docs: 修复组件总览搜索框 focus outline (#1987)

1 participant