单击后按钮保持焦点

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;
}

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

在我看来，在onMouseDown 中调用e.preventDefault() 是一种更清洁的解决方案。这无疑是一个可访问性友好的解决方案（但该解决方案可能与您的项目不兼容）。

可以在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();
  }