@sapudex/web-components 2.29.0 → 2.31.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.29.0",
+  "version": "2.31.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -58,6 +58,7 @@
     "wdio-chromedriver-service": "^8.1.1",
     "webdriverio": "^8.16.12"
   },
+  "types": "./dist",
   "repository": {
     "type": "git",
     "url": "https://github.tools.sap/sapudex/digital-design-system",

package/src/Avatar.ts

@@ -87,10 +87,17 @@ const UDExToUi5ColorSchemeMap = {
  * @public
  */
 @event("click", { bubbles: true })
+/**
+ * Fires when the avatar is clicked.
+ *
+ * @public
+ */
+@event("click-default", { bubbles: true })
 
 class UDExAvatar extends UI5Element {
   eventDetails!: {
     "click": void,
+    "click-default": void,
   };
   /**
    * Defines the displayed initials.
@@ -210,7 +217,9 @@ class UDExAvatar extends UI5Element {
     e.stopPropagation();
     if (this.interactive) {
       this.fireDecoratorEvent("click");
+      return;
     }
+    this.fireDecoratorEvent("click-default");
   }
 
   /**

package/src/Breadcrumbs.ts

@@ -7,8 +7,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isTabNext, isTabPrevious, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
-import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UI5BreadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
@@ -122,7 +120,6 @@ class UDExBreadcrumbs extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _responsivePopover?: UDExDropdown;
-  _itemNavigation?: ItemNavigation;
   _shouldFocusFirstVisibleItem!: boolean;
   _rootClass: string;
 
@@ -137,7 +134,6 @@ class UDExBreadcrumbs extends UI5Element {
 
   onAfterRendering(): void {
     this._responsivePopover = this._getResponsePopover();
-    this._initItemNavigation();
     this._dropdownArrowLink.forcedTabIndex = "0";
     this._handleOutsideClick();
 
@@ -164,15 +160,6 @@ class UDExBreadcrumbs extends UI5Element {
     return items;
   }
 
-  _initItemNavigation(): void {
-    if (!this._itemNavigation) {
-      this._itemNavigation = new ItemNavigation(this, {
-        navigationMode: NavigationMode.Horizontal,
-        getItemsCallback: () => this._getFocusableItems(),
-      });
-    }
-  }
-
   _getItems(): Array<UDExBreadcrumbsItem> {
     return this.getSlottedNodes<UDExBreadcrumbsItem>("items");
   }
@@ -239,12 +226,6 @@ class UDExBreadcrumbs extends UI5Element {
     }
   }
 
-  _onfocusin(e: FocusEvent): void {
-    const currentItem = e.target as UDExLink;
-
-    this._itemNavigation?.setCurrentItem(currentItem);
-  }
-
   _handleKeydown(e: KeyboardEvent): void {
     const itemIndex = (e.target as HTMLElement).getAttribute("data-index");
     const isLastItem = itemIndex === (this.items.length - 2).toString();
@@ -256,7 +237,14 @@ class UDExBreadcrumbs extends UI5Element {
       return;
     }
 
-    if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {
+    if (isTabPrevious(e) && isFirstItem) {
+      e.preventDefault();
+      this._dropdownArrowLink.focus();
+      this._toggleDropdown();
+      return;
+    }
+
+    if (isEscape(e)) {
       this._toggleDropdown();
     }
   }

package/src/BreadcrumbsTemplate.tsx

@@ -12,7 +12,7 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
       <nav
         class={`${this._rootClass} ui5-breadcrumbs-root`}
         aria-label={this._breadcrumbsAccessibleNameText}>
-        <ol onFocusIn={this._onfocusin}>
+        <ol>
           <li class={`${this._rootClass}__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper`}>
             <UDExLink
               id={`udex-${this._id}-breadcrumbs__opener`}

package/src/FilterMenu.ts

@@ -44,6 +44,8 @@ export type initialItemState = {
   id: string,
   selected: boolean,
   indeterminate?: boolean,
+  collapsed?: boolean,
+  _filtered?: boolean,
 }
 
 type UDExFilterMenuResultClickEventDetail = {
@@ -483,6 +485,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
           id: item._id,
           selected: item.selected,
           indeterminate: item.indeterminate,
+          collapsed: item.collapsed,
+          _filtered: item._filtered,
         };
         const subItemsState = (item as UDExListGroupHeaderBase).getItems().map(subItem => ({
           id: subItem._id,

package/src/ImageGridTickerTemplate.tsx

@@ -2,6 +2,7 @@ import type ImageGridTicker from "./ImageGridTicker.js";
 import ImageGridTickerItem from "./ImageGridTickerItem.js";
 import UDExButton from "./Button.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 import playIcon from "@ui5/webcomponents-icons/dist/play.js";
 import pauseIcon from "@ui5/webcomponents-icons/dist/pause.js";
 
@@ -17,7 +18,8 @@ export default function ImageGridTickerTemplate(this: ImageGridTicker) {
           <UDExButton
             class={`${rootClass}__play-button`}
             icon={btnIcon}
-            design={UDExButtonDesign.Invisible}
+            size={UDExButtonSize.Large}
+            design={UDExButtonDesign.Tertiary}
             onClick={this._onPlayButtonClick}
             tooltip={this.playBtnTooltipText}>
           </UDExButton>

package/src/List.ts

@@ -5,7 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import {
-  isUp, isDown, isHome, isEnd,
+  isUp, isDown, isHome, isEnd, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type UDExListItem from "./ListItem.js";
 import type { UDExScrollIntoViewOptions } from "./types/List.js";
@@ -180,7 +180,7 @@ class UDExList extends UI5Element {
   onBeforeRendering(): void {
     this.prepareListItemsMode();
     this._focusHandler.resetMatchingItems();
-    this._focusHandler._focusableListItems = this.getItemsWithoutHeader();
+    this._focusHandler._focusableListItems = this.getKeyboardNavigationItems();
   }
 
   handleItemPress(e: CustomEvent): void {
@@ -192,6 +192,15 @@ class UDExList extends UI5Element {
     if (this.tabNavigationEnabled) {
       return;
     }
+
+    if (isRight(e)) {
+      this.handleArrowRight(e);
+    }
+
+    if (isLeft(e)) {
+      this.handleArrowLeft(e);
+    }
+
     if (isUp(e)) {
       this.handleUpArrow(e);
     }
@@ -209,6 +218,22 @@ class UDExList extends UI5Element {
     }
   }
 
+  handleArrowRight(e: KeyboardEvent): void {
+    const target = e.target as UDExListItemBase;
+    if ((target.tagName === "UDEX-LIST-GROUP-HEADER" || target.tagName === "UDEX-LIST-ITEM") && target.hasAttribute("collapsible")) {
+      target.collapsed = false;
+      this.setCollapsedItems(false, target);
+    }
+  }
+
+  handleArrowLeft(e: KeyboardEvent): void {
+    const target = e.target as UDExListItemBase;
+    if ((target.tagName === "UDEX-LIST-GROUP-HEADER" || target.tagName === "UDEX-LIST-ITEM") && target.hasAttribute("collapsible")) {
+      target.collapsed = true;
+      this.setCollapsedItems(true, target);
+    }
+  }
+
   handleUpArrow(e: KeyboardEvent): void {
     e.preventDefault();
     const items = this.getKeyboardNavigationItems();
@@ -216,7 +241,7 @@ class UDExList extends UI5Element {
     const lastItemIndex = items.length - 1;
     const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
     const isHeaderItem = items[previousSelectIndex].isGroup;
-    const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;
+    const nonInteractiveHeader = items[previousSelectIndex].nonInteractive && !items[previousSelectIndex].collapsible;
 
     if (nonInteractiveHeader && previousSelectIndex === 0) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
@@ -269,7 +294,7 @@ class UDExList extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
     const nextSelectIndex = currentSelectedIndex + 1 > items.length - 1 ? 0 : currentSelectedIndex + 1;
     const isHeaderItem = items[nextSelectIndex].isGroup;
-    const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;
+    const nonInteractiveHeader = items[nextSelectIndex].nonInteractive && !items[nextSelectIndex].collapsible;
 
     if (nonInteractiveHeader) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
@@ -312,7 +337,7 @@ class UDExList extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
     const firstItem = items[0];
     const isHeaderItem = firstItem.isGroup;
-    const nonInteractiveItem = firstItem.nonInteractive;
+    const nonInteractiveItem = firstItem.nonInteractive && !firstItem.collapsible;
 
     if (nonInteractiveItem) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
@@ -401,7 +426,7 @@ class UDExList extends UI5Element {
   }
 
   focusHeader(item: UDExListItemBase): void {
-    const header = item.shadowRoot?.querySelector(".udex-list__group-header") as HTMLElement;
+    const header = item.shadowRoot?.querySelector(".udex-list__group-header-wrap") as HTMLElement;
     header.focus();
   }
 
@@ -425,17 +450,17 @@ class UDExList extends UI5Element {
     return this.getItemsFromList().filter(item => item.selected);
   }
 
-  getCurrentIndex(items: Array<UDExListItemBase>, item: UDExListItemBase): number {
+  getCurrentIndex(items: Array<UDExListItemBase | HTMLElement>, item: UDExListItemBase | HTMLElement): number {
     return items.indexOf(item);
   }
 
-  getItemsWithoutHeader(): Array<UDExListItemBase> {
-    return this.getItemsFromList().filter(item => !item.isGroup);
-  }
-
   getKeyboardNavigationItems(): Array<UDExListItemBase> {
-    const items = this.modeMultiSelect ? this.getItemsFromList() : this.getItemsWithoutHeader();
-    return items.filter(item => !item.disabled);
+    return this.getItemsFromList().filter(item => {
+      const parent = item.parentElement as UDExListItemBase;
+      return !item.disabled
+        && (!item.isGroup || item.modeMultiSelect || item.collapsible)
+        && !(parent?.isGroup && parent.collapsed);
+    });
   }
 
   getItemsFromList(): Array<UDExListItemBase> {
@@ -473,8 +498,9 @@ class UDExList extends UI5Element {
     const isFirstHeaderMultiMode = isFirstHeader && this.modeMultiSelect && !item.nonInteractive;
     const isFirstItemGroupSingleOrRadioMode = isFirstItemInGroupList && modeSingleOrRadio;
     const isFirstItemGroupMultiMode = isFirstItemInGroupList && this.modeMultiSelect && listGroupHeader?.nonInteractive;
+    const isCollapsibleHeader = item.isGroup && item.collapsible;
 
-    if (isFirstHeaderMultiMode || isFirstItemGroupSingleOrRadioMode || isFirstItemGroupMultiMode || isFirstItem) {
+    if (isFirstHeaderMultiMode || isFirstItemGroupSingleOrRadioMode || isFirstItemGroupMultiMode || isFirstItem || isCollapsibleHeader) {
       return "0";
     }
 
@@ -487,6 +513,17 @@ class UDExList extends UI5Element {
     });
   }
 
+  setCollapsedItems(collapsed: boolean, target: UDExListItemBase): void {
+    const items = target.getSlottedNodes<UDExListItemBase>("items");
+    items.forEach(item => {
+      if (collapsed) {
+        item.setAttribute("collapsed", "");
+      } else {
+        item.removeAttribute("collapsed");
+      }
+    });
+  }
+
   get isGroupList(): boolean {
     return this.getItemsFromList().some(item => item.isGroup);
   }

package/src/ListGroupHeader.hbs

@@ -3,36 +3,109 @@
     class="udex-list__group"
     role="group"
     aria-labelledby="group-heading">
-    <div
-        role="listbox"
-        class="udex-list__group-list"
-        name="group"
-        aria-label="group"
-        @ui5-item-press="{{getHandleGroupItemsClick}}">
-        {{#if modeMultiSelectOrRadioGroup}}
-            {{> multi-or-radio-group-header}}
-        {{else}}
-            {{> single-group-header}}
-        {{/if}}
-        <slot></slot>
-    </div>
+    {{#if collapsible}}
+      <div
+          class="udex-list__group-list"
+          name="group"
+          @ui5-item-press="{{getHandleGroupItemsClick}}">
+          {{#if modeMultiSelectOrRadioGroup}}
+              {{> multi-or-radio-group-header-collapsible}}
+          {{else}}
+              {{> single-group-header-collapsible}}
+          {{/if}}
+          <div id="{{ariaControlsId}}" role="region" class="udex-list__group-list__content">
+            <div role="listbox" aria-label="group">
+              <slot></slot>
+            </div>
+          </div>
+      </div>
+    {{else}}
+      <div
+          role="listbox"
+          class="udex-list__group-list"
+          name="group"
+          aria-label="group"
+          @ui5-item-press="{{getHandleGroupItemsClick}}">
+          {{#if modeMultiSelectOrRadioGroup}}
+              {{> multi-or-radio-group-header}}
+          {{else}}
+              {{> single-group-header}}
+          {{/if}}
+          <slot></slot>
+      </div>
+    {{/if}}
 </div>
 
 {{#*inline "multi-or-radio-group-header"}}
     {{#if isNonActiveHeader}}
-        <header id="group-heading" class="udex-list__inactive-header">
+        <header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap">
+          <div class="udex-list__inactive-header-content">
+            <span class="udex-list__header-title">{{label}}</span>
+            {{#if supportingText}}
+                <span class="udex-list__supporting-text">{{supportingText}}</span>
+            {{/if}}
+          </div>
+        </header>
+    {{else}}
+        <udex-list-item
+            id="group-heading"
+            _additional-class-name="{{_additionalClassName}}"
+            ?selected="{{selected}}"
+            _tab-index="{{_effectiveTabIndex}}"
+            ?indeterminate="{{indeterminate}}"
+            ?_filtered="{{_filtered}}"
+            part="group-item"
+            role="none"
+            class="{{className}}"
+            mode="{{mode}}"
+            ?controlled="{{controlled}}"
+            supporting-text="{{supportingText}}"
+            @click="{{handleHeaderPress}}"
+            @keydown="{{handleKeyDownPress}}"
+            type="{{type}}"
+            label="{{label}}"
+            _icon="{{_icon}}"
+            size="{{size}}">
+        </udex-list-item>
+    {{/if}}
+{{/inline}}
+
+{{#*inline "multi-or-radio-group-header-collapsible"}}
+    {{#if isNonActiveHeader}}
+        <header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="{{_effectiveTabIndex}}"
+        aria-expanded="{{expanded}}" aria-controls="{{ariaControlsId}}">
+          <div class="udex-list__inactive-header-content" >
             <span class="udex-list__header-title">{{label}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text ">{{supportingText}}</span>
             {{/if}}
+          </div>
+          <div class="udex-list__group-heading__icon-wrapper">
+              <udex-button
+                size="Small"
+                design="Tertiary"
+                class="udex-list__group-heading__icon"
+                @click="{{handleCollapseIconClick}}"
+                tabindex="-1"
+                accessible-name="{{expandButtonAccessibleName}}"
+                mode="Interactive"
+                icon="slim-arrow-right">
+              </udex-button>
+          </div>
         </header>
     {{else}}
         <udex-list-item
             id="group-heading"
+            aria-expanded="{{expanded}}"
+            aria-controls="{{ariaControlsId}}"
+            accessible-role="button"
             _additional-class-name="{{_additionalClassName}}"
             ?selected="{{selected}}"
             _tab-index="{{_effectiveTabIndex}}"
             ?indeterminate="{{indeterminate}}"
+            collapsible={{collapsible}}
+            ?collapsed={{collapsed}}
+            ?_filtered="{{_filtered}}"
             part="group-item"
             role="none"
             class="{{className}}"
@@ -41,6 +114,7 @@
             supporting-text="{{supportingText}}"
             @click="{{handleHeaderPress}}"
             @keydown="{{handleKeyDownPress}}"
+            @accordion-icon-click="{{handleCollapseIconClick}}"
             type="{{type}}"
             label="{{label}}"
             _icon="{{_icon}}"
@@ -50,9 +124,7 @@
 {{/inline}}
 
 {{#*inline "single-group-header"}}
-    <div class="udex-list__group-content {{sizeClass}}" part="group-item">
-        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
-        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
+    <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item">
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"
@@ -70,3 +142,42 @@
         </div>
     </div>
 {{/inline}}
+
+{{#*inline "single-group-header-collapsible"}}
+    <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item"
+        id="{{this._id}}_group-content__focusable"
+        role="button"
+        tabindex="0"
+        @keydown="{{handleKeyDown}}"
+        _tab-index="{{_effectiveTabIndex}}"
+        aria-expanded="{{expanded}}"
+        aria-controls="{{ariaControlsId}}">
+        {{#if typeIcon}}
+            <ui5-icon
+                class="udex-list__icon"
+                name="{{_icon}}"
+                accessible-role="presentation"
+                aria-hidden="true"
+                part="icon">
+            </ui5-icon>
+        {{/if}}
+        <div class="udex-list__header">
+            <span id="group-heading" class="udex-list__header-title">{{label}}</span>
+            {{#if supportingText}}
+                <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
+            {{/if}}
+        </div>
+        <div class="udex-list__group-heading__icon-wrapper">
+            <udex-button
+              size="Small"
+              design="Tertiary"
+              class="udex-list__group-heading__icon"
+              @click="{{handleCollapseIconClick}}"
+              tabindex="-1"
+              accessible-name="{{expandButtonAccessibleName}}"
+              mode="Interactive"
+              icon="slim-arrow-right">
+            </udex-button>
+        </div>
+    </div>
+{{/inline}}

package/src/ListGroupHeader.ts

@@ -1,12 +1,16 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isEnter, isLeft, isRight, isSpace,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import ListGroupHeaderTemplate from "./generated/templates/ListGroupHeaderTemplate.lit.js";
 import { UDExListItemSize } from "./types/List.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
+import type UDExListItemBase from "./ListItemBase.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -73,6 +77,12 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
     }
   }
 
+  handleKeyDown(e: KeyboardEvent) {
+    if (isRight(e) || isLeft(e)) {
+      this.handleCollapseIconClick(e);
+    }
+  }
+
   fireHeaderPress() {
     this.fireDecoratorEvent("header-press", {
       item: this,
@@ -84,6 +94,26 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
     return hasHandle ? this.handleHeaderState() : undefined;
   }
 
+  setCollapsedItems(): void {
+    const items = this.getSlottedNodes<UDExListItemBase>("items");
+    items.forEach(item => {
+      if (this.collapsed) {
+        item.setAttribute("collapsed", "");
+      } else {
+        item.removeAttribute("collapsed");
+      }
+    });
+  }
+
+  handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.setContentHeight();
+    this.collapsed = !this.collapsed;
+    this.setCollapsedItems();
+    this.fireDecoratorEvent("accordion-icon-click", { collapsed: this.collapsed });
+  }
+
   get sizeClass(): string {
     return this.size === UDExListItemSize.Large ? listGroupLargeClass : "";
   }

package/src/ListGroupHeaderBase.ts

@@ -187,7 +187,7 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
 
   get className(): string {
     const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : "";
-    return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName}`;
+    return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName} ${listGroupHeaderClass}-wrap`;
   }
 
   get listItem(): UDExListItemBase {

package/src/ListItem.hbs

@@ -56,8 +56,6 @@
                  <span class="udex-list__flag" style="background-position: {{flagPosition}}"></span>
             </div>
         {{/if}}
-        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
-        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"
@@ -112,6 +110,21 @@
                     <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
                 {{/if}}
             {{/if}}
+            {{#if collapsible}}
+              <div class="udex-list__group-heading__icon-wrapper">
+                  <udex-button
+                    size="Small"
+                    design="Tertiary"
+                    @mousedown="{{handleCollapseIconMouseDown}}"
+                    @click="{{handleCollapseIconClick}}"
+                    mode="Interactive"
+                    tabindex="-1"
+                    accessible-name="{{expandButtonAccessibleName}}"
+                    class="udex-list__group-heading__icon"
+                    icon="slim-arrow-right">
+                  </udex-button>
+              </div>
+            {{/if}}
         </div>
       <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
       <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>

package/src/ListItem.ts

@@ -277,7 +277,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    if (this.firstIconElement === e.target || this.secondIconElement === e.target) {
+    if (this.firstIconElement === e.target || this.secondIconElement === e.target || (e.target as HTMLElement).classList.contains("udex-list__group-heading__icon")) {
       return;
     }