Как сделать отображаемый при наведении состояния текст доступным через структуру вкладок?

Question

Я работал над веб-компонентом, который будет скрывать / показывать контент, наведя курсор на <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;
}