1

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

enter image description here

mtmx
  • 827
  • 1
  • 10
  • 31
  • https://stackoverflow.com/a/45191208/2702894 - use that until https://caniuse.com/?search=focus-visible is at a higher coverage. – GrahamTheDev Mar 26 '21 at 18:17

1 Answers1

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 ?

Cédric E.
  • 85
  • 1
  • 1
  • 6