Questão sobre foco padrão de Mixins

Suporte
1

Olá,

A última atualização do estilo de foco uniforme inclui um novo mixin que adiciona um contorno aos campos de entrada, seleções e outros. Isso é ótimo para acessibilidade, mas usamos border-radius: 4px nos campos de entrada. É possível sobrescrever mixins ou adicionar um border-radius: 0 no core mixins.scss, de modo que o border-radius mude de 4px para 0 ao receber foco?

À esquerda, como está agora; à direita, após aplicar 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

Obrigado! :slight_smile:

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

Temos um tema interno que possui cantos arredondados nos botões e não vejo um problema semelhante ao seu. Poderia fornecer um pouco mais de contexto, ou seja, uma captura de tela maior para que eu possa ver qual é esse botão? Me avise se você está usando um tema público; tenho certeza de que isso é corrigível.

6

Ah, entendi. Acredito que sua melhor opção seja tratar isso no seu tema, pois o núcleo já define a borda como 0 para todos os elementos de entrada:

Portanto, no seu tema, o que você pode fazer é sobrescrever o border-radius do elemento de entrada focado no mesmo local onde você o está definindo atualmente para um valor.

Se quiser manter os cantos arredondados ao focar, você também pode fazer algo como isso:

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

(A propriedade outline não pode ter cantos arredondados, então o exemplo acima alterna para o uso de uma sombra sólida para substituí-la.)

7

Muito obrigado! :slight_smile: Vou fazer isso. Mais uma pergunta… Não seria uma má prática desabilitar o contorno? Quero dizer, pelo motivo de acessibilidade.

8

Eu acho que está OK, já que você estaria usando algo diferente para estilizar o elemento em foco.