diff --git a/src/theme/components/error-accordion.scss b/src/theme/components/error-accordion.scss
index 31893778e..e99653bf6 100644
--- a/src/theme/components/error-accordion.scss
+++ b/src/theme/components/error-accordion.scss
@@ -9,7 +9,6 @@
     --state-color-hover: rgb(40 40 40, 4%); // --gray-900 4%
     --state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12%
     --state-color-focused: rgb(40 40 40, 12%); // --gray-900 12%
-    --state-color-keyboard-focus: var(--a11y-focus-color);
 
     background: var(--background-color);
     border-radius: var(--mdl-shape-borderRadius-xs);
@@ -89,8 +88,7 @@
         }
 
         &:focus-visible {
-            box-shadow: none;
-            outline: 2px solid var(--state-color-keyboard-focus);
+            @include core-focus-style();
         }
 
         &:active {
diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss
index 5036e4f6c..ae8f6e920 100644
--- a/src/theme/helpers/custom.mixins.scss
+++ b/src/theme/helpers/custom.mixins.scss
@@ -69,8 +69,9 @@
 @mixin core-focus() {
     outline: none;
     position: relative;
+
     &::after {
-        @include position(0, 0, 0, 0);
+        @include position(0px, 0px, 0px, 0px);
         position: absolute;
         content: "";
         opacity: 1;
@@ -83,7 +84,7 @@
     box-shadow: var(--a11y-shadow-focus-boxShadow);
     border-radius: var(--border-radius);
     // Thicker option:
-    // border: var(--a11y-shadow-focus-boxShadowSpread) solid var(--a11y-shadow-focus-boxShadowColor);
+    // outline: var(--a11y-shadow-focus-outline);
 }
 
 @mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) {
diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss
index ae93f8add..ef9a41c88 100644
--- a/src/theme/theme.design-system.scss
+++ b/src/theme/theme.design-system.scss
@@ -142,8 +142,9 @@ html {
 
     // ***** ACCESSIBILITY ***** //
     --a11y-sizing-minTargetSize: 44px;
-    --a11y-shadow-focus-boxShadowSpread: 2px;
-    --a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-boxShadowSpread) 1px var(--a11y-focus-color);
+    --a11y-shadow-focus-borderWidth: 2px;
+    --a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-borderWidth) 1px var(--a11y-focus-color);
+    --a11y-shadow-focus-outline: var(--a11y-shadow-focus-borderWidth) solid var(--a11y-focus-color);
 
     // @TODO ***** VARIABLES TO BE REVIEWED, RENAMED AND TIDIED ***** //
     --text-size: var(--mdl-typography-body-fontSize-md);