fix(ui): all focus must be blue

src/app/shared/components/button/button.component.scss

@@ -16,7 +16,6 @@ button {
 
   &:focus-visible {
     outline-offset: 2px;
-    outline: 2px solid $blue-focus;
   }
 
   // WIDTH

src/app/shared/components/checkbox-filter/checkbox-filter.component.scss

@@ -22,7 +22,6 @@ button {
   }
   &:focus-visible {
     outline-offset: 2px;
-    outline: 2px solid $blue-focus;
   }
   &.checked {
     border-color: $red;

src/app/shared/components/checkbox/checkbox.component.scss

@@ -48,7 +48,6 @@ input {
 
   &:focus-visible {
     outline-offset: 2px;
-    outline: 2px solid $blue-focus;
   }
 
   &:not(.checked) {

src/app/shared/components/collapsable-filter/collapsable-filter.component.scss

@@ -29,7 +29,6 @@ button {
   }
   &:focus-visible {
     outline-offset: 2px;
-    outline: 2px solid $blue-focus;
   }
   &.expanded {
     background-color: $red;

src/app/shared/components/collapse/collapse-header/collapse-header.component.scss

@@ -28,9 +28,4 @@
       transform: rotate(180deg);
     }
   }
-
-  &:focus-visible {
-    outline-offset: 0;
-    outline: 2px solid $blue-focus;
-  }
 }

src/app/shared/components/input/input.component.scss

@@ -72,8 +72,8 @@
         height: 40px;
       }
 
-      &:focus {
-        border-color: $grey-1;
+      &:focus-visible {
+        outline-offset: 2px;
       }
       &.success {
         border-color: $info-success;

src/app/shared/components/nav-bar/nav-bar.component.scss

@@ -25,7 +25,6 @@ nav {
       justify-content: center;
       flex: 1;
       border-bottom: 3px solid transparent;
-      transition: all 0.3s ease-in-out;
       outline-offset: -2px; // Fixes the focus display issue in Firefox where it was not visible due to "overflow-x" on .navigation
       &.active {
         @include font-bold-16;
@@ -34,9 +33,6 @@ nav {
       &:hover {
         border-color: $grey-4;
       }
-      &:focus {
-        outline-color: $red;
-      }
     }
   }
 }

src/app/shared/components/search-bar/search-bar.component.scss

@@ -19,7 +19,6 @@
 
     &:focus-visible {
       outline-offset: 2px;
-      outline: 2px solid $blue-focus;
     }
 
     &::placeholder {

src/app/shared/components/tag-item/tag-item.component.scss

@@ -97,7 +97,6 @@ button {
 
   &:focus-visible {
     outline-offset: 2px;
-    outline: 2px solid $blue-focus;
   }
 
   &.unclickable {

src/app/shared/components/textarea/textarea.component.scss

@@ -43,9 +43,8 @@
     transition: all 0.3s ease-in-out;
     background: $grey-10;
 
-    &:focus {
-      outline: none;
-      border-color: $grey-1;
+    &:focus-visible {
+      outline-offset: 2px;
     }
 
     &:disabled {

src/styles.scss

@@ -183,13 +183,6 @@ form p.notRequired {
   }
 }
 
-button {
-  &:focus,
-  &:focus-within {
-    outline-color: $red;
-  }
-}
-
 // Layout
 .w-100 {
   width: 100%;
@@ -291,7 +284,7 @@ button {
 }
 
 :focus-visible {
-  outline-color: $red;
+  outline: 2px solid $blue-focus;
 }
 
 .visually-hidden {