Use inset focus ring for flush accordion items

hashicorp · Jun 24, 2024 · e637cb5 · e637cb5
1 parent 400179f
commit e637cb5
Showing 1 changed file with 3 additions and 6 deletions.
diff --git a/packages/components/src/styles/components/accordion.scss b/packages/components/src/styles/components/accordion.scss
@@ -65,6 +65,7 @@
 }
 
 .hds-accordion-item--type-card {
+  --hds-accordion-item-focus-ring-offset: 0;
   background: var(--token-color-surface-primary);
   border-radius: 6px;
 
@@ -84,17 +85,13 @@
 }
 
 .hds-accordion-item--type-flush {
+  --hds-accordion-item-focus-ring-offset: 4px;
   box-shadow: 0 1px 0 0 var(--token-color-border-primary);
 
   &:first-child {
     box-shadow: 0 1px 0 0 var(--token-color-border-primary), 0 -1px 0 0 var(--token-color-border-primary);
   }
 
-  // we need this specificity to override the focus-ring mixin
-  .hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive::before {
-    border-radius: 0;
-  }
-
   &.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle {
     &:hover,
     &.mock-hover {
@@ -141,7 +138,7 @@
 
 // entire toggle area is interactive
 .hds-accordion-item__button--parent-does-not-contain-interactive {
-  @include hds-focus-ring-with-pseudo-element();
+  @include hds-focus-ring-with-pseudo-element($top: var(--hds-accordion-item-focus-ring-offset), $right: var(--hds-accordion-item-focus-ring-offset), $bottom: var(--hds-accordion-item-focus-ring-offset), $left: var(--hds-accordion-item-focus-ring-offset));
 
   position: static;
   display: flex;