如何为程序化聚焦的 HTML 链接添加可见焦点样式

Angular 中通过 element.focus() 成功聚焦 <a> 标签后，视觉焦点不可见，本质是浏览器默认未为链接启用高亮焦点样式；只需添加 a:focus CSS 规则（如 outline 或 border），即可确保键盘导航与程序化聚焦均具备清晰、符合无障碍标准的视觉反馈。

Angular 中通过 element.focus() 成功聚焦 <a> 标签后，视觉焦点不可见，本质是浏览器默认未为链接启用高亮焦点样式；只需添加 a:focus CSS 规则（如 outline 或 border），即可确保键盘导航与程序化聚焦均具备清晰、符合无障碍标准的视觉反馈。

在 Angular 应用中，常需在动态内容渲染后（例如通过 [innerHTML] 插入富文本、服务端返回含链接的 HTML）对首个链接进行程序化聚焦——典型场景包括模态框初始化、帮助文档自动定位、或无障碍导航引导。然而，开发者常遇到这样的困惑：调用 document.querySelector('a')?.focus() 返回 true，控制台验证 document.activeElement 确实为该 <a> 元素，但页面上却毫无视觉反馈，Tab 键切换时焦点路径正常，唯独鼠标点击触发的聚焦“隐身”。

这并非 Angular 的 Bug，而是 HTML/CSS 的默认行为：

1. <a href> 元素虽天然可聚焦（tabindex 默认为 0），但多数现代浏览器（Chrome、Firefox、Safari）仅在键盘操作（Tab/Shift+Tab）时显示 outline，而对 JavaScript .focus() 调用默认不渲染焦点环；
2. 更关键的是，若项目全局重置了 outline: none（常见于重置样式或 Material 主题），而未为 a:focus 单独定义替代样式，视觉焦点将彻底消失。

正确解决方案：显式定义 a:focus 样式

最简且合规的做法是为链接添加语义清晰、高对比度的焦点样式。推荐使用 outline（保留原生可访问性语义），而非 border（可能影响布局）：

/* 推荐：使用 outline，兼顾无障碍与布局稳定性 */a:focus {outline: 2px solid #007bff;outline-offset: 2px; /* 避免紧贴文字，提升可读性 */}

若需更精细控制（如仅对特定容器内的链接生效），可结合类名或属性选择器：

/* 仅作用于 innerHTML 渲染区域内的链接 */.some-container a:focus {outline: 3px dashed #28a745;}

注意事项与最佳实践：

1. 避免 outline: none 全局滥用：* :focus { outline: none !important } 会破坏所有可聚焦元素的视觉反馈，违反 WCAG 2.4.7（焦点可见性）要求。应改为针对性覆盖，例如 button:focus, [role="button"]:focus { outline: none; }，再为 <a> 单独定义。
2. 动态内容需确保聚焦时机正确：当链接由 [innerHTML] 渲染时，ngOnInit 中直接调用 focus() 会失败（DOM 尚未更新）。必须等待渲染完成，推荐使用 AfterViewInit + setTimeout(() => ..., 0) 或 Promise.resolve().then(...)，更健壮的方式是监听 MutationObserver 或使用 ChangeDetectorRef.detectChanges() 后再聚焦。
3. 处理 tabindex 潜在干扰：若链接本身设置了 tabindex="-1"（禁用键盘聚焦），.focus() 仍可执行，但屏幕阅读器可能忽略。确保链接具有 tabindex="0" 或原生可聚焦属性（即含 href）。
4. 兼容 Safari 的用户手势限制：iOS/Safari 在非用户直接交互上下文中（如异步回调）可能阻止 focus() 生效。若链接由 API 响应触发，建议在用户点击按钮等手势事件中缓存上下文，并在数据就绪后立即调用 focus()。

? 总结：链接聚焦“不可见”的根本原因不是 JavaScript 失效，而是 CSS 缺失。添加简洁、高对比、符合无障碍规范的 a:focus 样式，是解决该问题最直接、最可靠、也最符合 Web 标准的方式。同时，务必结合渲染生命周期与可访问性原则，确保焦点逻辑在各类设备与交互场景下稳定可用。