@sapudex/web-components 0.114.2 → 0.127.6

package/src/TabNavigation.ts

@@ -8,6 +8,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
@@ -18,10 +19,10 @@ import {
   isEnter,
   isSpace,
   isEscape,
-  isTabNext,
-  isTabPrevious,
   isHome,
   isEnd,
+  isTabNext,
+  isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Tab, { ITab } from "./Tab.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -30,10 +31,11 @@ import { MORE } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
 import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
-import TabNavigationPopover from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
+import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
 
 // Styles
 import TabNavigationCss from "./generated/themes/TabNavigation.css.js";
+import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
 
 const staticAreaTabStyles: Array<StyleData> = [];
 
@@ -68,10 +70,8 @@ export enum Mode {
 @customElement({
   tag: "udex-tab-navigation",
   renderer: litRender,
-  styles: TabNavigationCss,
+  styles: [TabNavigationCss, TabInOverflowCss],
   template: TabNavigationTemplate,
-  staticAreaTemplate: TabNavigationPopover,
-  staticAreaStyles: [staticAreaTabStyles],
   dependencies: [ResponsivePopover],
 })
 /**
@@ -193,6 +193,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   onBeforeRendering(): void {
+    this.updateOverflowItems();
     this.setSelectedTab();
   }
 
@@ -220,18 +221,37 @@ class UDExTabNavigation extends UI5Element {
   }
 
   setRealTabToItems() {
-    const contentId = this.__id!;
-
     this.items.forEach((tab, index, arr) => {
       tab._iconWithoutBackground = this.iconWithoutBackground;
       tab._posinset = index + 1;
       tab._setsize = arr.length;
-      tab._contentId = `udex-${contentId}-content`;
+      tab._contentId = this.getContentId(index);
       tab._realTab = this._selectedTab;
       tab._width = this.tabWidth;
+      tab._contentTabIndex = this.getContentTabIndex(tab);
     });
   }
 
+  getContentId(index: number): string {
+    return `udex-${index + 1}-content`;
+  }
+
+  getContentTabIndex(tab: ITab): string {
+    if (tab.selected) {
+      const focusableSelectors = ["a[href]", "button", "textarea", "input", "select", "details", "[tabindex]:not([tabindex='-1']"];
+      const focusableElementsUDExTag = this.getAllCustomTags(tab, "udex");
+      const focusableElementsCustomTag = this.getAllCustomTags(tab, "ui5").concat(focusableElementsUDExTag);
+      const focusableElements = Array.from(tab.querySelectorAll(focusableSelectors.join(","))).concat(focusableElementsCustomTag);
+      return focusableElements.length ? "-1" : "0";
+    }
+    return "-1";
+  }
+
+  getAllCustomTags(tab: ITab, prefix: string) {
+    const allElements = tab.querySelectorAll("*");
+    return Array.from(allElements).filter(element => element.tagName.toLowerCase().startsWith(prefix.toLowerCase()));
+  }
+
   setElementInHeader() {
     this.items.forEach(item => {
       item.getElementInHeader = () => this.getDomRef()!.querySelector(`[id="${item.__id!}"]`);
@@ -549,8 +569,8 @@ class UDExTabNavigation extends UI5Element {
     return this.shadowRoot!.querySelector<HTMLElement>(`#${this.__id!}-header`)!;
   }
 
-  async handleMoreButton() {
-    this._responsivePopover = await this.getResponsePopover();
+  handleMoreButton() {
+    this._responsivePopover = this.getResponsePopover();
     this.updateOverflowItems();
     this.handleTogglePopover();
   }
@@ -578,9 +598,9 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleOpenPopover() {
+  handleOpenPopover() {
     if (!this._responsivePopover?.opened) {
-      await this._responsivePopover!.showAt(this.getMoreButton());
+      this._responsivePopover!.showAt(this.getMoreButton());
       this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
       this._isExpanded = true;
     }
@@ -589,8 +609,6 @@ class UDExTabNavigation extends UI5Element {
   handleKeyDown(e: KeyboardEvent) {
     this.handleRightArrow(e);
     this.handleLeftArrow(e);
-    this.handleTabNext(e);
-    this.handleTabPrevious(e);
     this.handleHomeKey(e);
     this.handleEndKey(e);
   }
@@ -632,47 +650,16 @@ class UDExTabNavigation extends UI5Element {
     this._visibleTabs![previousSelectIndex].focus();
   }
 
-  handleTabNext(e: KeyboardEvent) {
-    if (isTabNext(e)) {
-      const previousSelectedIndex = this.getTabIndexById((e.target as HTMLElement).id);
-      this.onTabNext(e, previousSelectedIndex);
-    }
-  }
-
-  onTabNext(e: KeyboardEvent, previousSelectedIndex: number) {
-    const isMoreButton = this._visibleTabs![this._visibleTabs!.length - 1] === this.getMoreButton();
-    const nextSelectIndex = previousSelectedIndex + 1;
-
-    if (nextSelectIndex < this._visibleTabs!.length || (isMoreButton && nextSelectIndex < this._visibleTabs!.length)) {
-      e.preventDefault();
-      this._visibleTabs![nextSelectIndex].focus();
-    }
-  }
-
-  handleTabPrevious(e: KeyboardEvent) {
-    if (isTabPrevious(e)) {
-      const previousSelectedIndex = this.getTabIndexById((e.target as HTMLElement).id);
-      this.onTabPrevious(e, previousSelectedIndex);
-    }
-  }
-
-  onTabPrevious(e: KeyboardEvent, previousSelectedIndex: number) {
-    const previousSelectIndex = previousSelectedIndex - 1;
-
-    if (previousSelectIndex >= 0) {
-      e.preventDefault();
-      this._visibleTabs![previousSelectIndex].focus();
-    }
-  }
-
   handleHomeKey(e: KeyboardEvent) {
     if (isHome(e)) {
+      e.preventDefault();
       this._visibleTabs![0].focus();
     }
   }
 
   handleEndKey(e: KeyboardEvent) {
     if (isEnd(e)) {
+      e.preventDefault();
       this.onEndKey();
     }
   }
@@ -686,43 +673,12 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleFocusMoreButton(e: KeyboardEvent) {
-    await this.handleUpMoreButton(e);
-    await this.handleDownMoreButton(e);
-    this.handleTabPreviouMoreButton(e);
+  handleFocusMoreButton(e: KeyboardEvent) {
+    this.handleDownMoreButton(e);
     this.handleHomeKeyMoreButton(e);
     this.handleEnterKeyMoreButton(e);
   }
 
-  async handleUpMoreButton(e: KeyboardEvent) {
-    if (isUp(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      this._responsivePopover = await this.getResponsePopover();
-      await this.handleOpenPopover();
-      this.updateOverflowItems();
-      this.onFocusLastItemPopover();
-    }
-  }
-
-  async onFocusLastItemPopover() {
-    if (this._responsivePopover?.opened) {
-      const popoverItems = await this.getItemsFromPopover();
-      const lastOverflowTabIndex = popoverItems.length - 1;
-      popoverItems[lastOverflowTabIndex].focus();
-    }
-  }
-
-  handleTabPreviouMoreButton(e: KeyboardEvent) {
-    if (isTabPrevious(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const lastVisibleTab = this._visibleTabs!.length - 2;
-      this._visibleTabs![lastVisibleTab].focus();
-    }
-  }
-
   handleHomeKeyMoreButton(e: KeyboardEvent) {
     if (isHome(e)) {
       e.preventDefault();
@@ -731,34 +687,29 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleEnterKeyMoreButton(e: KeyboardEvent) {
+  handleEnterKeyMoreButton(e: KeyboardEvent) {
     if (isEnter(e)) {
       e.preventDefault();
-      this._responsivePopover = await this.getResponsePopover();
+      this._responsivePopover = this.getResponsePopover();
       this.updateOverflowItems();
       this.handleOpenPopover();
     }
   }
 
-  onOpenPopover() {
-    if (!this._responsivePopover?.opened) {
-      this.handleMoreButton();
-    }
-  }
-
-  async handleDownMoreButton(e: KeyboardEvent) {
+  handleDownMoreButton(e: KeyboardEvent) {
     if (isDown(e) || isEnter(e)) {
-      this._responsivePopover = await this.getResponsePopover();
-      await this.handleOpenPopover();
+      this._responsivePopover = this.getResponsePopover();
+      this.handleOpenPopover();
       this.updateOverflowItems();
-      this.onFocusFirstItemPopover();
     }
   }
 
-  async onFocusFirstItemPopover() {
+  onFocusFirstItemPopover() {
     if (this._responsivePopover?.opened) {
-      const popoverItems = await this.getItemsFromPopover();
-      popoverItems[0].focus();
+      const popoverItems = this.getItemsFromPopover();
+      const firstPopoverItem = popoverItems[0];
+      firstPopoverItem.setAttribute("tabindex", "0");
+      firstPopoverItem.focus();
     }
   }
 
@@ -770,6 +721,13 @@ class UDExTabNavigation extends UI5Element {
     this.handleEscape(e);
     this.handleHome(e);
     this.handleEnd(e);
+    this.handleTab(e);
+  }
+
+  handleTab(e: KeyboardEvent): void {
+    if (isTabNext(e) || isTabPrevious(e)) {
+      this.handleClosePopover();
+    }
   }
 
   handleUp(e: KeyboardEvent) {
@@ -778,16 +736,34 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async onPreviousItemInPopover(target: HTMLElement) {
-    const popoverItems = await this.getItemsFromPopover();
+  onPreviousItemInPopover(target: HTMLElement) {
+    const popoverItems = this.getItemsFromPopover();
     const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
     const previousSelectIndex = currentSelectedTabIndex - 1 < 0 ? popoverItems.length - 1 : currentSelectedTabIndex - 1;
+    const prevItem = popoverItems[previousSelectIndex];
+
+    this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
+    prevItem.setAttribute("tabIndex", "0");
+    prevItem.focus();
+  }
+
+  onNextItemInPopover(target: HTMLElement) {
+    const popoverItems = this.getItemsFromPopover();
+    const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
+    const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
+    const nextItem = popoverItems[nextSelectIndex];
 
-    popoverItems[previousSelectIndex].focus();
+    this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
+    nextItem.setAttribute("tabIndex", "0");
+    nextItem.focus();
   }
 
-  async getItemsFromPopover(): Promise<HTMLElement[]> {
-    const responsivePopover = await this.getResponsePopover();
+  resetTabIndexItem(item: HTMLElement): void {
+    item.setAttribute("tabIndex", "-1");
+  }
+
+  getItemsFromPopover(): Array<HTMLElement> {
+    const responsivePopover = this.getResponsePopover();
     const [contentFromPopover] = responsivePopover.content;
     return Array.from(contentFromPopover.children) as Array<HTMLElement>;
   }
@@ -802,14 +778,6 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async onNextItemInPopover(target: HTMLElement) {
-    const popoverItems = await this.getItemsFromPopover();
-    const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
-    const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
-
-    popoverItems[nextSelectIndex].focus();
-  }
-
   handleEnterOrSpace(e: KeyboardEvent) {
     if (isEnter(e) || isSpace(e)) {
       e.preventDefault();
@@ -826,25 +794,25 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleHome(e: KeyboardEvent) {
+  handleHome(e: KeyboardEvent) {
     if (isHome(e)) {
       e.preventDefault();
-      const popoverItems = await this.getItemsFromPopover();
+      const popoverItems = this.getItemsFromPopover();
       popoverItems[0].focus();
     }
   }
 
-  async handleEnd(e: KeyboardEvent) {
+  handleEnd(e: KeyboardEvent) {
     if (isEnd(e)) {
       e.preventDefault();
-      const popoverItems = await this.getItemsFromPopover();
+      e.stopPropagation();
+      const popoverItems = this.getItemsFromPopover();
       popoverItems[popoverItems.length - 1].focus();
     }
   }
 
-  async getResponsePopover() {
-    const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<ResponsivePopover>(`#${this.__id!}-overflow-popover`)!;
+  getResponsePopover(): ResponsivePopover {
+    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
   }
 
   get moreButtonText(): string {
@@ -854,6 +822,14 @@ class UDExTabNavigation extends UI5Element {
   static registerStaticAreaTabStyles(styles: StyleData) {
     staticAreaTabStyles.push(styles);
   }
+
+  static get tabNavigationPopoverTemplate() {
+    return TabNavigationPopoverTemplate;
+  }
+
+  get tabNavigationPopover() {
+    return executeTemplate(UDExTabNavigation.tabNavigationPopoverTemplate, this);
+  }
 }
 
 UDExTabNavigation.define();

package/src/TabNavigationPopover.hbs

@@ -3,6 +3,7 @@
     horizontal-align="Right"
 	placement-type="Bottom"
     aria-orientation="vertical"
+    @ui5-after-open="{{onFocusFirstItemPopover}}"
     hide-arrow
     _hideHeader
 >

package/src/Tag.hbs

@@ -1,26 +1,60 @@
-<div
-    tabindex="{{_tabIndex}}"
-    class="{{tagClasses}}"
-    @click="{{tagClickHandler}}"
-    @focusin="{{_focusin}}"
-    @focusout="{{_focusout}}"
-    @keydown="{{tagKeyDown}}"
-    role="{{accessibleRole}}"
-    aria-label="{{accessibleName}}"
-    aria-pressed="{{selected}}">
-    {{#if startIcon}}
-        <ui5-icon
-            class="udex-tag__icon udex-tag__icon--start"
-            name="{{icon}}"
-            @click="{{iconClickHandler}}">
-        </ui5-icon>
-    {{/if}}
-    <span class="udex-tag__text">{{{text}}}</span>
-    {{#if endIcon}}
-        <ui5-icon
-            class="udex-tag__icon udex-tag__icon--end"
-            name="{{icon}}"
-            @click="{{iconClickHandler}}">
-        </ui5-icon>
-    {{/if}}
-</div>
+{{#if readOnly}}
+    <div class="{{tagClasses}}">
+        <span class="udex-tag__text">{{{text}}}</span>
+    </div>
+{{else if nonSelectable}}
+    <div class="{{tagClasses}}">
+        {{#if startIcon}}
+            <button
+                class="udex-tag__btn-icon"
+                @click="{{iconClickHandler}}"
+                role="{{accessibleRole}}"
+                aria-label="{{iconAccessibleName}}">
+                <ui5-icon
+                    class="udex-tag__icon udex-tag__icon--start"
+                    name="{{icon}}">
+                </ui5-icon>
+            </button>
+        {{/if}}
+        <span class="udex-tag__text">{{{text}}}</span>
+        {{#if endIcon}}
+            <button
+                class="udex-tag__btn-icon"
+                @click="{{iconClickHandler}}"
+                role="{{accessibleRole}}"
+                aria-label="{{iconAccessibleName}}">
+                <ui5-icon
+                    class="udex-tag__icon udex-tag__icon--end"
+                    name="{{icon}}">
+                </ui5-icon>
+            </button>
+        {{/if}}
+    </div>
+{{else}}
+    <div
+        tabindex="{{_tabIndex}}"
+        class="{{tagClasses}}"
+        @click="{{tagClickHandler}}"
+        @focusin="{{_focusin}}"
+        @focusout="{{_focusout}}"
+        @keydown="{{tagKeyDown}}"
+        role="{{accessibleRole}}"
+        aria-label="{{accessibleName}}"
+        aria-pressed="{{selected}}">
+        {{#if startIcon}}
+            <ui5-icon
+                class="udex-tag__icon udex-tag__icon--start"
+                name="{{icon}}"
+                @click="{{iconClickHandler}}">
+            </ui5-icon>
+        {{/if}}
+        <span class="udex-tag__text">{{{text}}}</span>
+        {{#if endIcon}}
+            <ui5-icon
+                class="udex-tag__icon udex-tag__icon--end"
+                name="{{icon}}"
+                @click="{{iconClickHandler}}">
+            </ui5-icon>
+        {{/if}}
+    </div>
+{{/if}}

package/src/Tag.ts

@@ -10,7 +10,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
 // Styles
-import TagCss from "./generated/themes/Tag.css.js";
+import TagCss from "./generated/themes/Tag.css";
 
 export enum TagType {
     Text = "Text",
@@ -24,6 +24,11 @@ export enum IconPlacement {
     End = "End"
 }
 
+export enum TagSize {
+  Small = "Small",
+  Medium = "Medium"
+}
+
 /**
  * @class
  *
@@ -58,6 +63,7 @@ export enum IconPlacement {
  * @public
  */
 @event("selectionChange")
+
 /**
  * Emitted when icon in tag was clicked
  *
@@ -83,14 +89,16 @@ class UDExTag extends UI5Element {
   */
   @property({ type: TagType, defaultValue: TagType.Grey })
     design?: `${TagType}`;
+
   /**
    * Defines the size of the component.
    *
    * @default "Small"
    * @public
    */
-  @property({ type: String, defaultValue: "Small" })
-    size!: "Small" | "Medium";
+  @property({ type: TagSize, defaultValue: TagSize.Small })
+    size!: `${TagSize}`;
+
   /**
    * Defines icon name
   *
@@ -183,7 +191,7 @@ class UDExTag extends UI5Element {
   @property({ type: Boolean })
     nonSelectable!: boolean;
 
-  onBeforeRendering() {
+  onBeforeRendering(): void {
     this.toBeDeleted = false;
   }
 
@@ -193,71 +201,83 @@ class UDExTag extends UI5Element {
     }
   }
 
-  get tagClasses() {
-    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} udex-tag-${this.design?.toLowerCase()}
-    ${this.readOnly ? "udex-tag--readonly" : ""}
-    ${this.nonSelectable ? "udex-tag--nonselectable" : ""}
-    ${this.selected ? "udex-tag--selected" : ""}`;
-  }
-
-  get startIcon() {
-    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.Start;
-  }
-
-  get endIcon() {
-    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.End;
-  }
-
-  setSelected() {
+  setSelected(): void {
     this.selected = !this.selected;
   }
 
-  iconClickHandler(e: Event) {
+  iconClickHandler(e: Event): void {
     e.stopPropagation();
-    if (!this.readOnly) {
-      this.fireEvent("iconClick");
-    }
+    this.fireEvent("iconClick");
   }
 
-  tagClickHandler() {
-    if (!this.readOnly && !this.toBeDeleted && !this.nonSelectable) {
+  tagClickHandler(): void {
+    if (this.isInteractiveTag) {
       this.setSelected();
       this.fireEvent("selectionChange");
     }
   }
 
-  tagKeyDown(e: KeyboardEvent) {
+  tagKeyDown(e: KeyboardEvent): void {
     if (isEnter(e)) {
       this.tagClickHandler();
     }
   }
 
-  _focusin() {
+  _focusin(): void {
     this.focused = true;
   }
 
-  _focusout() {
+  _focusout(): void {
     this.focused = !this.focused;
   }
 
-  get _tabIndex() {
-    if (this.readOnly || this.overflows || this.nonSelectable) {
+  get tagClasses(): string {
+    const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
+    const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";
+    const nonSelectableClass = this.nonSelectable ? "udex-tag--nonselectable" : "";
+    const selectableClass = this.selected ? "udex-tag--selected" : "";
+    const designClass = `udex-tag-${this.design?.toLowerCase()}`;
+    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${selectableClass}`.trim();
+  }
+
+  get startIcon(): boolean {
+    return this.hasIcon && this.iconPlacement === IconPlacement.Start;
+  }
+
+  get endIcon(): boolean {
+    return this.hasIcon && this.iconPlacement === IconPlacement.End;
+  }
+
+  get _tabIndex(): number {
+    if (this.overflows || this.nonSelectable) {
       return -1;
     }
     return 0;
   }
 
-  get textDom() {
-    return this.getDomRef()?.querySelector(".udex-tag__text");
+  get textDom(): HTMLElement {
+    return this.getDomRef()!.querySelector(".udex-tag__text")!;
   }
 
-  get isTruncatable() {
+  get isTruncatable(): boolean {
     if (!this.textDom) {
       return false;
     }
 
     return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);
   }
+
+  get isInteractiveTag(): boolean {
+    return !this.readOnly && !this.toBeDeleted && !this.nonSelectable;
+  }
+
+  get hasIcon(): boolean {
+    return !!this.icon && !this.readOnly;
+  }
+
+  get iconAccessibleName(): string {
+    return this.accessibleName || this.text;
+  }
 }
 
 UDExTag.define();

package/src/TextArea.hbs

@@ -21,12 +21,11 @@
     ?disabled="{{disabled}}"
     ?readonly="{{isInputReadonly}}"
     ?required="{{required}}"
-    aria-label="{{accessibleName}}"
-    aria-describedby="{{ariaDescribedBy}}"
-    aria-labelledby="{{accessibleNameRef}}"
+    ?aria-label="{{accessibleName}}"
+    ?aria-describedby="{{ariaDescribedBy}}"
+    ?aria-labelledby="{{accessibleNameRef}}"
     aria-required="{{required}}"
     aria-readonly="{{isInputReadonly}}"
-    aria-disabled="{{disabled}}"
     aria-invalid="{{ariaInvalid}}"
     @input="{{handleInput}}"
     @focus="{{handleFocus}}"

package/src/TextArea.ts

@@ -257,6 +257,9 @@ class UDExTextArea extends UI5Element {
     const valueStateTextDescId = this.hasValueState ? `${this._id}-valueStateDesc` : "";
     const readonlyTextDescId = this.readonly ? `${this._id}-readonlyDesc` : "";
     const supportingTextDescId = this._supportingText ? `${this._id}-supportingTextDesc` : "";
+    if (!valueStateTextDescId && !supportingTextDescId && !readonlyTextDescId) {
+      return;
+    }
     return `${valueStateTextDescId} ${supportingTextDescId} ${readonlyTextDescId}`;
   }