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

Question

我一直在开发一个 Web 组件，该组件将通过将鼠标悬停在<div>. 我的功能按我想要的方式工作，但我刚刚意识到无法通过选项卡访问。

我能够包括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;
}