Фокусировка и чтение тега заголовка главной страницы при навигации в Angular

Цель: Теги заголовков или основные ориентиры должны быть прочитаны программой чтения с экрана NVDA при переходе с одной страницы на другую.

Наблюдаемое поведение. Теги заголовков не читаются программой чтения с экрана при навигации. Но всякий раз, когда происходит перезагрузка/обновление, средство чтения с экрана читает теги заголовков.

Ожидаемое поведение: после перехода с одной страницы на другую теги заголовков должны быть прочитаны.

<h1 tabindex="-1">
    Some Heading
</h1>

constructor(private router: Router) {
    this.readMainLandMark();
}

readMainLandMark() {
    // console.log(document.getElementsByTagName('h1')[0]); // Results undefined because of HTMLCollection is []
    this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
        const mainHeaders = document.getElementsByTagName('h1');
        if(mainHeaders.length !== 0) {
            mainHeaders[0].focus();
        }
    });
}

Здесь NavigationEnd распознает предыдущий контекст заголовка страницы экземпляра. Таким образом, после повторной загрузки/обновления программа чтения с экрана читает заголовок текущей страницы, считая предыдущую страницу текущей страницей, поэтому после перезагрузки теги заголовка той же страницы считываются. Но не при навигации...

Как выполнить чтение тегов заголовков при переходе с одной страницы на другую?


person Nɪsʜᴀɴᴛʜ ॐ    schedule 08.03.2021    source источник