diff --git a/app/stylesheets/components/_ic-super-toggle.scss b/app/stylesheets/components/_ic-super-toggle.scss
index 4eefeb7254f..abf9f7e0b9e 100644
--- a/app/stylesheets/components/_ic-super-toggle.scss
+++ b/app/stylesheets/components/_ic-super-toggle.scss
@@ -67,6 +67,19 @@ See Forms section.
       background-color: $toggle-color-switch;
       width: $toggle-width/2; height: $toggle-width/2;
     }
+
+    &::before { // focus outline ring
+      content: "";
+      position: absolute;
+      top: -0.375rem;
+      left: -0.375rem;
+      width: calc(100% + 0.75rem);
+      height: calc(100% + 0.75rem);
+      box-sizing: border-box;
+      border: 1px solid var(--ic-brand-primary);
+      border-radius: $toggle-width/2;
+      opacity: 0;
+    }
   }
 
   .ic-Super-toggle__option--LEFT {
@@ -106,34 +119,14 @@ See Forms section.
   }
 
   @include super-toggle-state ('focus') {
-    .ic-Super-toggle__switch::after { // handle
-      @if $use_high_contrast {
-        box-shadow:
-          inset 0 0 0 3px $ic-link-color,
-          0 0 0 2px $toggle-color-switch,
-          0 3px 6px rgba(black, 0.3);
-      }
-      @else {
-        box-shadow:
-          0 0 0 6px rgba($ic-link-color, 0.4),
-          0 3px 6px rgba(black, 0.3);
-      }
+    .ic-Super-toggle__switch::before { // handle
+      opacity: 1;
     }
   }
 
   @include super-toggle-state ('focus:checked') {
-    .ic-Super-toggle__switch::after { // handle
-      @if $use_high_contrast {
-        box-shadow:
-          inset 0 0 0 3px $ic-link-color,
-          0 0 0 2px $toggle-color-switch,
-          0 3px 6px rgba(black, 0.3);
-      }
-      @else {
-        box-shadow:
-          0 0 0 6px rgba($ic-link-color, 0.4),
-          0 3px 6px rgba(black, 0.3);
-      }
+    .ic-Super-toggle__switch::before { // handle
+      opacity: 1;
     }
   }