[BpkSwitch] Adjust focus behaviour (#3737)

* fix: adjust focus ring behaviour to only show on keyboard + adjust radius to make it prettier

* chore: adjust css

* chore: adjust CSS to follow other rules

Author: gert-janvercauteren

packages/bpk-component-switch/src/BpkSwitch.module.scss

@@ -29,10 +29,7 @@ $border-width: tokens.$bpk-one-pixel-rem * 2;
   display: flex;
   width: fit-content;
   align-items: center;
-
-  &:focus-within {
-    @include utils.bpk-focus-indicator;
-  }
+  border-radius: $height * 0.5;
 
   // Checkbox is invisible so the switch element can be the visual element.
   &__checkbox {
@@ -50,6 +47,10 @@ $border-width: tokens.$bpk-one-pixel-rem * 2;
         left: ($width - $height) + $border-width;
       }
     }
+
+    &:focus-visible ~ .bpk-switch__switch {
+      @include utils.bpk-focus-indicator;
+    }
   }
 
   // The 'track'.