如何通过选项卡结构访问悬停状态显示的文本？

Question

我一直在开发一个 Web 组件，通过将鼠标悬停在 <div> 上可以 hide/reveal 显示内容。我的功能按我想要的方式运行，但我刚刚意识到无法通过 Tab 键访问。

我能够将 tabindex="0" role="button" aria-pressed="false" 添加到每个 <div> 框，这允许您在每个框之间切换，但我无法显示隐藏的内容。

你可以在这里找到我的代码，它演示了这个问题： https://codepen.io/ckatz/pen/XQaKdB

我是否缺少允许某人点击 Enter 来显示文本的标记？

Answer 1

我将它添加到您的 CSS，当我按 TAB 键并从 div 移动到 div 时它起作用了：

.color:focus {
    /* Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
    flex-basis: 20em;
}

.color:focus .details {
    opacity: 1;
}