こんにちは、
直近のアップデートで導入された統一フォーカススタイルには、入力フィールド、選択項目などにアウトラインを追加する新しいミックスインが含まれています。これはアクセシビリティにとって素晴らしいことですが、入力フィールドには border-radius: 4px を適用しています。ミックスインを上書きすることは可能でしょうか？あるいは、core mixins.scss に border-radius: 0 を追加し、フォーカス時に border-radius を 4px から 0 に変更することは可能でしょうか？
左側が現在の表示、右側が border-radius: 0 を適用した後の表示です：
よろしくお願いいたします！
@mixin default-focus() {
border-color: var(--tertiary);
+ border-radius: 0;
outline: 1px solid var(--tertiary);
outline-offset: 0;
}
当社の内部テーマでは、ボタンの角が丸く設定されていますが、ご報告いただいたような類似の問題は確認できておりません。もう少し詳しい状況をお知らせいただけますでしょうか。例えば、どのボタンか確認できるよう、より広い範囲のスクリーンショットなどをいただけますと幸いです。公開テーマを使用されている場合もお知らせください。必ず解決可能です。
ああ、なるほど。コア部分ですでにすべての入力要素の境界線が 0 に設定されているため、テーマ側で対応するのがベストでしょう：
したがって、テーマ側では、現在値を設定している同じ場所で、フォーカス時の入力要素の border-radius を上書きできます。
フォーカス時に角丸を維持したい場合は、以下のような方法も可能です：
input {
border-radius: 4px;
&:focus {
outline: none;
box-shadow: 0px 0px 0px 1px var(--tertiary);
}
}
（outline プロパティは角丸にできないため、上記のように実体の影を使って代替しています。）
ありがとうございます！ それを実行します。もう一つ質問があるのですが、アウトラインを無効にすることは悪いプラクティスではないでしょうか？アクセシビリティの観点から言うとですが。
焦点にある要素をスタイルするには別のものを使うはずなので、それは 大丈夫だ と思います。
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.