Как лучше всего заставить программу чтения с экрана NVDA предупреждать пользователя после нажатия кнопки в Angular?

Question

Имею заявку в Angular. На одном из экранов я могу искать данные, на основании которых они фильтруются. Есть кнопка сброса для очистки фильтров. Я хочу предупредить пользователя в программе чтения с экрана NVDA, что поиск был сброшен после нажатия кнопки сброса.

Я пробовал следующий подход. Но у меня есть проблемы. Пожалуйста, помогите или предложите лучший подход. Я упростил код следующим образом.

<div>
    <a href="javascript:void(0);" aria-label="Reset search" (click)="resetSearch()"> Reset search
    </a>
    <span id="resetAlert">Search has been reset</span>
</div>

Я создаю элемент span с сообщением, которое я хочу, чтобы NVDA прочитала. Но иначе этот элемент не должен обнаруживаться программой чтения с экрана. Поэтому я установил отсутствие отображения.

При нажатии кнопки сброса выполняется следующий метод.

resetSearch() {
    // Making display block so that screen reader can find the element in DOM
    document.getElementById('resetAlert').style.display = 'block';

    // Removing existing attribute 
    document.getElementById('resetAlert').removeAttribute('role');

    // Setting role attribute so that screen reader alerts as "alert Search has been reset" 
    document.getElementById('resetAlert').setAttribute('role', 'alert');

}

Вышеупомянутый logi c работает нормально. Но тогда элемент остается в DOM. Если я прокручиваю страницу с помощью табуляции и клавиш со стрелками, программа чтения с экрана обнаруживает этот элемент и читает его снова. (Я хочу, чтобы он читался только при нажатии кнопки сброса).

Я попытался изменить отображение на нет. Но это не работает.

resetSearch() {
    
    document.getElementById('resetAlert').style.display = 'block';

    
    document.getElementById('resetAlert').removeAttribute('role');

    
    document.getElementById('resetAlert').setAttribute('role', 'alert');


    // This line doesn't work. May be I am missing something. Please help
    document.getElementById('resetAlert').style.display = 'none';

}

Помогите мне переключить этот элемент диапазона при нажатии кнопки, чтобы отобразить блок, и немедленно измените его, чтобы ничего не отображалось, или предложите мне лучший подход для моего варианта использования.

Answer 1

Я нашел решение. Я использовал aria-live для элемента span. Я сохранил цвет элемента span таким же, как цвет фона родительского элемента. Я оставил содержимое элемента span пустым. После нажатия кнопки сброса для содержимого устанавливается то, что я хочу, чтобы программа чтения с экрана прочитала. Затем я удаляю содержимое через 2 секунды, чтобы при прокрутке страницы с помощью вкладки программа чтения с экрана не считывала его снова.

<span aria-live="polite" id="test" class="landing-page__alert"></span>


resetSearch() {
    document.getElementById('resetAlert').innerHTML = 'Search has been reset';

    setTimeout(() => {
       document.getElementById('resetAlert').innerHTML = '';
    }, 2000);
}