fix(accordion): update focus styles (#14721)

carbon-design-system · Oct 4, 2023 · 3c9f1cc · 3c9f1cc
1 parent bb67d1c
commit 3c9f1cc
Showing 1 changed file with 5 additions and 15 deletions.
diff --git 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