@sapudex/web-components 0.117.1 → 0.138.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.117.1",
+  "version": "0.138.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -30,17 +30,17 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.0",
-    "@ui5/webcomponents": "1.24.12",
-    "@ui5/webcomponents-base": "1.24.12",
-    "@ui5/webcomponents-fiori": "1.24.12",
-    "@ui5/webcomponents-icons": "1.24.12",
-    "@ui5/webcomponents-theming": "1.24.12",
+    "@ui5/webcomponents": "1.24.17",
+    "@ui5/webcomponents-base": "1.24.17",
+    "@ui5/webcomponents-fiori": "1.24.17",
+    "@ui5/webcomponents-icons": "1.24.17",
+    "@ui5/webcomponents-theming": "1.24.17",
     "@vimeo/player": "^2.24.0",
-    "video.js": "8.19.2"
+    "video.js": "8.22.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.12",
-    "chromedriver": "^131.0.1",
+    "@ui5/webcomponents-tools": "1.24.17",
+    "chromedriver": "132.0.2",
     "cross-env": "^7.0.3",
     "typescript": "^4.9.4",
     "wdio-chromedriver-service": "^8.1.1",

package/src/Accordion.ts

@@ -28,7 +28,7 @@ import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
  * For the <code>udex-accordion</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Accordion.js";</code>
+ * <code>import "@udex/web-components/dist/Accordion.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/AccordionItem.hbs

@@ -2,15 +2,12 @@
     aria-expanded="{{expanded}}"
     role="listitem"
     @keydown={{keydownHandler}}>
-    <div class="udex-accordion-item__header-wrapper"
-         aria-level="2"
-         role="heading">
+    <div class="udex-accordion-item__header-wrapper">
       <div role="button"
            class="udex-accordion-item__header"
            tabindex="0"
            aria-expanded="false"
            aria-controls="udex-accordion-item__{{_id}}-content"
-           aria-labelledby="{{ariaLabelledby}}"
            @focus={{focusHandler}}
            @click={{itemClickHandler}}>
           <div class="udex-accordion-item__icon-wrapper">

package/src/AccordionItem.ts

@@ -29,7 +29,7 @@ type ToggleAllEvent = {
  * For the <code>udex-accordion-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/AccordionItem.js";</code>
+ * <code>import "@udex/web-components/dist/AccordionItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -62,6 +62,8 @@ class UDExAccordionItem extends UI5Element {
 
   /**
    * Defines the title of the accordion item component.
+   * TODO: With transition to UI5 2.x, change "title" attribute name.
+   * Title property is also valid HTML attribute that results in showing hover tooltip and is read by screen readers.
    *
    * @default ""
    * @public
@@ -167,10 +169,6 @@ class UDExAccordionItem extends UI5Element {
     return classes;
   }
 
-  get ariaLabelledby() {
-    return `${this._id}-header-title`;
-  }
-
   onAfterRendering() {
     this._el = this.shadowRoot?.querySelector(".udex-accordion-item") || null;
     const accordion = this.shadowRoot?.querySelector<HTMLElement>(
@@ -193,6 +191,9 @@ class UDExAccordionItem extends UI5Element {
     }
 
     this?.parentElement?.addEventListener("ui5-toggle-items", this.toggleAllHandler.bind(this));
+    // This should be removed with transition to UI5 2.x, we changed "title" attribute name.
+    // Fix was provided to avoid reading "title" property by screen readers, which results reading title twice.
+    this.setAttribute("aria-hidden", "true");
   }
 }
 

package/src/Avatar.ts

@@ -200,6 +200,26 @@ class UDExAvatar extends UI5Element {
     }
   }
 
+  /**
+   * Returns the effective avatar size.
+   * @default "S"
+   * @private
+   */
+  get effectiveSize(): AvatarSize {
+    // we read the attribute, because the "size" property will always have a default value
+    return this.getAttribute("size") as AvatarSize || this.size;
+  }
+
+  /**
+   * Returns the effective background color.
+   * @default "Blue"
+   * @private
+   */
+  get еffectiveBackgroundColor(): AvatarColorScheme {
+    // we read the attribute, because the "background-color" property will always have a default value
+    return this.getAttribute("color-scheme") as AvatarColorScheme || this.colorScheme;
+  }
+
   get getUI5AvatarColorScheme(): string {
     return udexToUi5ColorSchemeMap[this.colorScheme];
   }
@@ -223,7 +243,10 @@ class UDExAvatar extends UI5Element {
   }
 
   get avatarAccessibleName(): string {
-    return `${this.accessibleName ? this.accessibleName : UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : ""} ${this.showAttentionBadge ? UDExAvatar.i18nBundle.getText(ATTENTION_BADGE) : ""}`;
+    let accName = `${this.accessibleName ? this.accessibleName : `${UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.initials}`}`;
+    accName += ` ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : ""}`;
+    accName += ` ${this.showAttentionBadge ? UDExAvatar.i18nBundle.getText(ATTENTION_BADGE) : ""}`;
+    return accName;
   }
 }
 

package/src/AvatarGroup.ts

@@ -0,0 +1,135 @@
+import AvatarGroup, { IAvatarGroupItem } from "@ui5/webcomponents/dist/AvatarGroup.js";
+import AvatarGroupType from "@ui5/webcomponents/dist/types/AvatarGroupType.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+// Styles
+import UI5AvatarGroupCss from "@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js";
+
+import UDExAvatar, { AvatarColorScheme, AvatarSize } from "./Avatar.js";
+
+const avatarOffsets = {
+  [AvatarSize.XS]: {
+    [AvatarGroupType.Individual]: "0.0625rem",
+    [AvatarGroupType.Group]: "-0.75rem",
+  },
+  [AvatarSize.S]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-1.25rem",
+  },
+  [AvatarSize.M]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-1.625rem",
+  },
+  [AvatarSize.L]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-2rem",
+  },
+  [AvatarSize.XL]: {
+    [AvatarGroupType.Individual]: "0.25rem",
+    [AvatarGroupType.Group]: "-2.75rem",
+  },
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-avatar-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/AvatarGroup.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends AvatarGroup
+ * @public
+ */
+@customElement({
+  tag: "udex-avatar-group",
+  renderer: litRender,
+  styles: [UI5AvatarGroupCss],
+  dependencies: [UDExAvatar],
+})
+
+class UDExAvatarGroup extends AvatarGroup {
+  constructor() {
+    super();
+
+    this._itemNavigation = new ItemNavigation(this, {
+      getItemsCallback: () => {
+        return this._isGroup
+          ? []
+          : this.items.slice(0, this._hiddenStartIndex).map(
+            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
+          );
+      },
+    });
+  }
+  onEnterDOM(): void {
+    super.onEnterDOM();
+    const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
+    container?.addEventListener("mouseenter", this._onHover.bind(this, true));
+    container?.addEventListener("mouseleave", this._onHover.bind(this, false));
+  }
+
+  onExitDOM(): void {
+    super.onExitDOM();
+    const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
+    container?.removeEventListener("mouseenter", this._onHover.bind(this, true));
+    container?.removeEventListener("mouseleave", this._onHover.bind(this, false));
+  }
+
+  _onHover(hover: boolean) {
+    if (this._isGroup) {
+      this.items.every(avatar => {
+        avatar.toggleAttribute("hover", hover);
+        return !avatar.hidden;
+      });
+    }
+  }
+
+  _onfocusin(e: FocusEvent) {
+    const targetItem = this._isGroup
+      ? e.currentTarget
+      : (e.target as HTMLElement).shadowRoot?.firstElementChild;
+    this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);
+  }
+
+  _prepareAvatars() {
+    this._colorIndex = 0;
+    const visibleColors = Object.values(AvatarColorScheme);
+    let avatarInitials = "";
+
+    this.items.forEach((avatar, index) => {
+      if (++this._colorIndex > visibleColors.length - 3) {
+        this._colorIndex = 1;
+      }
+      avatar.interactive = !this._isGroup;
+      avatar.toggleAttribute("ui5-avatar", true);
+      avatarInitials += this._isGroup && avatar.hasAttribute("initials") && !avatar.shadowRoot?.firstElementChild?.hasAttribute("_has-image")
+        ? `${avatar.getAttribute("initials")} ` : "";
+
+      if (!avatar.getAttribute("color-scheme")) {
+        avatar.setAttribute("color-scheme", visibleColors[this._colorIndex]);
+      }
+
+      if (index !== this._itemsCount - 1 || this._customOverflowButton) {
+        avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];
+      }
+    });
+
+    if (avatarInitials) {
+      this.shadowRoot?.querySelector(".ui5-avatar-group-items")?.setAttribute("aria-label", `${avatarInitials}${this._ariaLabelText}`);
+    }
+  }
+}
+
+UDExAvatarGroup.define();
+
+export default UDExAvatarGroup;

package/src/Checkbox.ts

@@ -17,7 +17,7 @@ import CheckboxCss from "./generated/themes/Checkbox.css.js";
  * For the <code>udex-checkbox</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Checkbox.js";</code>
+ * <code>import "@udex/web-components/dist/Checkbox.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/CountrySelector.hbs

@@ -16,47 +16,51 @@
         {{> trigger}}
         {{searchableList}}
     </udex-dropdown>
+    {{#if supportingText}}
+        <udex-status-message
+                ?disabled="{{disabled}}"
+                supporting-text="{{supportingText}}"
+                value-state="{{valueState}}">
+        </udex-status-message>
+    {{/if}}
 </div>
 
 {{#*inline "trigger"}}
     <div
         class="{{countrySelectorTriggerClasses}}"
         ?disabled="{{isOpenerDisabled}}"
-        value="{{selectedCountryName}}"
         slot="trigger">
-            {{#if showFlagImages}}
-                <img
+        {{#if showFlagImages}}
+            <img
                     class="udex-country-selector__image"
                     design="Default"
-                    icon="decline"
-                    tooltip="Reset Button"
-                    aria-label="{{selectedCountryName}}"
+                    aria-label="{{flagAriaLabel}}"
                     style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
-            {{/if}}
+        {{/if}}
             <udex-text-field
-                label="{{label}}"
+                label="{{effectiveAriaLabel}}"
                 id="udexTextField"
                 class="udex-country-selector__text"
-                value-state="Standard"
+                value="{{selectedCountryName}}"
+                value-state="{{valueState}}"
                 direction="left"
                 aria-label="{{effectiveAriaLabel}}"
+                accessible-name="{{supportingText}}"
                 accessible-name-ref="{{accessibleNameRef}}"
                 aria-controls="{{ariaControls}}"
                 role="combobox"
                 aria-haspopup="true"
                 aria-expanded="{{_open}}"
+                ?active="{{_open}}"
                 ?required="{{required}}"
                 ?disabled="{{disabled}}"
                 ?readonly="{{readonly}}"
                 ?displayonly="{{displayonly}}"
                 @click-trigger="{{handleKeyDown}}"
+                @mousedown="{{handleInputMouseDown}}"
+                icon="{{triggerIcon}}"
+                accessible-icon-name="{{effectiveAriaLabel}}"
                 maxlength="0">
             </udex-text-field>
-            {{#unless displayonly}}
-                <ui5-icon
-                    class="udex-country-selector__icon"
-                    name="navigation-down-arrow">
-                </ui5-icon>
-            {{/unless}}
     </div>
 {{/inline}}

package/src/CountrySelector.ts

@@ -8,6 +8,9 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import TextField from "./TextField.js";
+import ValueState from "./types/common.js";
+import StatusMessage from "./StatusMessage.js";
 import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
 import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
 import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
@@ -22,7 +25,6 @@ import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import UDExListItem from "./ListItem.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import TextField from "./TextField.js";
 
 /**
  * @class
@@ -35,7 +37,7 @@ import TextField from "./TextField.js";
  * For the <code>udex-country-selector</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/CountrySelector.js";</code>
+ * <code>import "@udex/web-components/dist/CountrySelector.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -55,6 +57,7 @@ import TextField from "./TextField.js";
     UDExDropdown,
     TextField,
     Button,
+    StatusMessage,
   ],
 })
 
@@ -229,6 +232,24 @@ class CountrySelector extends UDExSearchableListBase {
   @property({ type: String })
     searchPlaceholder!: string;
 
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "Standard"
+   * @public
+   */
+  @property({ type: ValueState, defaultValue: ValueState.Standard })
+    valueState!: `${ValueState}`;
+
+  /**
+   * Defines supporting text under the country selector.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    supportingText!: string;
+
   /**
    *
    * @public
@@ -240,7 +261,7 @@ class CountrySelector extends UDExSearchableListBase {
     _open?: boolean = false;
 
   countryList: Country[] = CountryListDB;
-  selectedCountry!: Country;
+  selectedCountry!: Country | undefined;
 
   _dropdown!: UDExDropdown;
   _search!: Search;
@@ -275,7 +296,7 @@ class CountrySelector extends UDExSearchableListBase {
     }
 
     if (!this.selectedCountry) {
-      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry.toUpperCase()) || this.countryList[0];
+      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry.toUpperCase());
     }
 
     this.prepareCountrySelectorItems();
@@ -338,6 +359,14 @@ class CountrySelector extends UDExSearchableListBase {
     return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName);
   }
 
+  get flagAriaLabel():string {
+    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
+  }
+
+  get triggerIcon(): string {
+    return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+  }
+
   get countrySelectorClasses() {
     const baseClass = "udex-country-selector__dropdown";
     return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
@@ -374,8 +403,8 @@ class CountrySelector extends UDExSearchableListBase {
     return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
   }
 
-  getCountryLabel(countryName: string, localName?: string) {
-    return localName ? `${countryName} (${localName})` : countryName;
+  getCountryLabel(countryName?: string, localName?: string): string | null {
+    return localName ? `${countryName} (${localName})` : countryName || null;
   }
 
   handleCloseSearch() {
@@ -386,7 +415,7 @@ class CountrySelector extends UDExSearchableListBase {
     this.onItemPress(e);
     const target = e.target as HTMLElement;
     const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
-    this.selectedCountry = this.countryList.find(country => country.iso === item._id) || this.countryList[0];
+    this.selectedCountry = this.countryList.find(country => country.iso === item._id);
     this._dropdown.onClose();
   }
 
@@ -411,6 +440,10 @@ class CountrySelector extends UDExSearchableListBase {
     }
   }
 
+  handleInputMouseDown(e: CustomEvent) {
+    e.preventDefault();
+  }
+
   onValueSearch(searchValue: string) {
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
@@ -442,7 +475,7 @@ class CountrySelector extends UDExSearchableListBase {
   prepareCountrySelectorItems(): void {
     this.items.length = 0;
     this.countryList.forEach(country => {
-      const selected = country.iso.toUpperCase() === this.selectedCountry.iso.toUpperCase();
+      const selected = country.iso.toUpperCase() === this.selectedCountry?.iso.toUpperCase();
       this.items.push({
         label: this.getCountryLabel(country.countryName, country.localName),
         innerHTML: this.getItemTemplate(country),
@@ -465,7 +498,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get effectiveAriaLabel(): string {
-    return this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);
+    return this.label || this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);
   }
 }
 

package/src/DatePicker.hbs

@@ -1,30 +1,28 @@
 <div
-    class="udex-date-picker__container"
->
+    class="udex-date-picker__container">
     <udex-text-field
         @click="{{handleInputClick}}"
         @mousedown="{{handleInputMouseDown}}"
         @keydown="{{handleInputKeyDown}}"
         class="udex-date-picker__input udex-date-picker__trigger"
         label="{{label}}"
-        accessible-name="{{accessibleName}}"
+        accessible-name="{{dateAccessibleName}}"
         accessible-name-ref="{{accessibleNameRef}}"
         accessible-icon-name="{{accessibleIconName}}"
-        aria-haspopup="grid"
+        _aria-has-popup="grid"
         ?disabled="{{disabled}}"
         ?required="{{required}}"
         ?readonly="{{readonly}}"
         value="{{value}}"
         icon="appointment-2"
-        tabindex="0"
         value-state="{{valueState}}"
     >
     </udex-text-field>
     {{#if supportingText}}
-      <udex-status-message 
-      ?disabled="{{disabled}}" 
-      supporting-text="{{supportingText}}" 
-      value-state="{{valueState}}">
+      <udex-status-message
+          ?disabled="{{disabled}}"
+          supporting-text="{{supportingText}}"
+          value-state="{{valueState}}">
       </udex-status-message>
     {{/if}}
 </div>

package/src/DatePicker.ts

@@ -10,7 +10,7 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { CALENDAR_ICON } from "./generated/i18n/i18n-defaults.js";
+import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
 // Template
 import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
@@ -223,16 +223,16 @@ class UDExDatePicker extends UI5Element {
 
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
+  static async onDefine(): Promise<void> {
     UDExDatePicker.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  async _getCalendar() {
+  async _getCalendar(): Promise<Calendar> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
     return staticAreaItem!.querySelector<Calendar>("#ui5-calendar")!;
   }
 
-  async _getResponsePopover() {
+  async _getResponsePopover(): Promise<UDExDropdown> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
     return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;
   }
@@ -241,24 +241,24 @@ class UDExDatePicker extends UI5Element {
    * Getter for the interactive element that opens the overflow
    * @private
    */
-  get _dropdownTrigger() {
+  get _dropdownTrigger(): UDExTextField {
     return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__trigger")!;
   }
 
-  _afterDropdownClose() {
+  _afterDropdownClose(): void {
     this._dropdownTrigger.active = false;
     this._dropdownTrigger.shadowRoot?.querySelector("input")?.focus();
   }
 
-  _afterDropdownOpen() {
+  _afterDropdownOpen(): void {
     this._dropdownTrigger.active = true;
   }
 
-  _closeRespPopover() {
+  _closeRespPopover(): void {
     this.responsivePopover && this.responsivePopover.onClose();
   }
 
-  async _openRespPopover() {
+  async _openRespPopover(): Promise<void> {
     this._dropdownTrigger.active = true;
     this.responsivePopover = await this._getResponsePopover();
     this.responsivePopover?.onOpen(this._dropdownTrigger);
@@ -337,9 +337,13 @@ class UDExDatePicker extends UI5Element {
     return [];
   }
 
-  get accessibleIconName() {
+  get accessibleIconName(): string {
     return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);
   }
+
+  get dateAccessibleName(): string {
+    return this.accessibleName || UDExDatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+  }
 }
 
 UDExDatePicker.define();

package/src/Dropdown.hbs

@@ -2,17 +2,23 @@
     {{#if hasTriggerSlot}}
         <div
             class="udex-dropdown__opener"
+            role="{{triggerAccessibleRole}}"
+            aria-label="{{triggerAccessibleName}}"
+            aria-expanded="{{open}}"
             aria-haspopup="true"
-            aria-controls="udex-dropdown"
+            aria-controls="{{this._id}}_udex-dropdown"
+            id="{{this._id}}-trigger"
             @click="{{onTriggerClick}}">
             <slot slot="trigger" name="trigger"></slot>
         </div>
     {{/if}}
     <ui5-popover
-        id="udex-dropdown"
+        id="{{this._id}}_udex-dropdown"
         class="udex-dropdown__pane"
         ?allow-target-overlap="{{disableAllowTargetOverlap}}"
         hide-arrow
+        .open="{{open}}"
+        opener="{{this._id}}-trigger"
         placement-type="{{placementType}}"
         horizontal-align="{{horizontalAlign}}"
         accessible-name="{{accessibleName}}"