JavaScript中focus的focusVisible选项失效，焦点环无法显示问题

核心原因 #

focusVisible选项的行为和你预期的不一样——它并不是强制浏览器显示焦点环，而是向浏览器传递“此焦点应该被标记为用户可见的焦点”的信号，但最终是否显示焦点环，取决于浏览器的焦点可见性判定逻辑。

现代浏览器（包括最新版Chrome）会根据焦点触发的方式来决定是否显示焦点环：

• 当通过键盘（Tab、箭头键）触发焦点时，会显示焦点环，这是为了满足键盘导航的可访问性需求；
• 当通过JavaScript调用focus()触发程序化焦点时，浏览器默认会判定为“非用户主动触发的焦点”，即使传入focusVisible: true，也不会显示焦点环，除非你手动干预样式。

MDN的示例无法运行，也是因为这个浏览器行为的更新，示例没有考虑到当前浏览器对程序化焦点可见性的严格区分。

解决方案 #

如果你需要在程序化设置焦点时强制显示焦点环，可以通过自定义CSS样式实现：

1. 定义强制显示焦点环的CSS类：

.forced-focus:focus {
  outline: 2px solid #2563eb; /* 匹配Chrome默认的蓝色焦点环 */
  outline-offset: 2px;
}

2. 在调用focus()时添加这个类，并在失去焦点时移除：

const myButton = document.getElementById("myButton");

// 设置焦点并强制显示焦点环
myButton.classList.add("forced-focus");
myButton.focus();

// 失去焦点时移除类，恢复默认行为
myButton.addEventListener("blur", () => {
  myButton.classList.remove("forced-focus");
});

补充说明 #

不要试图通过模拟键盘事件（比如触发Tab键）来显示焦点环，这种方法会破坏页面的可访问性，并且可能导致意外的页面行为。自定义样式是最安全、合规的方案。

内容的提问来源于stack exchange，提问作者snixdad