html - 当焦点轮廓被图形元素遮挡时，如何使焦点轮廓可见？

Question

我正在为我的网页设计组合网站设计键盘辅助功能。对于每个元素，我都有一个“设备”(电话、笔记本电脑、显示器)画廊，它们的“屏幕”显示来自各个网站的页面。这些设备是位于可滚动图像之上的 SVG。看起来很棒，效果很好，唯一的问题是在浏览图库时 SVG 会遮挡焦点轮廓。

有没有办法让焦点轮廓始终可见？或者更改焦点轮廓的 z 高度以使其始终位于顶部？或者让它应用于父元素？

设备对象的基本结构是:

<figure class="device">
  <svg class="device__border" role="presentation" style="z-index:20">
  <div class="device__screen" style="overflow-y:scroll; z-index:10">
    <img class="device__screen-content" alt="Screen shot of website" src="...">
  </div>
</figure>

Screen shot of portfolio site

网站正在开发中 http://cocohost.co/portfolio6/

我正在 Mac 上编写此站点的代码。在 Firefox 中，所有焦点轮廓都被 SVG 遮挡。在 Chrome 中，它是完全随机的。有时它们是隐藏的，有时它们不是。我可以向前 Tab 键查看和不查看轮廓，然后 Tab 键返回同一设备，它就会出现。

Answer 1

此处的解决方案是对图形元素应用焦点内样式。例如:

figure:focus-within {
  outline: 1px dotted red;
}