@sapudex/web-components 2.54.0 → 2.56.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.54.0",
+  "version": "2.56.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1898,7 +1898,7 @@
               "description": "Allows setting a custom role.",
               "value": {
                 "type": "\"None\" | \"Dialog\" | \"AlertDialog\"",
-                "default": "\"Dialog\""
+                "default": "\"None\""
               }
             },
             {
@@ -2973,7 +2973,7 @@
         },
         {
           "name": "udex-footer",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n---\n\n\n### **Events:**\n - **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **logo-click** - Triggered on click interaction with logo in footer\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n---\n\n\n### **Events:**\n - **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n- **ask-joule-click** - Triggered on click interaction with \"Ask Joule\" link\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **logo-click** - Triggered on click interaction with logo in footer\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
           "doc-url": "",
           "attributes": [
             {
@@ -2986,6 +2986,19 @@
               "description": "Defines an \"about Sap\" column title",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "ask-joule-link",
+              "description": "Defines the Ask Joule link's href",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "ask-joule-position",
+              "description": "Defines the position of the Ask Joule item within the contact section.\nCan be \"start\" (before phone/email/chat) or \"end\" (after phone/email/chat).",
+              "value": {
+                "type": "UDExFooterAskJoulePosition",
+                "default": "\"start\""
+              }
+            },
             {
               "name": "chat-with-us-link",
               "description": "Defines the Chat with us link's href",
@@ -3122,6 +3135,10 @@
               "name": "accordion-item-click",
               "description": "Triggered when the user clicks on an accordion item."
             },
+            {
+              "name": "ask-joule-click",
+              "description": "Triggered on click interaction with \"Ask Joule\" link"
+            },
             {
               "name": "back-to-top-click",
               "description": "Triggered on click interaction with \"Back to Top\" button"
@@ -3175,6 +3192,16 @@
                 "description": "Defines an \"about Sap\" column title",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "ask-joule-link",
+                "description": "Defines the Ask Joule link's href",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "ask-joule-position",
+                "description": "Defines the position of the Ask Joule item within the contact section.\nCan be \"start\" (before phone/email/chat) or \"end\" (after phone/email/chat).",
+                "value": { "type": "UDExFooterAskJoulePosition" }
+              },
               {
                 "name": "chat-with-us-link",
                 "description": "Defines the Chat with us link's href",
@@ -3305,6 +3332,10 @@
                 "name": "accordion-item-click",
                 "description": "Triggered when the user clicks on an accordion item."
               },
+              {
+                "name": "ask-joule-click",
+                "description": "Triggered on click interaction with \"Ask Joule\" link"
+              },
               {
                 "name": "back-to-top-click",
                 "description": "Triggered on click interaction with \"Back to Top\" button"
@@ -7355,7 +7386,7 @@
         },
         {
           "name": "udex-search",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-search</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Search.js\";</code>\n---\n\n\n### **Events:**\n - **dropdown-item-click** - Fired event when the user clicks on the item inside the popover.\n- **handle-value-reset** - Fired event when the user clicks on the reset button.\n- **handle-value-search** - Fired event when the user typed to search field.\n- **prefix-item-click** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **search-keydown** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **submit-search-value** - Fired event when the user submitted the value.\n\n### **Slots:**\n - **default** - Defines the prefix dropdown of the Search component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-search</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Search.js\";</code>\n---\n\n\n### **Events:**\n - **dropdown-item-click** - Fired event when the user clicks on the item inside the popover.\n- **handle-value-reset** - Fired event when the user clicks on the reset button.\n- **handle-value-search** - Fired event when the user typed to search field.\n- **prefix-item-click** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **search-keydown** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **submit-search-value** - Fired event when the user submitted the value.\n- **suggestion-popover-closed** - Fired when the suggestions popover closes.\n- **suggestion-popover-opened** - Fired when the suggestions popover opens.\n\n### **Slots:**\n - **default** - Defines the prefix dropdown of the Search component.",
           "doc-url": "",
           "attributes": [
             {
@@ -7489,6 +7520,14 @@
             {
               "name": "submit-search-value",
               "description": "Fired event when the user submitted the value."
+            },
+            {
+              "name": "suggestion-popover-closed",
+              "description": "Fired when the suggestions popover closes."
+            },
+            {
+              "name": "suggestion-popover-opened",
+              "description": "Fired when the suggestions popover opens."
             }
           ],
           "js": {
@@ -7618,6 +7657,14 @@
               {
                 "name": "submit-search-value",
                 "description": "Fired event when the user submitted the value."
+              },
+              {
+                "name": "suggestion-popover-closed",
+                "description": "Fired when the suggestions popover closes."
+              },
+              {
+                "name": "suggestion-popover-opened",
+                "description": "Fired when the suggestions popover opens."
               }
             ]
           }
@@ -9290,7 +9337,7 @@
             {
               "name": "disabled",
               "description": "Defines if component should have disabled styles.",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "supporting-text",
@@ -9317,7 +9364,7 @@
               {
                 "name": "disabled",
                 "description": "Defines if component should have disabled styles.",
-                "value": { "type": "string" }
+                "value": { "type": "boolean" }
               },
               {
                 "name": "supporting-text",
@@ -11449,9 +11496,57 @@
         },
         {
           "name": "udex-upload-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UploadItem.js\";</code>\n---\n\n\n### **Events:**\n - **request-delete** - Triggered when the upload item is deleted.\n\n### **Slots:**\n - **default** - Slot for information about the uploaded file.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UploadItem.js\";</code>\n---\n\n\n### **Events:**\n - **accordion-icon-click** - Triggered when the user clicks on an accordion item.\n- **first-icon-click** - Fired event when the user click on a first icon.\n- **item-focus** - Fired event when the user focuses on a list item.\n- **item-press** - Fired event when the user click on a list item.\n- **request-delete** - Triggered when the upload item is deleted.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for information about the uploaded file.\n- **firstIcon** - Slot for first icon.\n- **secondIcon** - Slot for second icon.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the item.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "accessible-role",
+              "description": "Defines the role attribute of component",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "additional-text",
+              "description": "Defines the additionalText, displayed at the end of the list item.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "additional-text-state",
+              "description": "Defines the state of the additionalText.",
+              "value": {
+                "type": "\"Information\" | \"Warning\" | \"None\" | \"Success\" | \"Error\"",
+                "default": "\"None\""
+              }
+            },
+            {
+              "name": "collapsed",
+              "description": "Defines if collapsible grouping header is collapsed or expanded",
+              "value": { "type": "boolean", "default": "undefined" }
+            },
+            {
+              "name": "collapsible",
+              "description": "Defines if grouping header can collapse/expand child elements.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "controlled",
+              "description": "Defines the controlled state of the item.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Defines whether <code> list item</code> is in disabled state.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "divider",
+              "description": "Defines whether a visual separator should be rendered after the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "file-link",
               "description": "Defines the link of the uploaded file.",
@@ -11469,6 +11564,114 @@
                 "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
               }
             },
+            {
+              "name": "flag",
+              "description": "Defines the image, displayed at the start of the item.",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "flag-position",
+              "description": "Defines the position for flag image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image",
+              "description": "Allows control over the image source.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-alt",
+              "description": "Allows control over the alternative text of the image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-badge-state",
+              "description": "Defines the image badge state of the component.",
+              "value": {
+                "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "image-shape",
+              "description": "Defines the shape of the image.",
+              "value": {
+                "type": "\"Circle\" | \"Square\"",
+                "default": "\"Circle\""
+              }
+            },
+            {
+              "name": "image-size",
+              "description": "Allows control over the size of the image.",
+              "value": {
+                "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"",
+                "default": "\"S\""
+              }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Defines whether the selection of a  list is displayed as partially selected.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Defines the <code>label</code> for the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "mode",
+              "description": "Defines the mode of the item.",
+              "value": {
+                "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\"",
+                "default": "\"SingleSelect\""
+              }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "selected",
+              "description": "Defines the selected state of the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the item.",
+              "value": {
+                "type": "\"Large\" | \"Standard\"",
+                "default": "\"Standard\""
+              }
+            },
+            {
+              "name": "supporting-text",
+              "description": "Defines the supportingText, displayed in the end of the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the type of the item.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
+            },
             {
               "name": "upload-percentage",
               "description": "Defines the percentage of the upload.",
@@ -11487,16 +11690,85 @@
             {
               "name": "default",
               "description": "Slot for information about the uploaded file."
-            }
+            },
+            { "name": "firstIcon", "description": "Slot for first icon." },
+            { "name": "secondIcon", "description": "Slot for second icon." }
           ],
           "events": [
+            {
+              "name": "accordion-icon-click",
+              "description": "Triggered when the user clicks on an accordion item."
+            },
+            {
+              "name": "first-icon-click",
+              "description": "Fired event when the user click on a first icon."
+            },
+            {
+              "name": "item-focus",
+              "description": "Fired event when the user focuses on a list item."
+            },
+            {
+              "name": "item-press",
+              "description": "Fired event when the user click on a list item."
+            },
             {
               "name": "request-delete",
               "description": "Triggered when the upload item is deleted."
+            },
+            {
+              "name": "second-icon-click",
+              "description": "Fired event when the user click on a second icon."
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "accessible-role",
+                "description": "Defines the role attribute of component",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "additional-text",
+                "description": "Defines the additionalText, displayed at the end of the list item.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "additional-text-state",
+                "description": "Defines the state of the additionalText.",
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"None\" | \"Success\" | \"Error\""
+                }
+              },
+              {
+                "name": "collapsed",
+                "description": "Defines if collapsible grouping header is collapsed or expanded",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "collapsible",
+                "description": "Defines if grouping header can collapse/expand child elements.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "controlled",
+                "description": "Defines the controlled state of the item.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "disabled",
+                "description": "Defines whether <code> list item</code> is in disabled state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "divider",
+                "description": "Defines whether a visual separator should be rendered after the item.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "file-link",
                 "description": "Defines the link of the uploaded file.",
@@ -11514,6 +11786,102 @@
                   "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
                 }
               },
+              {
+                "name": "flag",
+                "description": "Defines the image, displayed at the start of the item.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "flag-position",
+                "description": "Defines the position for flag image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image",
+                "description": "Allows control over the image source.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-alt",
+                "description": "Allows control over the alternative text of the image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-badge-state",
+                "description": "Defines the image badge state of the component.",
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined"
+                }
+              },
+              {
+                "name": "image-shape",
+                "description": "Defines the shape of the image.",
+                "value": { "type": "\"Circle\" | \"Square\"" }
+              },
+              {
+                "name": "image-size",
+                "description": "Allows control over the size of the image.",
+                "value": { "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"" }
+              },
+              {
+                "name": "indeterminate",
+                "description": "Defines whether the selection of a  list is displayed as partially selected.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "label",
+                "description": "Defines the <code>label</code> for the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "mode",
+                "description": "Defines the mode of the item.",
+                "value": {
+                  "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\""
+                }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "selected",
+                "description": "Defines the selected state of the item.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "size",
+                "description": "Defines the size of the item.",
+                "value": { "type": "\"Large\" | \"Standard\"" }
+              },
+              {
+                "name": "supporting-text",
+                "description": "Defines the supportingText, displayed in the end of the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the type of the item.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
+              },
               {
                 "name": "upload-percentage",
                 "description": "Defines the percentage of the upload.",
@@ -11526,9 +11894,29 @@
               }
             ],
             "events": [
+              {
+                "name": "accordion-icon-click",
+                "description": "Triggered when the user clicks on an accordion item."
+              },
+              {
+                "name": "first-icon-click",
+                "description": "Fired event when the user click on a first icon."
+              },
+              {
+                "name": "item-focus",
+                "description": "Fired event when the user focuses on a list item."
+              },
+              {
+                "name": "item-press",
+                "description": "Fired event when the user click on a list item."
+              },
               {
                 "name": "request-delete",
                 "description": "Triggered when the upload item is deleted."
+              },
+              {
+                "name": "second-icon-click",
+                "description": "Fired event when the user click on a second icon."
               }
             ]
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.54.0",
+  "version": "2.56.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/BreadcrumbsTemplate.tsx

@@ -44,16 +44,18 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
                 ) : (
                   <>
                     <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
-                    <UDExLink
-                      onClick={this._onLinkPress}
-                      id={`${linkData._id}-link`}
-                      class={`${rootClass}__item ${this._rootClass}__item--visible`}
-                      href={linkData.href}
-                      target={linkData.target}
-                      accessibleName={linkData._accessibleNameText}
-                      data-ui5-stable={linkData.stableDomRef}>
-                      {linkData.textContent}
-                    </UDExLink>
+                    <span class={`${this._rootClass}__link-wrap`}>
+                      <UDExLink
+                        onClick={this._onLinkPress}
+                        id={`${linkData._id}-link`}
+                        class={`${rootClass}__item ${this._rootClass}__item--visible`}
+                        href={linkData.href}
+                        target={linkData.target}
+                        accessibleName={linkData._accessibleNameText}
+                        data-ui5-stable={linkData.stableDomRef}>
+                        {linkData.textContent}
+                      </UDExLink>
+                    </span>
                   </>
                 )}
               </li>

package/src/CountrySelectorTemplate.tsx

@@ -3,10 +3,10 @@ import type UDExCountrySelector from "./CountrySelector.js";
 export default function CountrySelectorTemplate(this: UDExCountrySelector) {
   if (this.hideFlagImages) { return <></>; }
   return (
-    <img
+    <span
       class="udex-text-field__image"
       aria-label={this.flagAriaLabel}
       style={`background-position-x: ${this.selectedCountryFlagX}; background-position-y: ${this.selectedCountryFlagY}`}>
-    </img>
+    </span>
   );
 }

package/src/FilterMenu.ts

@@ -6,6 +6,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
@@ -296,11 +297,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
     accessibleNameRef!: string;
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
   @property()
-    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.Dialog;
+    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.None;
 
   /**
    * Allows setting a custom role for dropdown trigger.
@@ -414,15 +415,15 @@ class UDExFilterMenu extends UDExSearchableListBase {
 
   handleKeyDownResultBtn(e: KeyboardEvent): void {
     e.stopPropagation();
-    if (isTabNext(e) && !this.hasResetBtn) {
-      this.onDropdownClose();
+    if (isEscape(e) || (isTabNext(e) && !this.hasResetBtn)) {
+      this.onDropdownClose(e);
     }
   }
 
   handleKeyDownResetBtn(e: KeyboardEvent): void {
     e.stopPropagation();
-    if (isTabNext(e)) {
-      this.onDropdownClose();
+    if (isEscape(e) || isTabNext(e)) {
+      this.onDropdownClose(e);
     }
   }
 
@@ -485,7 +486,10 @@ class UDExFilterMenu extends UDExSearchableListBase {
     if (this.modeSingleSelect && !this._search) {
       this.activeItem?.focus();
     }
-    this._handleDropdownScroll();
+    this._expandCollapsedGroupsWithSelection();
+    renderFinished().then(() => {
+      this._handleDropdownScroll();
+    }).catch(() => {});
     this.fireDecoratorEvent("after-open");
   }