在Angular中使用ngIf删除当前焦点的元素时，如何将焦点重置为页面顶部？

问题描述

我正在努力改善Angular应用程序的可访问性。有一个取消按钮，如果按下该按钮将隐藏该按钮并显示带有警告的div和两个按钮（是和否）。如果按no，则警告消失，并且取消按钮再次出现。

我将在下面添加一个小的示例代码片段。实际的代码有点复杂。

 <button *ngIf="!hideCancel" (click)="toggleWarning(true)" </button>

 <div *ngIf="hideCancel">
      <p>Are you sure you want to cancel?</p>
 <button> Yes </button>
 <button (click)="toggleWarning(false)"> No </button>
 </div>


 toggleWarning(flag: boolean) {
    if (flag) {
        document.getElementById('someWarning').innerHTML = 'Are you sure you want to cancel?';
    } else {
         document.getElementById('someWarning').innerHTML = '';
    }
    this.hideCancel= !this.hideCancel;
 }

在使用Tab键并将焦点放在“取消”按钮上时，当用户按Enter键时，“取消”按钮消失，并显示以下警告。然后，当我按Tab键时，Chrome / Firefox会按预期将焦点移到警告下方的“否”按钮。但是在IE中，焦点放在页面顶部。

我不知道为什么会这样。是否是因为当前关注的元素（取消按钮）已从DOM中删除，因此焦点已重设到制表符的顶部？ 请提供有关如何在Internet Explorer中防止这种情况的帮助。

解决方法

有一种解决方法，可以将选项卡焦点保留在下一个元素上。

<button *ngIf="!hideCancel" (click)="toggleWarning(true);yesBtn.focus()">Cancel </button>
<!-- see how yesBtn reference is used to set the focus-->
 <div *ngIf="hideCancel">
      <p>Are you sure you want to cancel?</p>
 <button #yesBtn> Yes </button>
 <button (click)="toggleWarning(false)"> No </button>
 </div> 

检出working example。