Mixins default focus question

[Don]

Hello,

The last update uniform focus style has a new mixin which is add an outline the input fields, selections and other… This is a great for accessibility but we use a border-radius: 4px on input fields. Is that possible to override mixins or add a border-radius: 0 into the core mixins.scss and this generate border-radius: 4px to 0 on focus?

On the left it looks like now and right is after border-radius: 0;

Thank you!

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

[pmusaraj (Penar Musaraj)]

We have an internal theme that has rounded corners for buttons, and I don’t see a similar issue as yours. Can you provide maybe a bit more context, i.e. a larger screenshot so I can see which button this is? Let me know if you are using a public theme, I’m sure this is fixable.

[pmusaraj (Penar Musaraj)]

Ah, I see. I think your best bet is to handle this in your theme, because core already has the border set to 0 for all input elements:

https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/base/discourse.scss#L228-L228

So, in your theme, what you can do is override the focused input element’s border-radius in the same place where you are now setting it to a value.

If you want to keep the rounded corners on focus, you could also do something like this:

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

(The outline property cannot have rounded corners, so the above switches to using a solid shadow to replace it.)

[Don]

Thank you so much! I will do this. One more question… Is that not a bad practice if i disable the outline? I mean the accessibility reason.

[pmusaraj (Penar Musaraj)]

I think it’s OK given that you would be using something else to style the element in focus.