Focusスタイルをoutlineにする

[herablog]

背景

Focus styleも角丸にしてるのですが、クロスブラウザ対応のためにちと実装がやや頑張り系になっているので、できればoutline実装にしたいです。

対応

Chrome, Firefox, Edgeでは不自然のない方法(border-radius, outline, outline-offset)で角丸を実現できるのでそちらにしていきたいところです。ただし、Safari先生が対応しておらず、尖ってしまいます。

対応方針としては以下が考えられそうです。

1. やはりSafariの見た目も大事だから、このままにしたい
2. このスタイルはキーボード使いだけなので、Safariの尖りも許容できる
3. ボタンはさすがに不自然だけど、TextLinkなどでは新方式試していいのでは

[herablog]

チーム議論の結果、変えられるものは変えてOKとなりました。例外となるコンポーネントを洗い出します。

例) TextFieldは角丸を維持したい

[herablog]

完了してます。