diff --git a/changes/issue-4526-fix-react-tab-styling-bug b/changes/issue-4526-fix-react-tab-styling-bug
new file mode 100644
index 0000000000..da89ed8636
--- /dev/null
+++ b/changes/issue-4526-fix-react-tab-styling-bug
@@ -0,0 +1 @@
+* Bug fix: React tab on-focus styling 
\ No newline at end of file
diff --git a/frontend/components/TabsWrapper/_styles.scss b/frontend/components/TabsWrapper/_styles.scss
index 320e4781d0..7c138bdfb4 100644
--- a/frontend/components/TabsWrapper/_styles.scss
+++ b/frontend/components/TabsWrapper/_styles.scss
@@ -20,6 +20,11 @@
       &:focus {
         box-shadow: none;
         outline: 0;
+
+        &:after {
+          left: 0;
+          bottom: 0;
+        }
       }
       // Bolding text when the button is active causes a layout shift
       // so we add a hidden pseudo element with the same text string