目に見えるフォーカス

あなたはUIの建物のエッジケースの多くを見つける.そして、それらのエッジケースへの解決は、必ずしも明白でありません.
さて、私はちょうど私がすでに答えを知っていたが、忘れたということを見つけました.

何が焦点ですか？

によるとMDN , :focus-visible は、要素が:focus 擬似クラスで、要素上でフォーカスを明示する必要があることを発見します.
人間の話で?ブラウザは:focus Clickイベントまたはキーボードイベントから来て、それに応じてスタイルを適用します.ほとんどの場合、それは:focus Clickイベントからのスタイル.
それはあなたのキーボードユーザーに彼らが望むかもしれない焦点スタイルを与えます/あなたのマウスユーザーのために潜在的に不可解なユーザーエクスペリエンスを持たないで、欲求/欲求.

何が問題でしたか。

私が出くわした問題は、アクセシビリティのためにフォーカススタイルを持つ要素を必要としていたということでした.
さらに明確にするには、ホバーやフォーカスのスタイルは同じです.私はホバーのスタイルをホバーに適用したかったが、私は要素がクリックされた後にリンガーにフォーカススタイルを必要としなかった.

.logo-link:hover,
.logo-link:focus,
.initial-display {
  .logo-text {
    @apply translate-y-0;
  }
  .logo-type {
    @apply opacity-100;
  }
  .logo-tagline {
    @apply opacity-80;
  }
}

あなたは、スタイルにそれほど多くなかったのを見ることができます、しかし、クライアントはこのユーザー経験についてadamantでした.

解決策

この問題に対する答えは長い8文字だけだった!
追加-visible の最後まで:focus 擬似クラスはすべて取った.

.logo-link:hover,
.logo-link:focus-visible,
.initial-display {
  .logo-text {
    @apply translate-y-0;
  }
  .logo-type {
    @apply opacity-100;
  }
  .logo-tagline {
    @apply opacity-80;
  }
}

今、はっきり見える

私は絶対的にクリックしてイベントを使用してJavaScriptを使用して町に行く準備ができて.blur() そして、私がそれを働かせる必要があるので、強い手渡されてください.
私は以前にこの答えを知っていましたが、私は自分自身でこの解決に来なかったと述べました.同僚が提案した:focus-visible そしてすぐに戻ってきた.
私は、この正確な問題に2、3ヵ月に走りました、そして、修正は全く同じことでした!

私は使えますか

つの警告があります:focus-visible , そして、それは完全なブラウザサポートをまだ持っていないということです.
あなたは、以下のイメージでは、それは約70 %のまともな報道を持っているが、それはSafariで0のサポートを持っているので、あなたはすべての基地をカバーし、いくつかで追加することを確認する必要がありますがありますを参照してくださいすることができますpolyfills .