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

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;
}