Mixins default focus question

Product Support

AI-generated summary

Mixins Default Focus Question

Don asked about overriding the default focus mixin in Discourse, which adds an outline to input fields, to accommodate a border-radius: 4px style. pmusaraj suggested providing more context and noted that core styles already set border-radius: 0 for input elements.

pmusaraj recommended handling this in the theme by overriding the focused input element’s border-radius or using a solid shadow to replace the outline, as shown in the provided SCSS code. Don asked if disabling the outline is a bad practice for accessibility reasons, and pmusaraj replied that it’s likely okay as long as an alternative styling method is used to indicate focus.

1

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; :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

Thank you! :slight_smile:

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

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.

6

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:

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.)

7

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

8

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