fix(collapse): update focus style to align with halo design (#1095)

Refinitiv · Feb 1, 2024 · 447dd18 · 447dd18
1 parent 333c86d
commit 447dd18
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-collapse.less b/packages/elemental-theme/src/custom-elements/ef-collapse.less
@@ -24,6 +24,8 @@
     padding: 0;
     &[focused='visible'] {
       background-color: @button-hover-background-color;
+      outline: 1px solid @input-focused-border-color;
+      outline-offset: -1px;
     }
   }
 

diff --git a/packages/elements/src/accordion/__demo__/index.html b/packages/elements/src/accordion/__demo__/index.html
@@ -10,10 +10,10 @@
         height: 100px;
       }
       ef-checkbox {
-        padding-right: 8px;
+        margin-right: 8px;
       }
       .inner {
-        padding-left: 15px;
+        margin-left: 15px;
       }
     </style>
   </head>

diff --git a/packages/elements/src/collapse/__snapshots__/Collapse.md b/packages/elements/src/collapse/__snapshots__/Collapse.md
@@ -14,6 +14,7 @@
     aria-controls="content"
     aria-expanded="false"
     id="header-label"
+    part="header-label"
     role="button"
     tabindex="0"
   >
@@ -65,6 +66,7 @@
     aria-controls="content"
     aria-expanded="false"
     id="header-label"
+    part="header-label"
     role="button"
     tabindex="0"
   >
@@ -116,6 +118,7 @@
     aria-controls="content"
     aria-expanded="false"
     id="header-label"
+    part="header-label"
     role="button"
     tabindex="0"
   >
@@ -168,6 +171,7 @@
     aria-controls="content"
     aria-expanded="false"
     id="header-label"
+    part="header-label"
     role="button"
     tabindex="0"
   >
@@ -219,6 +223,7 @@
     aria-controls="content"
     aria-expanded="false"
     id="header-label"
+    part="header-label"
     role="button"
     tabindex="0"
   >

diff --git a/packages/elements/src/collapse/index.ts b/packages/elements/src/collapse/index.ts
@@ -220,6 +220,7 @@ export class Collapse extends BasicElement {
       >
         <div
           id="header-label"
+          part="header-label"
           role="button"
           tabindex="0"
           aria-expanded="${this.expanded}"

diff --git a/packages/halo-theme/src/custom-elements/ef-collapse.less b/packages/halo-theme/src/custom-elements/ef-collapse.less
@@ -46,7 +46,7 @@
       }
     }
 
-    // header level 3
+    // header level 4
     &[level='4'] {
       background-color: lighten(@header-level4-bg-color, @dark-modifier);
       & when (@variant = light) {