Как сделать мой div с атрибутом role="button" кликабельным с помощью клавиши ввода ⇐ Jquery

[Anonymous]

У меня есть приложение, в котором должна быть полностью доступна навигация с помощью клавиатуры. Когда я нажимаю на заголовок div (сгенерированный функцией javascript/jquery), запускается прослушиватель событий. Мне удалось выделить заголовки с помощью tab, добавив атрибуты role="button" и tabindex="0", но это все еще только кликабельны мышкой. Документацию ARIA сложно понять, и у меня осталось мало времени.

HTML

Название первого раздела Это абзац
Название второго раздела
Это тоже абзац

CSS

.item { граница: сплошная черная 2 пикселя; поле: 15 пикселей; отступ: 15 пикселей; } .item-header { нижняя граница: сплошной черный 1 пиксель; цвет фона: светло-серый; отступ: 5 пикселей 0; } Javascript/Jquery:

function handleHeaderClick() { $('#js-item-root').on('click', '.js-item-header', function(event) { событие.preventDefault(); console.log(this.id) } } как заставить консоль.log работать, когда я выделяю заголовок с помощью клавиши tab и нажимаю enter?

//Обновление хода выполнения подробно описано ниже Мне удалось заставить мой код работать правильно, заменив свои на и установив ширину width: 100%. , но я все еще хочу узнать, как сделать элемент div ACT похожим на кнопку. Я попытался создать новую функцию, которая обрабатывала бы 'click' для 'keypress', но это не сработало. Есть ли что-то еще, что мне не хватает?