From 5e3bcc4a612ace737f2824264752ddddfcfbdbba Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 10 Mar 2022 17:16:07 -0500
Subject: [PATCH] React tab focus bug fix (#4538)

---
 changes/issue-4526-fix-react-tab-styling-bug | 1 +
 frontend/components/TabsWrapper/_styles.scss | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 changes/issue-4526-fix-react-tab-styling-bug

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