Use focus-visible pseudo-class for focus states

This improves accessibility and user experience by displaying the focus
borders only when the browser determines it is necessary (such as during
keyboard navigation) while hiding them during mouse clicks.

Author: smfeest

src/Buttercup.Web/styles/buttons.less

@@ -26,7 +26,7 @@
     outline: 0;
   }
 
-  &:focus {
+  &:focus-visible {
     background-color: oklch(
       from var(--push-button-background-color) calc(l - 0.05) c h
     );
@@ -39,7 +39,7 @@
 
     &,
     &:active,
-    &:focus,
+    &:focus-visible,
     &:hover {
       background-color: var(--push-button-background-color);
       border-color: var(--push-button-border-color);

src/Buttercup.Web/styles/input-box.less

@@ -14,7 +14,7 @@
     border-color: var(--color-red);
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: var(--color-blue);
     outline: 0;
   }

src/Buttercup.Web/styles/popover-menu.less

@@ -36,7 +36,7 @@
       outline: 0;
     }
 
-    &:focus {
+    &:focus-visible {
       border-color: var(--color-orange);
       outline: 0;
     }

src/Buttercup.Web/styles/top-bar.less

@@ -116,7 +116,7 @@
   border: var(--top-bar-focus-border-width) solid transparent;
   text-align: center;
 
-  &:focus {
+  &:focus-visible {
     border-color: var(--color-orange);
     outline: 0;
   }