fix(core/group): fix focus visual and behavior

siemens · Aug 9, 2022 · ecaa4ba · ecaa4ba
1 parent c4db125
commit ecaa4ba
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -443,6 +443,10 @@ export namespace Components {
         "label": string;
     }
     interface CwGroupItem {
+        /**
+          * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise.
+         */
+        "focusable": boolean;
         /**
           * Group item icon
          */
@@ -2077,6 +2081,10 @@ declare namespace LocalJSX {
         "label"?: string;
     }
     interface CwGroupItem {
+        /**
+          * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise.
+         */
+        "focusable"?: boolean;
         /**
           * Group item icon
          */

diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss
@@ -14,9 +14,10 @@
   align-items: center;
   justify-content: space-between;
   padding: $small-space $large-space $small-space 2.5rem;
-  border: var(--theme-primary-bdr-1);
-  border-top-width: 0;
   position: relative;
+  margin-top: 0.0625rem;
+  border: 1px solid var(--theme-group-item--border-color);
+  outline: none;
 
   background-color: var(--theme-group-item--background);
 
@@ -76,4 +77,8 @@
       background-color: var(--theme-color-input-focus);
     }
   }
+
+  @include focus-visible {
+    border-color: var(--focus--border-color) !important;
+  }
 }
diff --git a/packages/core/src/components/group-item/group-item.tsx b/packages/core/src/components/group-item/group-item.tsx
@@ -36,6 +36,12 @@ export class GroupItem {
    */
   @Prop() selected: boolean;
 
+  /**
+   * The elements tabindex attribute will get set accordingly.
+   * If true tabindex will be 0, -1 otherwise.
+   */
+  @Prop() focusable = true;
+
   /**
    * Selection changed
    */
@@ -61,7 +67,7 @@ export class GroupItem {
           'selected': this.selected && !this.suppressSelection,
           'suppress-selection': this.suppressSelection,
         }}
-        tabindex="0"
+        tabindex={this.focusable ? 0 : -1}
       >
         <div class="group-entry-selection-indicator"></div>
         {this.icon ? <cw-icon size="16" name={this.icon}></cw-icon> : null}

diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss
@@ -15,12 +15,6 @@
   position: relative;
   max-width: 19.75rem;
   border-color: var(--theme-group-item--border-color);
-  border-radius: var(--theme-group--border-radius);
-
-  @include focus-visible {
-    border-color: var(--theme-focus--border-color);
-    border-radius: var(--theme-group--border-radius--focus);
-  }
 
   .group-header-context-button {
     display: block;
@@ -44,6 +38,7 @@
     border: var(--theme-std-bdr-1);
     display: flex;
     background-color: var(--theme-group-item--background);
+    border: 1px solid var(--theme-group-item--border-color);
     color: var(--theme-group-header--color);
 
     cursor: pointer;
@@ -57,6 +52,12 @@
       background-color: var(--theme-group-item--background--active);
       border-color: var(--theme-group-item--border-color--active);
     }
+
+    @include focus-visible {
+      border-color: var(--focus--border-color);
+      border-radius: var(--theme-group--border-radius--focus);
+      outline: none;
+    }
   }
 
   .group-header-clickable {
@@ -110,7 +111,7 @@
 
       height: 1.25rem;
       font-size: 0.875rem;
-      color: var(--theme-group-subheader--color)
+      color: var(--theme-group-subheader--color);
     }
   }
 

diff --git a/packages/core/src/components/group/group.tsx b/packages/core/src/components/group/group.tsx
@@ -211,7 +211,7 @@ export class Group {
           <slot></slot>
         </div>
         <div class="d-none">
-          <cw-group-item class="footer last" suppressSelection={true} tabindex="-1">
+          <cw-group-item class="footer last" suppressSelection={true} focusable={false}>
             <slot name="footer"></slot>
           </cw-group-item>
         </div>