Читатель экрана объявляет диалог доступное имя дважды при фокусировании кнопки триггера после закрытия диалога ⇐ Javascript

[Anonymous]

Я внедряю модальный диалог с правильной доступностью, но я испытываю проблему, в которой читатели экрана дважды объявляют о доступном имени диалога, когда фокус возвращается к кнопке триггера после закрытия диалога. https://codepen.io/team/hwpdas/pen/dyyvjzr>

var trigger = document.getElementById('trigger');
var dialog = document.getElementById('dialog');
var close = document.getElementById('close');

function openDialog() {
dialog.setAttribute('open', '');
close.focus();
close.addEventListener('keydown', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
});
document.getElementById('cover').style.display = 'block';
document.addEventListener('keydown', addESC);
}

function closeDialog() {
dialog.removeAttribute('open');
trigger.focus();
document.getElementById('cover').style.display = 'none';
document.removeEventListener('keydown', addESC);
}

var addESC = function(e) {
if (e.keyCode == 27) {
closeDialog();
}
};

trigger.addEventListener('click', function() {
openDialog();
});

close.addEventListener('click', function() {
closeDialog();
});

//isplay: none;
//}< /code>
body {
max-width: 700px;
padding: 1.6em;
font-size: 150%;
}

[role="dialog"] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 1em;
max-height: 30vh;
max-width: 50vw;
background: #ddd;
box-shadow: 0.25em 0.25em #aaa;
display: none;
border: 0;
}

[role="dialog"] *+* {
margin-top: 0.5em;
}

#title {
font-weight: bold;
}

button {
cursor: pointer;
background: #215990;
border: 0;
color: #fff;
padding: 0.125em 0.5em;
}

button:focus,
button:hover {
outline: 3px solid #d4aa00;
}

#close {
position: absolute;
top: 0.5em;
right: 0.5em;
margin-top: 0;
line-height: 1;
}

[role="dialog"][open] {
display: block;
}

#cover {
background: green;
opacity: 0.75;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
d< /code>
Open dialog


Title of the dialog
Information provided by the dialog.
×
< /code>
< /div>
< /div>
< /p>
Когда фокус возвращается в кнопку триггера, он должен объявить только один раз. Почему роль диалога вызывает это дубликатное объявление, когда фокус возвращается к кнопке триггера, и какой рекомендуемый способ предотвратить его при поддержании надлежащей доступности или ведет себя правильно?


Подробнее здесь: https://stackoverflow.com/questions/797 ... gger-butto