У меня есть простой фрагмент кода, который я пытаюсь сделать доступным с клавиатуры при использовании программы чтения с экрана NVDA.
В частности, у меня есть div с ролью «кнопки», в который вложен другой div с другой ролью «кнопки». У каждого div есть свое событие onkeydown, которое запускается, когда пользователь переходит к этому div и нажимает «ввод».
Эта функциональность клавиатуры работает должным образом, когда у меня не включена программа чтения с экрана NVDA.
Однако, когда у меня включена программа чтения с экрана, вложенное событие нажатия клавиши больше не срабатывает. Вместо этого запускается только родительское событие, даже если вложенное событие имеет фокус.
Однако, если я вручную переведу NVDA из «режима просмотра» в «режим фокусировки» (нажатием клавиши NVDA + пробел), то ключевые события снова будут работать по желанию.
К сожалению, для меня неприемлемо ожидать, что кто-то, использующий NVDA, узнает о ручном переключении в «режим фокусировки». Ему либо необходимо автоматически переключиться в «режим фокусировки», либо он должен работать в «режиме просмотра».
Вот код:
HTML:
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, outerDivAction)"
class="outerDiv">
Outer Div
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, innerDivAction)"
class="innderDiv">
Inner Div</div>
</div>
<div class="result"></div>
JavaScript:
function outerDivAction(event) {
event.stopPropagation();
console.log('outer div');
$('.result').html('<p>outer div!</p>');
}
function innerDivAction(event) {
event.stopPropagation();
console.log('inner div')
$('.result').html('<p>inner div!</p>');
}
function keyEvent(event, callback) {
event.stopPropagation();
if (event.which === 13) {
callback(event);
}
}
$('.outerDiv').click(outerDivAction);
$('.innderDiv').click(innerDivAction);
Вы также можете просмотреть код здесь: http://codepen.io/jennEDVT/pen/Yprova
Любая помощь, которую может предложить любой, будет принята с благодарностью!
p.s. Я знаю, что если я возьму вложенный div и перемещу его так, чтобы он больше не был вложенным, а скорее был братом первого div, тогда все будет работать так, как нужно. К сожалению, это не вариант. Div необходимо вложить.
