Рассказчик зачитывает "Нет предметов в поле зрения" в угловом приложении - PullRequest
Новая
       44

Рассказчик зачитывает "Нет предметов в поле зрения" в угловом приложении

0 голосов
/ 18 декабря 2018

Ранее приложение для угловых приложений работало нормально.

Некоторые изменения сделаны в основных файлах, то есть html-тегах прародителя, теперь Рассказчик считывает для элемента div:

"Нет видимых элементов"

Изменения включают более новую угловую версию от 6 до 7, но это не похоже на причину, поскольку эта проблема произошла за день до обновления.Но могут быть небольшие обновления 6.x из-за обновлений npm.

Приложение должно запускаться в браузере Edge.

Если у вас возникла похожая проблема, поделитесь своими мыслями, заранее спасибо.

1 Ответ

0 голосов
/ 18 декабря 2018

(Отвечая на мой собственный вопрос согласно https://stackoverflow.blog/2011/07/01/its-ok-to-ask-and-answer-your-own-questions/)

Даже когда все в порядке, при тестировании в Chrome вы получите ошибку «Нет элемента в поле зрения».

При тестировании в Edgeбраузер, вы не получите никакой ошибки. (во время прослушивания вашего приложения с помощью Narrator, Ctrl+Win+Enter для запуска / остановки в Win10)

Используйте tabindex & role, в зависимости от того, какой элемент HTML, один изниже может работать: 

<div tabindex="0" role="heading">A</div>
<div tabindex="0" role="textbox">A</div>
<span tabindex="0" role="alert">A</span>
<span tabindex="0" role="heading">A</span>
<p tabindex="0" role="presentation"></p>
<a tabindex="0" role="link">A</a>
<a tabindex="0" xrole="menuitem">A</a>
<ul tabindex="0" role="menu"><li tabindex="0" role="menuitem">A</li></ul>
<header tabindex="0" role="banner">A</header>
<footer tabindex="0" role="contentinfo">A</footer>
NOTE: Above not perfect to the syntax.

Добавить aria-label или attr.aria-label, если текст отличается, одна будет работать для вас: 

<div tabindex="0" role="heading" aria-label="Text2">Text1</div>
    OR
<div tabindex="0" role="heading" attr.aria-label="Text2">Text1</div>

Для Edge все работает нормально.
Для браузера Chrome div / span может не работать, затем измените их на h1, h2, etc и измените внешний вид с помощью css.

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

...