Focus border around elements only with keyboard navigation (not after click on element)

Question

I have following problem with focus in my application. I want to adapt application to wcag focus requirements, and I have problem with some of elements - for example filters - they dont receive border around button.

If focus is on my filter - element receive ui-state-focus class, I added border: 1px dotted red !important; to this class - now border is visible in keyboard tab button navigation, but unfortunately also red border is visible when I click to filter label with mouse - and I dont want this border after mouse click.

Do You know how to hide class ui-state-focus from element after I clicked on my filter to avoid red border on expanded filter?

I use primefaces/jsf and class ui-state-focus is added automatically, but how to show border only during keyboard navigation (and also not show after I clicked on element)?

Answer 1

You don't need to use javascript and add a class.

You can use the CSS :focus selector to style focus.

button:focus {
  border: 1px dotted red;
}

If you want to style the focus only for keyboard users, you can use the CSS :focus-visible selector. The User Agent will determine when display your focus style. He will not display it for mouse users on a button.

button:focus-visible {
  border: 1px dotted red;
}

Have you considered to use outline instead of border ?