Mixins 默认焦点问题

你好,

上次更新中,统一焦点样式新增了一个 mixin,它为输入框、选择框等添加了轮廓。这对无障碍访问非常有益,但我们在输入框上使用了 border-radius: 4px。请问是否可能覆盖这些 mixin,或者在核心 mixins.scss 中添加 border-radius: 0,从而在焦点状态下将 border-radius 从 4px 变为 0?

左侧是当前的效果,右侧是应用 border-radius: 0 后的效果::arrow_down:

谢谢!:slight_smile:

@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 属性无法实现圆角,因此上述代码改用实心阴影来替代它。)

非常感谢!:slight_smile: 我会照做。还有一个问题……如果我禁用轮廓,这是否是一种不良做法?我是说出于无障碍方面的考虑。

我认为这样没问题,毕竟你会用其他方式来为获得焦点的元素设置样式。