Как сделать мой div с помощью атрибута ROLY = " ⇐ Jquery

[Anonymous]

У меня есть приложение, которое должно быть полностью судоходным на клавиатуре. Когда я нажимаю на заголовок Div (генерируется функцией JavaScript/JQuery), запускается слушатель событий. Я смог выделить заголовки с помощью вкладки , добавив атрибуты rol = " и tabindex =" 0 ", но она все еще только нажатием на Mouse. Документация по Арии довольно трудно следовать, и у меня не так много времени. < /P>
html < /p>

Код: Выделить всё

Title of the First Div
This is a paragraph


Title of the Second Div
This is also a paragraph



< /code>
css < /p>
.item {
border: solid black 2px;
margin: 15px;
padding: 15px;
}

.item-header {
border-bottom: solid black 1px;
background-color: lightgrey;
padding: 5px 0;
}

javascript/jQuery:

Код: Выделить всё

function handleHeaderClick() {
$('#js-item-root').on('click', '.js-item-header', function(event) {
event.preventDefault();

console.log(this.id)
}
}

Как заставить Console.log работать, когда я выделяю заголовок с клавиш и нажимайте Enter ?

Код: Выделить всё

//Progress update detailed below

Я смог правильно работать, обменивая мой s на s и установив ширину на ширину: 100%, но я все еще хочу узнать способ сделать Div Act как кнопку. Я попытался создать новую функцию, которая пила «щелчок» для «keypress» , но это не сработало. Есть что -то еще, что мне не хватает?

Подробнее здесь: https://stackoverflow.com/questions/652 ... -enter-key