Кнопка сохраняет фокус после нажатия

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

Вы хотите посмотреть на функциональность 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();
  }

Answer 2

Самое простое решение будет:

button:focus {
  outline: none;
}

Однако удаление контура с кнопки определенно плохо для доступности. Есть пользователи, которые не могут управлять мышью и должны иметь возможность перемещаться по странице с помощью клавиатуры. Удаление контура делает это очень трудным. Вероятно, лучше не давать кнопке получать фокус при нажатии.

На мой взгляд, звонок e.preventDefault() в onMouseDown - более чистое решение. Это, безусловно, удобное решение (однако решение может быть несовместимо с вашим проектом).

Здесь можно найти несколько чистых и доступных решений здесь .

Ура!