为何按下Esc键会使设置tabIndex的元素呈现焦点轮廓？

问题描述 #

有如下HTML元素：

<div tabindex="0">Tabbable due to tabindex.</div>

该元素设置了tabindex="0"，按下Tab键时可获得焦点并显示轮廓，但先点击元素再按下Esc键时，它也会显示轮廓，这一现象该如何解释？

原因解释 #

• 设置tabindex="0"的元素本身属于可聚焦元素，点击它时会主动获取焦点，只是浏览器默认不会为鼠标点击触发的焦点显示轮廓——这是浏览器的行为优化，避免点击操作时出现不必要的视觉干扰。
• 按下Esc键时，浏览器会触发焦点可见性强制恢复的逻辑：对于已经获得过焦点的可聚焦元素，Esc键会让浏览器重新展示焦点轮廓，这是为了保障可访问性，明确告知用户当前哪个元素处于可交互的焦点状态，方便后续用键盘操作。
• 简单来说，Esc键触发了浏览器的焦点提示恢复机制，确保键盘用户能清晰识别焦点位置，哪怕这个焦点最初是通过鼠标点击获得的。

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