@sapudex/web-components 2.60.0 → 2.62.0

package/src/SelectBase.ts

@@ -10,11 +10,12 @@ import { cleanLabel } from "./utils/listItemLabelUtils.js";
 import type { UDExListItemBase } from "./List.js";
 import type Popover from "@ui5/webcomponents/dist/Popover.js";
 import type UDExList from "./List.js";
+import type UDExListSelectAll from "./ListSelectAll.js";
 import type UDExSearch from "./Search.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import {
-  COUNTRY_SELECT, STARS, SELECTED, UNSELECTED, INDETERMINATE, DISABLED, EXPANDED, COLLAPSED,
+  COUNTRY_SELECT, STARS, SELECTED, UNSELECTED, INDETERMINATE, EXPANDED,
 } from "./generated/i18n/i18n-defaults.js";
 import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
@@ -178,10 +179,9 @@ class UDExSelectBase extends UDExSearchableListBase {
     _navigating: boolean = false;
 
   /**
-   * Text read by screen readers when the active item changes.
-   * Announced via an aria-live="assertive" region in the template.
-   * This works regardless of shadow DOM / popover teleportation because
-   * the live region lives inside SelectBox's own shadow root.
+   * Supplemental status announced by the polite live region.
+    * Navigation uses native host semantics only. Opening and explicit selection
+    * changes retain feedback without repeating the hierarchy or input token count.
    *
    * @private
    */
@@ -215,6 +215,7 @@ class UDExSelectBase extends UDExSearchableListBase {
   _handleListKeyDownBound: (e: KeyboardEvent) => void;
   _listKeyDownListenerAdded: boolean = false;
   _activeDescendantItem: UDExListItemBase | null = null;
+  _pendingSelectionAnnouncement = "";
 
   constructor() {
     super();
@@ -288,14 +289,14 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   /**
-   * Sets or clears the aria-activedescendant on the combobox input and updates
-   * the aria-live region so JAWS/VoiceOver announce the item name and position.
-   * The live region is the primary announcement mechanism because aria-activedescendant
-   * across a UI5 Popover (which teleports content to document.body) is unreliable —
-   * screen readers cannot follow the ID reference across shadow root boundaries.
+   * Sets or clears the aria-activedescendant on the combobox input.
+    * The referenced host owns its name, hierarchy and state; do not repeat these
+    * in the live region on navigation.
    */
   _setActiveDescendant(item: UDExListItemBase | null, scroll = true): void {
     this._activeDescendantItem = item;
+    this._navigating = !!item;
+    this._liveRegionText = "";
 
     // Query the SelectBox's OWN shadow DOM for all elements bearing the class —
     // this reaches the rendered udex-list-group-header / udex-list-item elements
@@ -308,23 +309,12 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     if (!item) {
       (this._search as HTMLElement).removeAttribute("aria-activedescendant");
-      this._liveRegionText = "";
       return;
     }
 
     item.classList.add("_udex-active-descendant");
     item.setAttribute("_active-descendant", "");
-    (this._search as HTMLElement).setAttribute("aria-activedescendant", item._id);
-
-    // Update the live region with tree-aware position and state so JAWS/VoiceOver
-    // announce the active item regardless of whether the popover is teleported to document.body.
-    if (this._list) {
-      const label = cleanLabel(item.label ?? "");
-      const supporting = item.supportingText ? cleanLabel(item.supportingText) : "";
-      const stateParts = this._itemStateLabels(item);
-      const posText = this._treePositionText(item);
-      this._liveRegionText = [label, supporting, posText, ...stateParts].filter(Boolean).join(", ");
-    }
+    (this._search as HTMLElement).setAttribute("aria-activedescendant", item.id);
 
     if (scroll && this._list?._scrollIntoView) {
       // Only scroll if the item is not already fully visible in the dropdown.
@@ -342,6 +332,42 @@ class UDExSelectBase extends UDExSearchableListBase {
     }
   }
 
+  /** Announce explicit selection after the rendered host has caught up with source changes. @private */
+  _announceSelectionChange(): void {
+    const item = this._activeDescendantItem;
+    this._liveRegionText = "";
+    renderFinished().then(() => {
+      if (this._open && item && this._activeDescendantItem === item) {
+        this._liveRegionText = this._selectionAnnouncement(item);
+      }
+    }).catch(() => {});
+  }
+
+  /** Explicit activation feedback is distinct from native navigation announcements. @private */
+  _selectionAnnouncement(item: Pick<UDExListItemBase, "label" | "supportingText" | "getAttribute" | "selected" | "indeterminate" | "hasRating" | "ratingAriaLabel">): string {
+    // CountrySelector sources are data objects, not DOM elements.
+    const name = item.getAttribute?.("aria-label") || [item.label, item.supportingText, item.getAttribute?.("additional-text"), item.hasRating ? item.ratingAriaLabel : undefined]
+      .filter(Boolean).map(text => cleanLabel(text!)).join(" ");
+    const selectionState = item.selected ? SELECTED : UNSELECTED;
+    const state = translate(UDExSelectBase, item.indeterminate ? INDETERMINATE : selectionState);
+    return [name, state].filter(Boolean).join(", ");
+  }
+
+  /** Close feedback must survive clearing the active descendant. @private */
+  _finishDropdownClose(): void {
+    this._setActiveDescendant(null);
+    this._open = false;
+    this._liveRegionText = this._pendingSelectionAnnouncement;
+    this._pendingSelectionAnnouncement = "";
+    this.fireEventDropdownClose();
+  }
+
+  override handleAccordionIconClick(e: CustomEvent<{ collapsed: boolean }>): void {
+    super.handleAccordionIconClick(e);
+    // The host's aria-expanded owns this feedback; discard stale selection status.
+    this._liveRegionText = "";
+  }
+
   /**
    * Activates the first navigable item as the aria-activedescendant without moving DOM focus.
    */
@@ -359,7 +385,7 @@ class UDExSelectBase extends UDExSearchableListBase {
    * restores focus to it; when nothing is selected (or in other modes) the first navigable
    * item is activated instead.
    */
-  _activateSelectedOrFirstItem(): void {
+  _activateSelectedOrFirstItem(): UDExListItemBase | undefined {
     const items = this._list?.getKeyboardNavigationItems();
     if (!items?.length) {
       return;
@@ -376,6 +402,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (this.showImageFlags) {
       this.handleImagePosition(items, targetIndex);
     }
+    return items[targetIndex];
   }
 
   /**
@@ -542,8 +569,14 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     if (this.modeSingleSelect) {
       // SingleSelect closes the dropdown — clear active descendant.
+      const selectedItem = this.getItemFromList(this.getDataTokenId(item));
+      if (selectedItem) {
+        this._pendingSelectionAnnouncement = this._selectionAnnouncement(selectedItem);
+      }
       this._setActiveDescendant(null);
-      this._search.focus();
+      if (this.shadowRoot?.activeElement !== this._search) {
+        this._search.focus();
+      }
       this.closeDropdown();
       return;
     }
@@ -564,12 +597,10 @@ class UDExSelectBase extends UDExSearchableListBase {
     // Return DOM focus to the input so the clicked item loses its :focus ring.
     // Without this, the browser keeps focus on the item (from the click) and a
     // second ring appears when arrow keys move _activeDescendantItem elsewhere.
-    (this._search as HTMLElement).focus();
-
-    // Re-announce with the updated checked/unchecked state. The rendered item's
-    // `selected` prop is updated on the next render cycle (template re-render),
-    // so we wait for it before re-reading state labels.
-    renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => {});
+    if (this.shadowRoot?.activeElement !== this._search) {
+      (this._search as HTMLElement).focus();
+    }
+    this._announceSelectionChange();
   }
 
   onKeyDownSearch(e: KeyboardEvent) {
@@ -620,8 +651,9 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     if (isDownAndPopoverClosed) {
       e.preventDefault();
+      // Opening establishes the active descendant and its visual highlight;
+      // DOM focus remains on the input for the combobox interaction pattern.
       this.openDropdown();
-      this._activateSelectedOrFirstItem();
       return;
     }
 
@@ -634,9 +666,9 @@ class UDExSelectBase extends UDExSearchableListBase {
         const nextIndex = this._skipNonInteractive(items, raw, lastIndex, "down");
         this._navigateToIndex(items, nextIndex);
       } else {
-        this._activateFirstItem();
+        this._activateSelectedOrFirstItem();
         // Also update _selectedOption so the input reflects the active item.
-        const activeIdx = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+        const activeIdx = this._activeDescendantItem ? items.indexOf(this._activeDescendantItem) : firstIndex;
         this._selectedOption = items[activeIdx].label;
         if (this.showImageFlags) {
           this.handleImagePosition(items, activeIdx);
@@ -685,7 +717,14 @@ class UDExSelectBase extends UDExSearchableListBase {
         }
         // Group header: fire header-press (same event the click handler fires) so
         // handleHeaderPress → onHeaderPress → handleGroupHeaderSelection runs.
-        activeItem.fireDecoratorEvent("header-press", { item: activeItem });
+        // List's legacy intersection type omits SelectAll although it is a
+        // navigable group. Narrow using its explicit discriminator.
+        const selectAllItem = activeItem as unknown as UDExListSelectAll;
+        if (selectAllItem.isSelectAllHeader) {
+          selectAllItem.fireDecoratorEvent("select-all", { item: activeItem });
+        } else {
+          activeItem.fireDecoratorEvent("header-press", { item: activeItem });
+        }
       } else {
         // Leaf item: fire item-press so the list handles selection consistently.
         // Do NOT toggle .selected directly — handleItemClick (called via onItemPress)
@@ -720,7 +759,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     }
 
     // Sync _selectedOption display for the first item (used when popover just opened via click).
-    if (!this._activeDescendantItem && hasItems) {
+    if (popoverOpened && !this._activeDescendantItem && hasItems) {
       this._selectedOption = items[firstIndex].label;
     }
   }
@@ -742,11 +781,10 @@ class UDExSelectBase extends UDExSearchableListBase {
 
   override onSearch(value: string): void {
     super.onSearch(value);
-    // Route search result count into the shared live region so SelectBox
-    // only needs one aria-live span (no separate polite span in the template).
-    if (this._accSearchResultInfo) {
-      this._liveRegionText = this._accSearchResultInfo;
-    }
+    // Filtering may remove the active item. Announce only the result count until
+    // the user navigates to an item in the updated list.
+    this._setActiveDescendant(null);
+    this._liveRegionText = this._accSearchResultInfo ?? "";
   }
 
   handleDirection() {
@@ -767,9 +805,7 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   handleDropdownOpen() {
-    // Clear first so the live-region mutation fires even if text is unchanged.
-    this._liveRegionText = "";
-    // Defer scroll and announcement until rendering settles.
+    // Defer scrolling until rendering settles.
     // Calling _handleDropdownScroll synchronously causes getBoundingClientRect
     // to read mid-transition positions (e.g. the max-height animation on
     // collapsible group headers), producing an incorrect scroll offset.
@@ -779,67 +815,25 @@ class UDExSelectBase extends UDExSearchableListBase {
       this._expandCollapsedGroupsWithSelection();
       return renderFinished();
     }).then(() => {
-      if (!this._activeDescendantItem) {
-        this._activateSelectedOrFirstItem();
+      // The popup may have closed while its opening render was pending.
+      if (!this._open) {
+        return;
+      }
+      if (!this._activeDescendantItem && !this._shouldFilterItems) {
+        const activeItem = this._activateSelectedOrFirstItem();
+        // JAWS can miss the input's native expanded change when opening also
+        // establishes an active descendant. Retain the popup fallback unless an
+        // expanded group already supplies native "open"/"expanded" feedback.
+        // Never repeat the host's hierarchy or state after the native usage hint.
+        this._liveRegionText = activeItem?.getAttribute("aria-expanded") === "true"
+          ? "" : translate(UDExSelectBase, EXPANDED);
       }
       this._handleDropdownScroll();
-      this._announceCurrentOrFirst();
     }).catch(() => {});
 
     this.fireEventDropdownOpen();
   }
 
-  /**
-   * Announces the currently active descendant item (if set), or the first
-   * navigable item as a fallback. Used on open and after state changes.
-   */
-  _announceCurrentOrFirst(): void {
-    const items = this._list?.getKeyboardNavigationItems();
-    if (!items?.length) { return; }
-    const item = this._activeDescendantItem ?? items.find(i => !i.nonInteractive || i.collapsible) ?? items[0];
-    if (!item) { return; }
-    const label = cleanLabel(item.label ?? "");
-    const stateParts = this._itemStateLabels(item);
-    const posText = this._treePositionText(item);
-    this._liveRegionText = [label, posText, ...stateParts].filter(Boolean).join(", ");
-  }
-
-  /**
-   * Returns the positional announcement text for an item, tree-aware when the
-   * list has groups. Matches the JAWS reading pattern of FilterMenu:
-   *   group header → "level 0, X of Y"  (Y = total navigable groups)
-   *   group child  → "level 1, X of Y"  (Y = siblings in that group)
-   *   flat item    → "X of Y"           (Y = total items, no level prefix)
-   */
-  _treePositionText(item: UDExListItemBase): string {
-    if (!this.isTreeStructure) {
-      const items = this._list?.getKeyboardNavigationItems() ?? [];
-      const pos = items.indexOf(item);
-      return pos >= 0 ? `${pos + 1} of ${items.length}` : "";
-    }
-
-    if (item.isGroup) {
-      // Position among navigable group headers.
-      const groups = (this._list?.getKeyboardNavigationItems() ?? []).filter(i => i.isGroup);
-      const pos = groups.indexOf(item);
-      return pos >= 0 ? `level 0, ${pos + 1} of ${groups.length}` : "level 0";
-    }
-
-    // Child item — find parent group and count siblings visible in navigation.
-    const parentGroup = item.parentElement as UDExListItemBase | null;
-    if (parentGroup?.isGroup) {
-      const navItems = this._list?.getKeyboardNavigationItems() ?? [];
-      const siblings = navItems.filter(i => !i.isGroup && i.parentElement === parentGroup);
-      const pos = siblings.indexOf(item);
-      return pos >= 0 ? `level 1, ${pos + 1} of ${siblings.length}` : "level 1";
-    }
-
-    // Fallback: flat position.
-    const all = this._list?.getKeyboardNavigationItems() ?? [];
-    const pos = all.indexOf(item);
-    return pos >= 0 ? `${pos + 1} of ${all.length}` : "";
-  }
-
   fireEventDropdownBeforeOClose() {
     this.fireDecoratorEvent("before-close");
   }
@@ -876,10 +870,21 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   openDropdown() {
+    if (this._popover.open) {
+      return;
+    }
+    this._pendingSelectionAnnouncement = "";
+    // Typing computes its result count before opening; preserve that status.
+    if (!this._shouldFilterItems) {
+      this._liveRegionText = "";
+    }
     this._popover.opener = this._trigger;
-    this._popover.open = true;
     this._open = true;
-    this._navigating = true;
+    this._navigating = false;
+    // Expose native state immediately. handleDropdownOpen supplements it after
+    // rendering because JAWS may miss this change on the first opening.
+    (this._search as HTMLElement).setAttribute("aria-expanded", "true");
+    this._popover.open = true;
     this._focused = false;
   }
 
@@ -888,6 +893,7 @@ class UDExSelectBase extends UDExSearchableListBase {
       this._open = false;
       this._popover.open = false;
       this._navigating = false;
+      (this._search as HTMLElement).setAttribute("aria-expanded", "false");
     }
   }
 
@@ -954,16 +960,12 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (!header) { return false; }
 
     // Left only collapses an expanded group; Right only expands a collapsed one.
-    if (collapse && !header.collapsed) {
-      header.collapsed = true;
-      this._list.setCollapsedItems(true, header);
-      renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => {});
-      return true;
-    }
-    if (!collapse && header.collapsed) {
-      header.collapsed = false;
-      this._list.setCollapsedItems(false, header);
-      renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => {});
+    if (header.collapsed !== collapse) {
+      header.collapsed = collapse;
+      this._list.setCollapsedItems(collapse, header);
+      // Synchronize the slotted source header just like a chevron click;
+      // UI5 template listeners subscribe to the prefixed decorator event.
+      header.fireDecoratorEvent("accordion-icon-click", { collapsed: collapse });
       return true;
     }
     // Target is a collapsible header but already in the requested state — still consume
@@ -1114,50 +1116,26 @@ class UDExSelectBase extends UDExSearchableListBase {
     findAndFocus(this);
   }
 
-  /**
-   * Builds the state portion of the live region announcement for a navigation item.
-   * Returns an array of state strings (e.g. ["collapsed", "Checked"]) to be joined
-   * with the label and position. Handles:
-   *   - collapsible group headers: expanded / collapsed
-   *   - MultiSelect: Checked / Unchecked / Indeterminate
-   *   - SingleSelect (tree): Selected / Unselected
-   *   - disabled: Disabled
-   */
-  _itemStateLabels(item: UDExListItemBase): string[] {
-    const parts: string[] = [];
-
-    if (item.collapsible) {
-      parts.push(translate(UDExSearchableListBase, item.expanded ? EXPANDED : COLLAPSED));
-    }
-
-    if (item.disabled) {
-      parts.push(translate(UDExSearchableListBase, DISABLED));
-    } else if (item.modeMultiSelect || (item.isGroup && this.modeMultiSelect)) {
-      if (item.indeterminate) {
-        parts.push(translate(UDExSearchableListBase, INDETERMINATE));
-      } else {
-        parts.push(translate(UDExSearchableListBase, item.selected ? SELECTED : UNSELECTED));
-      }
-    } else if (this.isTreeStructure && item.selected) {
-      // SingleSelect tree: only announce "Selected" when the item is actually selected.
-      parts.push(translate(UDExSearchableListBase, SELECTED));
-    }
-
-    return parts;
-  }
-
   get ariaDescribedbyText(): string {
+    const descriptions = [this.supportingText];
+    // Updating the token-count description while an item is active makes JAWS
+    // reread the input instead of the item whose selection just changed.
+    if (this._navigating) {
+      return descriptions.filter(Boolean).join(" ");
+    }
     if (this.modeSingleSelect) {
-      return this._navigating ? "" : this._selectedOption;
+      descriptions.push(this._selectedOption);
+      return descriptions.filter(Boolean).join(" ");
     }
     const tags = this.selectedItems.filter(item => !item.isGroup);
     // Tokenizer.i18nBundle may not be loaded yet on direct page load.
     // Return empty string until the bundle is available; the component re-renders
     // once i18n is ready and will pick up the correct text.
     if (!Tokenizer.i18nBundle) {
-      return "";
+      return descriptions.filter(Boolean).join(" ");
     }
-    return getTokensCountText(tags.length);
+    descriptions.push(getTokensCountText(tags.length));
+    return descriptions.filter(Boolean).join(" ");
   }
 
   get trigger(): HTMLElement {
@@ -1198,6 +1176,10 @@ class UDExSelectBase extends UDExSearchableListBase {
     };
   }
 
+  override get listAccessibleName(): string {
+    return this.accInfo.ariaLabel;
+  }
+
   get popoverId(): string {
     return `${this._id}_${this._dropdownClass}`;
   }
@@ -1215,7 +1197,11 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   override get isTreeStructure(): boolean {
-    return this._filteredItems.some(e => e.isGroup);
+    // Options flatten their descendants in the accessibility tree. Action
+    // buttons therefore need treeitems even in an otherwise flat popup, so
+    // their own names, roles and keyboard interaction remain available.
+    return this._filteredItems.some(({ isGroup, item }) => isGroup
+      || !!item.querySelector?.("[slot='firstIcon'], [slot='secondIcon']"));
   }
 
   get hideDropdownSearch(): boolean {

package/src/SelectBox.ts

@@ -182,10 +182,16 @@ class UDExSelectBox extends UDExSelectBase {
 
   handleSelectAll(e:CustomEvent) {
     this.onSelectAllHeaderPress(e);
+    this._activatePressedHeader(e);
   }
 
   handleHeaderPress(e:CustomEvent) {
     this.onHeaderPress(e);
+    this._activatePressedHeader(e);
+  }
+
+  /** Keep selection feedback attached to the header, without refocusing the input. @private */
+  _activatePressedHeader(e: CustomEvent): void {
     // After the click, find the rendered nav item for this header and set it as
     // the active descendant so the outline ring is visible. Then return DOM focus
     // to the input to prevent a double ring if the user navigates with arrows.
@@ -194,18 +200,28 @@ class UDExSelectBox extends UDExSelectBase {
     const renderedItem = navItems?.find(
       i => (i.getAttribute("data-token-id") ?? i._id) === tokenId,
     );
-    if (renderedItem) {
+    if (renderedItem && renderedItem !== this._activeDescendantItem) {
       this._setActiveDescendant(renderedItem);
     }
-    (this._search as HTMLElement).focus();
-    // Re-announce with updated checked/indeterminate state after the render cycle.
-    renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => {});
+    if (this.shadowRoot?.activeElement !== this._search) {
+      (this._search as HTMLElement).focus();
+    }
+    this._announceSelectionChange();
   }
 
   handleItemPress(e:CustomEvent) {
     this.handleItemSelection(e);
   }
 
+  handleDropdownClick(e: MouseEvent) {
+    const header = e.target as UDExListItemBase;
+    // Host-ARIA header rows are not focusable, so activate them directly
+    // instead of relying on the input's focusout handler.
+    if (header.isGroup && header.collapsible && !header.modeMultiSelect && !header.disabled) {
+      this._setActiveDescendant(header);
+    }
+  }
+
   handlerShowMoreItems(e: CustomEvent) {
     if (!this.displayonly) {
       this.showMoreItems(e);
@@ -303,9 +319,7 @@ class UDExSelectBox extends UDExSelectBase {
       this._selectedOption = "";
     }
 
-    this._setActiveDescendant(null);
-    this._open = false;
-    this.fireEventDropdownClose();
+    this._finishDropdownClose();
   }
 
   async handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {

package/src/SelectBoxTemplate.tsx

@@ -23,13 +23,11 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
             {...(this.isDisabled ? { disabled: "" } : {})}
             {...(this._open ? { open: "" } : {})}>
             {this.label && (
-              <>
-                <label for="search-input" class={this.labelClass}>
-                  {this.label}{this.required && " * "}
-                </label>
-                <span class="hidden" id={`${this._id}-aria-describedby`}>{this.ariaDescribedbyText}</span>
-              </>
+              <label for="search-input" class={this.labelClass}>
+                {this.label}{this.required && " * "}
+              </label>
             )}
+            <span class="hidden" id={`${this._id}-aria-describedby`}>{this.ariaDescribedbyText}</span>
             {this.showImageFlags && this.countryFlag}
             <div class="udex-text-field__holder">
               <input
@@ -51,7 +49,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
                 aria-haspopup={this.listboxRole}
                 aria-controls={this.listAriaControlsId}
                 aria-expanded={this._open}
-                aria-activedescendant={this._activeDescendantItem ? this._activeDescendantItem._id : undefined}
+                aria-activedescendant={this._activeDescendantItem ? this._activeDescendantItem.id : undefined}
                 aria-autocomplete={this._ariaAutoComplete}
                 aria-describedby={`${this._id}-aria-describedby`}
                 autocomplete="off"
@@ -81,6 +79,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
               accessibleRole={PopupAccessibleRole.None}
               allow-target-overlap={this.allowTargetOverlap}
               onKeyDown={this.handleKeyDownDropdown}
+              onClick={this.handleDropdownClick}
               {...({
                 onSelectAll: this.handleSelectAll,
                 onItemPress: this.handleItemPress,
@@ -138,14 +137,16 @@ function renderTagGroup(this: UDExSelectBox) {
             <UDExTag
               key={index}
               text={cleanLabel(item.label)}
-              id={item._id}
+              id={`${this._id}-tag-${item._id}`}
+              data-id={item._id}
               icon="decline">
             </UDExTag>
           ) : (
             <UDExTag
               key={index}
               text={`${item.rating} ${this.startsText}`}
-              id={item._id}
+              id={`${this._id}-tag-${item._id}`}
+              data-id={item._id}
               icon="decline">
             </UDExTag>
           )

package/src/SideNavigation.ts

@@ -6,6 +6,16 @@ import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
 
+export enum UDExSideNavigationVariant {
+  Full = "Full",
+  Content = "Content",
+}
+
+export enum UDExSideNavigationPlacement {
+  Left = "Left",
+  Right = "Right",
+}
+
 /**
  * @class
  *
@@ -38,6 +48,31 @@ class UDExSideNavigation extends SideNavigation {
    */
   @property({ type: Boolean })
     isFixedInPlace!: boolean;
+
+  /**
+   * Defines the variant of the component.
+   *
+   * @default "Full"
+   * @public
+   */
+  @property()
+    variant: `${UDExSideNavigationVariant}` = UDExSideNavigationVariant.Full;
+
+  /**
+   * Defines which side the navigation panel is on.
+   *
+   * @default "Left"
+   * @public
+   */
+  @property()
+    placement: `${UDExSideNavigationPlacement}` = UDExSideNavigationPlacement.Left;
+
+  onBeforeRendering() {
+    super.onBeforeRendering();
+    this.querySelectorAll("[udex-side-navigation-item], [udex-side-navigation-sub-item]").forEach(item => {
+      item.setAttribute("variant", this.variant);
+    });
+  }
 }
 
 UDExSideNavigation.define();