如何通过制表结构使悬停状态显示文本可访问？

Question

I've been working on a web component that will hide/reveal content by hovering over a <div> . I've got the functionality working the way I want, but I just realized isn't accessible via tabbing.

I was able to include tabindex="0" role="button" aria-pressed="false" to each of the <div> boxes, which allows you to toggle between each box, but I have no way of revealing the hidden content.

You can find my code here, which demonstrates the issue: https://codepen.io/ckatz/pen/XQaKdB

Is there a markup I'm missing to allow for someone to hit Enter to show the text?

Answer 1

I added this to your CSS and it worked when i press TAB and move from div to 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;
}