加载新组件后焦点不会改变 angular

Question

我正在尝试修复 Angular2 网络应用程序中屏幕 reader 的可访问性错误。在 Chrome 中，当加载 componentA（之前的代码）时，焦点是整个浏览器 window 并且屏幕 reader 旁白会宣布 componentA 页面的标题。然而，在 Edge 中，焦点与上一页保持一致，导致标题未公布。目标是无论在哪个浏览器中，标题都应该公布一次，而且只公布一次。

我通过修改 componentA.html（After 下的代码）并在 ngOnInit() 中将焦点设置为 componentA-id 来尝试解决方案。即：

document.getElementById('componentA-id').focus();

现在在Edge中，旁白可以正确地聚焦整个componentA，并宣布componentA的标题。然而在Chrome中，整个window被聚焦，componentA也被聚焦，导致标题被annouce了两次。有什么方法可以禁用 Chrome 焦点，或者有任何其他方法可以解决此问题以实现我的目标吗？

之前： componentA.html

<div>
    <div title="ComponentA Title" role="banner">ComponentA Title</div>        
    ...
    ...
</div>

之后： componentA.html

<div aria-label="ComponentA Title" id="componentA-id" tabindex="-1">
    <div title="ComponentA Title">ComponentA Title</div>        
    ...
    ...
</div>

Answer 1

你们有单页应用吗？你说：

"...the focus stays the same as previous page"

这让我觉得您正在将新内容加载到当前页面，例如单页应用。

如果您正在更新页面标题（这对单页应用程序的屏幕 readers 来说是一件好事），新的页面标题不一定会公布，因为屏幕 reader 不知道你更新了页面的一些内容。如果重新加载页面，将读取标题。

要阅读页面标题，您需要更新 aria-live 设置为 "polite" 的元素。该元素可以在视觉上隐藏，因此只有 reader 屏幕知道它。

<div class="sr-only" aria-live="polite"></div>

（有关 "sr-only" class 的信息，请参阅 What is sr-only in Bootstrap 3?）

更新页面时，将页面标题文本插入

中，使其看起来像：

<div class="sr-only" aria-live="polite">ComponentA Title</div>

屏幕 reader 将阅读新文本，您无需将焦点移到它上面。

加载新组件后焦点不会改变 angular

focus does not change after new component load angular

javascript

accessibility

focus

angular