"Active" state of buttons should not share the same style as "focused"

Created by: felixfbecker

The "active" state for the button group on the search homepage looks like a focus state and always confuses me when I land on the search homepage because it looks like that button is keyboard-focused, but clicking elsewhere doesn't unfocus it.

Looking at the CSS class, it uses active, and active is part of the same selector that applies :focus styles. However, I think that is semantically wrong: The "active" state of a button is a different state than focus, it's a "pressed" state. See for example the active state in Bootstrap button groups and how it is "pressed" (darker) but not the same as "focused" (with an outline).

There is also a clear reason for this: It must still be possible to focus an "active" button with the keyboard as you tab through a button group, which would not be visually detectable if the states were the same.