Angular 8在关闭模式后将焦点返回到触发元素。

Question

为了保证屏幕阅读器的可用性，我需要在关闭模态后将焦点返回到触发模态启动的元素。我有一个模态服务，它有

showModal(type: string, config: ModalConfiguration) {
    setTimeout(()=> {
        this.store.dispatch(new ModalAction.ShowModal({ modalType: type, modalConfig: config }));
    }, 100);
  }

  hideModal() {
    this.store.dispatch(new ModalAction.HideModal());
  }

而在触发器元素上调用的函数是这样的

login() {
    setTimeout(() => {
      this.modalService.showModal(ModalService.LOGIN_MODAL, { ...new ModalConfiguration(), title: "Sign In" });
    }, 200);
  }

我试过在模态服务中设置activeElement，但它将焦点返回到主体。如果有任何帮助，我将不胜感激;)

Answer 1

在模态服务中暴露一个属性。

returnFocusElementId: string;

设置成这样

modalService.returnFocusElementId = '#submitButtonId'; // the id of the element which triggers the modal to open

现在把隐藏模式改成这样。

hideModal() {
    this.store.dispatch(new ModalAction.HideModal());
    let elementToFocus = document.querySelector(this.returnFocusElementId);
    if (elementToFocus != null) {
        elementToFocus.focus();
    } else if (<HTMLElement>document.activeElement != null) {
        (<HTMLElement>document.activeElement).focus();
    }
}