@sapudex/web-components 2.30.0 → 2.32.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.30.0",
+  "version": "2.32.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2097,10 +2097,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -2187,9 +2184,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -2281,10 +2276,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -2367,9 +2359,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -2462,10 +2452,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -2555,9 +2542,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -3596,10 +3581,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "height",
@@ -3658,9 +3640,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "height",
@@ -3760,10 +3740,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -3857,9 +3834,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -4018,10 +3993,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -4172,9 +4144,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -4275,10 +4245,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -4372,9 +4339,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -5229,7 +5194,7 @@
         },
         {
           "name": "udex-media-player",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n---\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n\n### **Methods:**\n - **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n---\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n- **videojsReady** - Fires when the VideoJS library is loaded but before the player is created.\nUse this event to register custom VideoJS plugins via\n<code>event.detail.videojs.registerPlugin()</code>.\n\n### **Methods:**\n - **registerPlugin(name: _string_, plugin: _(...args: any[]) => any_): _void_** - Registers a custom VideoJS plugin to be applied before player initialization.\nMust be called before the component renders.\nFor plugins registered after rendering, use the videojsReady event instead.\n- **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
           "doc-url": "",
           "attributes": [
             {
@@ -5334,6 +5299,10 @@
             {
               "name": "video75",
               "description": "Fires when 75% of video is watched"
+            },
+            {
+              "name": "videojsReady",
+              "description": "Fires when the VideoJS library is loaded but before the player is created.\nUse this event to register custom VideoJS plugins via\n<code>event.detail.videojs.registerPlugin()</code>."
             }
           ],
           "js": {
@@ -5433,6 +5402,10 @@
               {
                 "name": "video75",
                 "description": "Fires when 75% of video is watched"
+              },
+              {
+                "name": "videojsReady",
+                "description": "Fires when the VideoJS library is loaded but before the player is created.\nUse this event to register custom VideoJS plugins via\n<code>event.detail.videojs.registerPlugin()</code>."
               }
             ]
           }
@@ -5728,7 +5701,7 @@
               "name": "display",
               "description": "Define display purpose.",
               "value": {
-                "type": "\"desktop\" | \"mobile\"",
+                "type": "\"desktop\" | \"mobile\" | \"auto\"",
                 "default": "\"desktop\""
               }
             },
@@ -5759,7 +5732,7 @@
               {
                 "name": "display",
                 "description": "Define display purpose.",
-                "value": { "type": "\"desktop\" | \"mobile\"" }
+                "value": { "type": "\"desktop\" | \"mobile\" | \"auto\"" }
               },
               {
                 "name": "current-page-index",
@@ -6115,6 +6088,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-promo-tile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n---\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **default** - Defines the text content of the Promo Tile.\n- **pictogram** - Defines the custom pictogram of the Promo Tile.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "background-gradient",
+              "description": "Allows control over setting the CSS gradient.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "orientation",
               "description": "Defines the orientation of the Promo Tile component.",
@@ -6193,6 +6171,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "background-gradient",
+                "description": "Allows control over setting the CSS gradient.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "orientation",
                 "description": "Defines the orientation of the Promo Tile component.",
@@ -6819,7 +6802,7 @@
         },
         {
           "name": "udex-secondary-navigation",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-secondary-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SecondaryNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **heading-click** - The event is triggered on user interaction with a secondary navigation heading\n\n### **Slots:**\n - **breadcrumbs** - Slot for breadcrumbs.\n- **buttons** - Slot for action buttons.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-secondary-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SecondaryNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **heading-click** - The event is triggered on user interaction with a secondary navigation heading\n- **mobile-menu-opener-click** - The event is triggered on user interaction with the mobile menu opener\n\n### **Slots:**\n - **breadcrumbs** - Slot for breadcrumbs.\n- **buttons** - Slot for action buttons.",
           "doc-url": "",
           "attributes": [
             {
@@ -6860,6 +6843,10 @@
             {
               "name": "heading-click",
               "description": "The event is triggered on user interaction with a secondary navigation heading"
+            },
+            {
+              "name": "mobile-menu-opener-click",
+              "description": "The event is triggered on user interaction with the mobile menu opener"
             }
           ],
           "js": {
@@ -6898,6 +6885,10 @@
               {
                 "name": "heading-click",
                 "description": "The event is triggered on user interaction with a secondary navigation heading"
+              },
+              {
+                "name": "mobile-menu-opener-click",
+                "description": "The event is triggered on user interaction with the mobile menu opener"
               }
             ]
           }
@@ -7371,10 +7362,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -7464,9 +7452,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -7567,10 +7553,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -7666,9 +7649,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -7761,10 +7742,7 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": {
-                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
-                "default": "\"None\""
-              }
+              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
             },
             {
               "name": "collapsible",
@@ -7854,9 +7832,7 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": {
-                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
-                }
+                "value": { "type": "\"None\" | \"Icon\"" }
               },
               {
                 "name": "collapsible",
@@ -8539,7 +8515,7 @@
         },
         {
           "name": "udex-tab-navigation",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.\n- **footer** - Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs.",
           "doc-url": "",
           "attributes": [
             {
@@ -8566,6 +8542,26 @@
                 "default": "\"Horizontal\""
               }
             },
+            {
+              "name": "placement",
+              "description": "Defines the placement of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+              "value": { "type": "\"Start\" | \"End\"", "default": "\"Start\"" }
+            },
+            {
+              "name": "vertical-alignment",
+              "description": "Defines the vertical alignment of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+              "value": { "type": "\"Top\" | \"Center\"", "default": "\"Top\"" }
+            },
+            {
+              "name": "auto-play",
+              "description": "Enables automatic tab switching for Vertical orientation.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "auto-play-interval",
+              "description": "Defines the interval in milliseconds between automatic tab switches.\nApplies only when autoPlay is enabled.",
+              "value": { "type": "number", "default": "5000" }
+            },
             {
               "name": "icon-without-background",
               "description": "Defines the background color of the component.",
@@ -8576,6 +8572,10 @@
             {
               "name": "default",
               "description": "Defines the tabs and content."
+            },
+            {
+              "name": "footer",
+              "description": "Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs."
             }
           ],
           "events": [
@@ -8605,6 +8605,26 @@
                 "description": "Defines the orientation of the tab navigation.",
                 "value": { "type": "\"Vertical\" | \"Horizontal\"" }
               },
+              {
+                "name": "placement",
+                "description": "Defines the placement of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+                "value": { "type": "\"Start\" | \"End\"" }
+              },
+              {
+                "name": "vertical-alignment",
+                "description": "Defines the vertical alignment of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+                "value": { "type": "\"Top\" | \"Center\"" }
+              },
+              {
+                "name": "auto-play",
+                "description": "Enables automatic tab switching for Vertical orientation.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "auto-play-interval",
+                "description": "Defines the interval in milliseconds between automatic tab switches.\nApplies only when autoPlay is enabled.",
+                "value": { "type": "number" }
+              },
               {
                 "name": "icon-without-background",
                 "description": "Defines the background color of the component.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.30.0",
+  "version": "2.32.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/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";
@@ -35,6 +33,12 @@ type UDExBreadcrumbsItemClickEventDetail = {
   ctrlKey?: boolean;
   metaKey?: boolean;
   shiftKey?: boolean;
+  source?: UDExBreadcrumbsClickEventSource;
+}
+
+enum UDExBreadcrumbsClickEventSource {
+  Main = "main",
+  Dropdown = "dropdown",
 }
 
 /**
@@ -68,6 +72,7 @@ type UDExBreadcrumbsItemClickEventDetail = {
  * @param { boolean } ctrlKey
  * @param { boolean } metaKey
  * @param { boolean } shiftKey
+ * @param { UDExBreadcrumbsClickEventSource } source The source of the click event
  */
 @event("item-click", { cancelable: true, bubbles: true })
 
@@ -122,7 +127,6 @@ class UDExBreadcrumbs extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _responsivePopover?: UDExDropdown;
-  _itemNavigation?: ItemNavigation;
   _shouldFocusFirstVisibleItem!: boolean;
   _rootClass: string;
 
@@ -137,7 +141,6 @@ class UDExBreadcrumbs extends UI5Element {
 
   onAfterRendering(): void {
     this._responsivePopover = this._getResponsePopover();
-    this._initItemNavigation();
     this._dropdownArrowLink.forcedTabIndex = "0";
     this._handleOutsideClick();
 
@@ -164,15 +167,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");
   }
@@ -186,7 +180,7 @@ class UDExBreadcrumbs extends UI5Element {
       return;
     }
 
-    if (this.fireDecoratorEvent("item-click", { item })) {
+    if (this.fireDecoratorEvent("item-click", { item, source: UDExBreadcrumbsClickEventSource.Dropdown })) {
       window.open(item.href, item.target || "_self", "noopener,noreferrer");
       this._toggleDropdown();
     }
@@ -211,6 +205,7 @@ class UDExBreadcrumbs extends UI5Element {
       ctrlKey,
       metaKey,
       shiftKey,
+      source: UDExBreadcrumbsClickEventSource.Main,
     })) {
       e.preventDefault();
     }
@@ -239,12 +234,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 +245,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/List.ts

@@ -241,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);
@@ -294,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);
@@ -337,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);

package/src/ListGroupHeader.hbs

@@ -125,8 +125,6 @@
 
 {{#*inline "single-group-header"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item">
-        {{#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"
@@ -147,15 +145,13 @@
 
 {{#*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 typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
-        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
+        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"

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"

package/src/ListItemBase.ts

@@ -298,14 +298,6 @@ class UDExListItemBase extends UI5Element {
     return this.modeMultiSelect || this.modeRadioGroup;
   }
 
-  get typeNumber(): boolean {
-    return this.type === UDExListStyleType.Number;
-  }
-
-  get typeCircle(): boolean {
-    return this.type === UDExListStyleType.Circle;
-  }
-
   get typeIcon(): boolean {
     return this.type === UDExListStyleType.Icon;
   }

package/src/MastheadCountrySelector.hbs

@@ -4,6 +4,8 @@
         {{#unless this.isSingleMode}}
             <udex-masthead-menu-item
                 class="udex-masthead-country-selector__region-back-item"
+                accessible-role="button"
+                _accessible-Name="{{backToRegionListAccessibleName}}"
                 @click="{{backToRegions}}"
                 label="{{_activeRegion?.title}}"
                 type="Button"
@@ -48,13 +50,14 @@
         </div>
     {{else}}
         <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
-        <ul class="udex-masthead-country-selector__list" role="menu">
+        <ul class="udex-masthead-country-selector__list">
             {{#each regionsData}}
-                <li role="none">
+                <li>
                     <udex-masthead-menu-item
                         id="{{this._id}}"
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
+                        accessible-role="button"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
                         aria-haspopup="true"
                         type="Button"