Do not display focus outline when elements are clicked with a mouse, only display it on keyboard tab

After MDL-67874 we notice a lot of elements in the UI get outlined with a think border when clicked and this outline does not match the style of the page at all.

I understand that we should clearly show the focus during tab navigation but I'm sure there are ways to do it so we don't outline the elements on mouse click.

There is an interesting stackoverflow thread on it, I especially like the second rated answer.
https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press