Mixins Standardfokus Frage

Hallo,

im letzten Update wurde für den Fokus-Stil eine neue Mixin-Funktion eingeführt, die einen Outline-Rahmen um Eingabefelder, Auswahlen und andere Elemente legt. Das ist großartig für die Barrierefreiheit, aber wir verwenden bei Eingabefeldern border-radius: 4px. Ist es möglich, Mixins zu überschreiben oder border-radius: 0 in die core mixins.scss aufzunehmen, sodass sich der border-radius beim Fokus von 4px auf 0 ändert?

Auf der linken Seite sieht es aktuell so aus, auf der rechten Seite nach der Änderung auf border-radius: 0 :arrow_down:

Vielen Dank! :slight_smile:

@mixin default-focus() {
  border-color: var(--tertiary);
+ border-radius: 0;
  outline: 1px solid var(--tertiary);
  outline-offset: 0;
}

Wir haben ein internes Theme, das abgerundete Ecken für Buttons verwendet, und ich sehe kein ähnliches Problem wie Ihres. Könnten Sie vielleicht etwas mehr Kontext liefern, z. B. einen größeren Screenshot, damit ich erkennen kann, um welchen Button es sich handelt? Lassen Sie mich bitte wissen, ob Sie ein öffentliches Theme verwenden. Ich bin sicher, dass sich das beheben lässt.

Ah, verstehe. Ich denke, deine beste Option ist es, dies in deinem Theme zu handhaben, da der Kern bereits den Rand für alle Eingabeelemente auf 0 gesetzt hat:

Du kannst also in deinem Theme den Border-Radius des fokussierten Eingabeelements an derselben Stelle überschreiben, an der du ihn derzeit auf einen Wert setzt.

Wenn du die abgerundeten Ecken beim Fokussieren beibehalten möchtest, könntest du auch etwas wie Folgendes tun:

input {
  border-radius: 4px;
  &:focus {
    outline: none;
    box-shadow: 0px 0px 0px 1px var(--tertiary);
  }
}

(Die Eigenschaft outline kann keine abgerundeten Ecken haben, daher wechselt das obige Beispiel stattdessen zu einem festen Schatten, um sie zu ersetzen.)

Vielen Dank! :slight_smile: Das werde ich tun. Eine weitere Frage… Ist es nicht eine schlechte Praxis, wenn ich den Fokusrahmen deaktiviere? Ich meine aus Gründen der Barrierefreiheit.

Ich denke, es ist in Ordnung, da Sie etwas anderes verwenden würden, um das fokussierte Element zu stylen.