Question

更早的角度应用程序运行良好。

在核心文件（即祖父母html标签）中进行了一些更改，现在讲述人读取了div元素：

“视图中没有项目”

更改包括从6到7的较新的Angular版本，但这似乎不是它在升级前一天发生的原因。但是由于npm的更新，可能会有6.x的次要更新。

应用程序需要在Edge浏览器上运行。

如果您遇到类似的问题，请多分享一些想法，谢谢。

Answer 1

（根据https://stackoverflow.blog/2011/07/01/its-ok-to-ask-and-answer-your-own-questions/回答我自己的问题）

即使一切正常，在Chrome中进行测试时，您也会收到“无可见项目”错误。

在Edge浏览器中进行测试时，不会出现任何错误。（在使用“讲述人” 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覆盖外观。

希望能有所帮助。随时更新此答案，使其变得更加完整，其他人将减少浪费的时间。

讲述人在角度应用中读出“视图中没有项目”

1 个答案: