Domanda sul focus predefinito dei mixin

Supporto
1

Ciao,

L’ultimo aggiornamento dello stile di focus uniforme include un nuovo mixin che aggiunge un contorno ai campi di input, alle selezioni e ad altri elementi. Questo è ottimo per l’accessibilità, ma noi utilizziamo border-radius: 4px sui campi di input. È possibile sovrascrivere i mixin o aggiungere border-radius: 0 nel file core mixins.scss in modo che generi un passaggio da border-radius: 4px a 0 al momento del focus?

A sinistra si vede com’è ora, a destra dopo l’applicazione di border-radius: 0 :arrow_down:

Screenshot 2021-02-04 at 15.22.25
Screenshot 2021-02-04 at 15.22.25143×131 1.53 KB
Screenshot 2021-02-04 at 15.22.45
Screenshot 2021-02-04 at 15.22.45151×130 1.29 KB

Grazie! :slight_smile:

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

Abbiamo un tema interno con angoli arrotondati per i pulsanti, e non vedo un problema simile al tuo. Potresti fornire un po’ più di contesto, ad esempio uno screenshot più ampio in modo che possa vedere a quale pulsante ti riferisci? Fammi sapere se stai utilizzando un tema pubblico; sono certo che si possa risolvere.

6

Ah, capisco. Penso che la soluzione migliore sia gestire questo nel tuo tema, poiché il core ha già impostato il bordo a 0 per tutti gli elementi di input:

Quindi, nel tuo tema, puoi sovrascrivere il border-radius dell’elemento di input al focus nello stesso punto in cui lo stai attualmente impostando su un valore.

Se desideri mantenere gli angoli arrotondati al focus, potresti anche fare qualcosa del genere:

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

(La proprietà outline non può avere angoli arrotondati, quindi quanto sopra passa all’uso di un’ombra solida per sostituirla.)

7

Grazie mille! :slight_smile: Lo farò. Un’ultima domanda… Non è una cattiva pratica disattivare l’outline? Mi riferisco al motivo legato all’accessibilità.

8

Penso che vada bene, dato che useresti qualcos’altro per stilizzare l’elemento in focus.