可訪問性 - 在 Angular 中更改路線時會丟失焦點

Question

在組件之間導航焦點正在丟失。我已將焦點強制設置為菜單按鈕，但是一旦路由器導航發生更改，焦點也會丟失。 是否有修復程序可以重置對路線更改的關注？

這些屬性也不起作用（autofocus、setfocus、cdkfocusinitial） ...

Answer 1

我認為自動對焦不起作用參考http://www.angulartutorial.net/2018/03/angular-autofocus-for-input-box-angular.html

Answer 2

這不是一個完全解決的問題，但是有一些更好或更壞的方法來處理它。 我認為您將不得不在渲染新路由的內容后調用focus() ，盡管已經有各種嘗試使這種情況自動發生（正如其他人指出的那樣）並不能真正正常工作。

真正的問題是關注什么。 這可能很容易或具有挑戰性，具體取決於您在頁面頂部的內容。

請務必閱讀這篇關於在單頁應用程序中更改路由時處理焦點的（較長的）文章。 這是迄今為止對該主題的最佳實證研究，並提供了一些可行的建議。

Answer 3

終於得到了解決方案最初模糊元素並為同一元素設置焦點......工作正常!!!!!!!!!

let blurElement: HTMLElement = document.getElementsByClassName('menubutton')[0] as HTMLElement;
blurElement.blur();

setTimeout(function(){
  let focusElement: HTMLElement = document.getElementsByClassName('menubutton')[0] as HTMLElement;
  focusElement.focus();
},0);