单击后按钮保持焦点

Question

我有一个按钮，单击该按钮可导航到另一条路线。相对代码为：

<button (click)="goBack()" mat-button
      aria-label="Previous Screen" role="navigation">
      <mat-icon>keyboard_arrow_left</mat-icon>
</button>

点击处理程序：

  goBack() {
    this.location.back();
  }

当我单击按钮时，路线会更改，但是按钮会获得焦点。那是我做错了吗？

Answer 1

最简单的解决方案是：

button:focus {
  outline: none;
}

但是，从按钮上删除轮廓绝对不利于可访问性。有些用户无法控制鼠标，并且需要能够使用键盘在页面上切换。删除轮廓非常困难。最好防止按钮集中于点击。

我认为，在e.preventDefault()中调用onMouseDown是更干净的解决方案。当然，这是一个易于访问的解决方案（但是该解决方案可能与您的项目不兼容）。

可以找到here的多种干净且可访问的解决方案。

干杯！

Answer 2

您要查看HTMLElement.blur()功能。我对Angular不太熟悉，但是您需要访问该事件及其目标。

类似的事情应该起作用：

<button (click)="goBack($event)" mat-button
      aria-label="Previous Screen" role="navigation">
      <mat-icon>keyboard_arrow_left</mat-icon>
</button>

对于JS：

goBack(event) {
    event.target.blur()
    this.location.back();
  }