From 3c9f1cc123baf71883a1f86236e3e38dc44ffab4 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Wed, 4 Oct 2023 09:14:11 -0500
Subject: [PATCH] fix(accordion): update focus styles (#14721)

---
 .../scss/components/accordion/_accordion.scss | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
index 6f564e1c4c44..66ab3a346971 100644
--- a/packages/styles/scss/components/accordion/_accordion.scss
+++ b/packages/styles/scss/components/accordion/_accordion.scss
@@ -82,27 +82,17 @@ $content-padding: 0 0 0 $spacing-05 !default;
     padding-inline-end: layout.density('padding-inline');
     transition: background-color motion(standard, productive) $duration-fast-02;
 
-    &:hover::before,
-    &:focus::before {
-      position: absolute;
-      block-size: calc(100% + 2px);
-      content: '';
-      inline-size: 100%;
-      inset-block-start: -1px;
-      inset-inline-start: 0;
-    }
-
-    &:hover::before {
+    &:hover {
       background-color: $layer-hover;
     }
 
     &:focus {
+      box-shadow: /* Border top */ 0 -1px 0 0 $focus, inset 0 1px 0 0 $focus,
+        /* Border right */ inset 2px 0 0 0 $focus,
+        /* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus,
+        /* Border left */ inset -2px 0 0 0 $focus;
       outline: none;
     }
-
-    &:focus::before {
-      @include focus-outline('outline-compat');
-    }
   }
 
   // Disabled styles