@sapudex/web-components 2.9.0 → 2.10.0

package/src/Footer.ts

@@ -14,6 +14,8 @@ import UDExButton from "./Button.js";
 import UDExAccordion from "./Accordion.js";
 import UDExLink from "./Link.js";
 import UDExDivider from "./Divider.js";
+import UDExSocialMediaButton from "./SocialMediaButton.js";
+import type { UDExSocialMediaButtonType } from "./types/SocialMediaButtonType.js";
 import type { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
@@ -35,7 +37,6 @@ import {
   QUICK_LINKS,
   SEE_COMPLETE_LIST,
   SITE_INFORMATION,
-  SOCIAL_LINK_ICON,
   TRENDING,
   COPYRIGHT,
   PUBLIC_SECURITY_NETWORK_NUMBER,
@@ -56,9 +57,11 @@ export type FooterLink = {
 };
 
 export type FooterSocialLink = {
+  name?: UDExSocialMediaButtonType;
   url: string;
-  iconUrl: string;
-  target: UDExTarget;
+  target?: UDExTarget;
+  accessibleName?: string;
+  id? : string;
 };
 
 export type FooterContactNumber = {
@@ -106,7 +109,7 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
   renderer: litRender,
   styles: [FooterCss],
   template: FooterTemplate,
-  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink],
+  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink, UDExSocialMediaButton],
 })
 /**
  * Triggered on click interaction with logo in footer
@@ -427,10 +430,6 @@ class UDExFooter extends UI5Element {
     return !!this.contactNumbersArray.length || !!this.contactUsLink || !!this.chatWithUsLink;
   }
 
-  get socialIconAccessibleName(): string {
-    return ` ${UDExFooter.i18nBundle.getText(SOCIAL_LINK_ICON)}`;
-  }
-
   get phoneNumberAccessibleName(): string {
     return `${UDExFooter.i18nBundle.getText(PHONE_NUMBER)} `;
   }

package/src/MastheadItem.hbs

@@ -64,8 +64,8 @@
         <ui5-icon
             class="udex-masthead-item__icon"
             name="{{icon}}"
-            show-tooltip="{{iconAlt}}"
-            accessible-name="{{iconAlt}}"
+            show-tooltip="{{iconAltText}}"
+            accessible-name="{{iconAltText}}"
             mode="Decorative">
         </ui5-icon>
     {{else if image}}

package/src/MastheadItem.ts

@@ -285,9 +285,23 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @slot({ type: HTMLElement, "default": true })
     content?: Array<HTMLElement>;
 
+  /**
+   * Defines the prevents the item from losing focus.
+   *
+   * @private
+   */
+
   @property({ type: Boolean })
     _preventFocusOut!: boolean;
 
+  /**
+   * Defines the item is a menu close button
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMenuCloseBtn?: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -530,6 +544,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.querySelector("[udex-avatar]")!;
   }
 
+  get iconAltText(): string {
+    return this._isMenuCloseBtn ? this.accessibleName || this.icon : this.iconAlt;
+  }
+
   get isRtlDirection(): boolean {
     return this._direction === "rtl";
   }

package/src/MastheadShell.hbs

@@ -121,9 +121,10 @@
                 class="udex-masthead-shell__close-btn"
                 accessible-role="button"
                 icon="decline"
-                accessible-name="close"
+                accessible-name="{{mobileCloseButtonAccessibleName}}"
                 part="menu-close-btn"
-                hide-active-border>
+                hide-active-border
+                _is-menu-close-btn>
             </udex-masthead-item>
         {{/if}}
     </div>

package/src/MastheadShell.ts

@@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -31,7 +32,7 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const canvasContentFont = "16px '72 Brand Variable'";
+const canvasContentFont = "14px '72 Brand Variable'";
 type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
 
@@ -47,6 +48,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
 }
 
 export enum UDExMastheadVariable {
+  itemArrowIconMarginInlineStart = "--udex-masthead-item-arrow-margin-inline-start",
   mobileMenuHeight = "--udex-masthead-shell-mobile-menu-height",
   itemButtonIconSize = "--udex-masthead-item-button-icon-size",
   itemArrowIconSize = "--udex-masthead-item-arrow-icon-size",
@@ -283,7 +285,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines overflow style for the body after clicking mobile menu opener button
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -292,7 +294,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines the visibility of the Search by default.
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -301,7 +303,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines sticky position for component
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -406,6 +408,15 @@ class UDExMastheadShell extends UI5Element {
   @property()
     closeButtonAccessibleName?: string;
 
+  /**
+   * Defines an accessible name for the close mobile menu button
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    mobileCloseButtonAccessibleName?: string;
+
   /**
    * Defines an aria label for the homepage link
    *
@@ -490,7 +501,9 @@ class UDExMastheadShell extends UI5Element {
       this.focusSearchBtn();
     }
 
-    this.updateVisibility();
+    if (this.shouldHandleMobileView) {
+      this.updateVisibility();
+    }
   }
 
   onEnterDOM(): void {
@@ -504,6 +517,12 @@ class UDExMastheadShell extends UI5Element {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
+  onInvalidation({ name }: ChangeInfo): void {
+    if (name === "default" && this.shouldHandleMobileView) {
+      this.handleMobileMode();
+    }
+  }
+
   _handleResize(): void {
     if (this.shouldHandleMobileView) {
       this.handleMobileMode();
@@ -762,7 +781,9 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemArrowIconWidth(): number {
-    return this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
+    const arrowIconSize = this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
+    const marginInlineStart = this.getItemIconSize(UDExMastheadVariable.itemArrowIconMarginInlineStart);
+    return arrowIconSize + marginInlineStart;
   }
 
   getMainMenuWidth(): number {
@@ -772,7 +793,7 @@ class UDExMastheadShell extends UI5Element {
       const mainItem = item as UDExMastheadItem;
       const hasArrowIcon = mainItem.hasArrowDown && !mainItem.hideArrowIcon;
       const arrowIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
-      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
+      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar)) + arrowIconWidth;
     }, 0);
   }
 

package/src/SearchableListBase.hbs

@@ -16,7 +16,7 @@
     </span>
 {{/if}}
 {{#if isListEmpty}}
-    <div class="udex-no-result"><span>{{getNoResultText}}&lrm;</span></div>
+    <div class="udex-no-result"><span>{{getNoResultText}}</span></div>
 {{else if busy}}
     <ui5-busy-indicator
         class="udex-busy-indicator"

package/src/SelectBox.hbs

@@ -15,7 +15,6 @@
                 ?displayonly="{{displayonly}}"
                 ?readonly="{{readonly}}"
                 aria-label="{{accInfo.ariaLabel}}"
-                aria-labelledby="{{accInfo.ariaLabelledBy}}"
                 aria-readonly="{{isReadOrDisplayOnly}}"
                 aria-disabled="{{disabled}}"
                 aria-haspopup="{{listboxRole}}"
@@ -23,16 +22,18 @@
                 aria-expanded="{{tokenizerExpanded}}"
                 aria-activedescendant>
                 {{#if label}}
-                    <span id="{{this._id}}-single-label" class="{{labelClass}}">
-                    {{label}}
-                    {{#if required}}
-                        *
-                    {{/if}}
-                </span>
+                    <span class="{{labelClass}}">
+                        {{label}}
+                        {{#if required}}
+                          *
+                        {{/if}}
+                        </span>
+                        <span class="hidden" id="{{this._id}}-single-label">{{accInfo.ariaLabel}}</span>
+                    </span>
                 {{/if}}
                 {{#if showSingleSelectedOption}}
                     <div class="udex-text-field__text-holder">
-                        <span class="udex-text-field__single-label">
+                        <span class="udex-text-field__single-label" aria-hidden="true">
                             {{{_singleSelectedOption}}}
                         </span>
                     </div>
@@ -66,15 +67,12 @@
                         aria-expanded="{{accessibilityAttributes.expanded}}"
                         aria-controls="{{accessibilityAttributes.controls}}"
                         aria-haspopup="{{accessibilityAttributes.hasPopup}}"
-                        aria-label="{{accessibilityAttributes.ariaLabel}}"
                         class="udex-text-field__trigger"
                         tabindex="{{triggerTabIndex}}"
                         @keydown="{{handleKeyDownTrigger}}"
                         @click="{{getHandleMultiSelectOpen}}">
-                            <ui5-icon
-                                name="navigation-down-arrow"
-                                accessible-name="{{iconAccessibleNameText}}">
-                            </ui5-icon>
+                        <ui5-icon name="navigation-down-arrow"></ui5-icon>
+                        <span class="hidden">{{accessibilityAttributes.ariaLabel}}</span>
                     </button>
                 {{/if}}
             </div>

package/src/SelectBox.ts

@@ -23,6 +23,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -713,8 +714,7 @@ class UDExSelectBox extends UDExSearchableListBase {
 
   get accInfo() {
     return {
-      "ariaLabel": this.accessibleName || this.label || undefined,
-      "ariaLabelledBy": this.accessibleNameRef || undefined,
+      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || undefined,
     };
   }
 

package/src/SocialMediaButton.ts

@@ -0,0 +1,152 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import SocialMediaButtonTemplate from "./SocialMediaButtonTemplate.js";
+import UDExSocialMediaButtonType from "./types/SocialMediaButtonType.js";
+import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { SOCIAL_MEDIA_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import { UDExTarget } from "./types/common.js";
+
+// Styles
+import SocialMediaButtonCss from "./generated/themes/SocialMediaButton.css.js";
+
+const baseIconsURL = "https://cdn.udex.services.sap.com/dds/design-tokens/assets/icons/";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-social-media-button</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/SocialMediaButton.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-social-media-button
+ * @public
+ */
+@customElement({
+  tag: "udex-social-media-button",
+  renderer: jsxRenderer,
+  styles: SocialMediaButtonCss,
+  template: SocialMediaButtonTemplate,
+})
+
+/**
+ * Triggered when the user clicks on an item.
+ * @public
+ */
+@event("click", { cancelable: true, bubbles: true })
+
+class UDExSocialMediaButton extends UI5Element {
+  eventDetails!: {
+    "click": LinkClickEventDetail,
+  };
+
+  /**
+   * Defines the type of Social Media Button.
+   * <br><br>
+   * Available options are:
+   * <ul>
+   * <li><code>facebook</code> - the button with Facebook icon</li>
+   * <li><code>instagram</code> - the button with Instagram icon</li>
+   * <li><code>linkedin</code> - the button with LinkedIn icon</li>
+   * <li><code>youtube</code> - the button with YouTube icon</li>
+   * <li><code>x</code> - the button with X icon</li>
+   * <li><code>mail</code> - the button with Instagram mail icon (default)</li>
+   * </ul>
+   *
+   * @public
+   */
+  @property()
+    type: `${UDExSocialMediaButtonType}` = UDExSocialMediaButtonType.email;
+
+  /**
+   * Defines the URL address for Social Media platform profile.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    url?: string;
+
+  /**
+   * Define the target of the Social Media Button link
+   * <b>Note:</b> Standard hyperlink behavior is supported.
+   * @public
+   * @default "_blank"
+   */
+  @property({ type: String })
+    target: `${UDExTarget}` = UDExTarget._blank;
+
+  /**
+   * Defines the accessible ARIA name of the component.
+   *
+   * @default "Social Media Button"
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  private svgLoaded: boolean = false;
+
+  fireLinkClickEvent(e: CustomEvent<LinkClickEventDetail>): void {
+    const executeEvent = this.fireDecoratorEvent("click", e.detail);
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
+  }
+
+  onAfterRendering(): void {
+    this.fetchIconSvg();
+  }
+
+  async fetchIconSvg() {
+    if (this.svgLoaded) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`${baseIconsURL}${this.type}.svg`);
+
+      if (!response.ok) {
+        console.warn("Failed to fetch SVG", response.statusText);
+        return;
+      }
+
+      const svgContent: string = await response.text();
+      this.updateSvgContent(svgContent);
+    } catch (error) {
+      console.warn("Failed to fetch SVG", error);
+    }
+  }
+
+  private updateSvgContent(svgContent: string): void {
+    const socialBtnEl = this.shadowRoot?.querySelector(".udex-social-media-button");
+    if (socialBtnEl) {
+      socialBtnEl.innerHTML = svgContent;
+      this.svgLoaded = true;
+    }
+  }
+
+  get buttonAccessibleName(): string {
+    return this.accessibleName || UDExSocialMediaButton.i18nBundle.getText(SOCIAL_MEDIA_BUTTON);
+  }
+}
+
+UDExSocialMediaButton.define();
+
+export default UDExSocialMediaButton;

package/src/SocialMediaButtonTemplate.tsx

@@ -0,0 +1,18 @@
+import type UDExSocialMediaButton from "./SocialMediaButton.js";
+import UDExLink from "./Link.js";
+
+export default function SocialMediaButtonTemplate(this: UDExSocialMediaButton) {
+  return (
+    <div
+      class="udex-social-media-button-wrapper">
+      <UDExLink
+        href={this.url}
+        target={this.target}
+        accessible-name={this.buttonAccessibleName}
+        onClick={this.fireLinkClickEvent}>
+        <div class={`udex-social-media-button udex-social-media-button-${this.type}`} title={this.buttonAccessibleName}></div>
+        <div class="hidden">{this.buttonAccessibleName}</div>
+      </UDExLink>
+    </div>
+  );
+}

package/src/StepInput.ts

@@ -20,6 +20,7 @@ import {
   isUpShift,
   isUpShiftCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { STEPINPUT_DEC_ICON_TITLE, STEPINPUT_INC_ICON_TITLE } from "./generated/i18n/i18n-defaults.js";
@@ -29,7 +30,7 @@ import StepInputTemplate from "./StepInputTemplate.js";
 // Styles
 import StepInputCss from "./generated/themes/StepInput.css.js";
 import type UDExControlButtonDesign from "./types/ControlButtonDesign.js";
-import type { UDExTextFieldKeydownEventDetail } from "./TextField.js";
+import type { AccInfo, UDExTextFieldKeydownEventDetail } from "./TextField.js";
 
 // Spin variables
 const INITIAL_WAIT_TIMEOUT = 500; // milliseconds
@@ -255,6 +256,12 @@ class UDExStepInput extends UI5Element {
     super();
   }
 
+  get accInfo(): AccInfo {
+    return {
+      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || undefined,
+    };
+  }
+
   get controlButtonDesign(): UDExControlButtonDesign {
     return valueStateToControlButtonDesign[this.valueState];
   }

package/src/StepInputTemplate.tsx

@@ -9,8 +9,7 @@ export default function StepInputTemplate(this: UDExStepInput) {
       label={this.label}
       supporting-text={this.supportingText}
       value={this._valuePrecisioned}
-      aria-label={this.accessibleName}
-      aria-labelledby={this.accessibleNameRef}
+      aria-label={this.accInfo.ariaLabel}
       onFocusIn={this._onInputFocusIn}
       onFocusOut={this._onInputFocusOut}
       onKeydown={this._onkeydown}

package/src/TableRow.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableRowBase from "./TableRowBase.js";
+import type UDExTableCell from "./TableCell.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
 
 /**
@@ -39,9 +40,34 @@ class UDExTableRow extends UDExTableRowBase {
   @property({ type: Boolean })
     interactive?: boolean;
 
-  get isGroup() {
+  /**
+   * Defines highlighted the row.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    highlighted?: boolean;
+
+  onBeforeRendering(): void {
+    if (this.highlighted) {
+      this._setHighlightToCells();
+    }
+  }
+
+  _setHighlightToCells(): void {
+    this.cellsInRow.forEach(cell => {
+      cell._highlighted = true;
+    });
+  }
+
+  get isGroup(): boolean {
     return false;
   }
+
+  get cellsInRow(): Array<UDExTableCell> {
+    return this.getSlottedNodes<UDExTableCell>("cells");
+  }
 }
 
 UDExTableRow.define();

package/src/TextArea.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   READ_ONLY,
@@ -44,6 +45,12 @@ import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
   dependencies: [UDExStatusMessage],
 })
 
+/**
+ * Fires when the value of the textarea changes and the textarea loses focus.
+ * @public
+ */
+@event("change", { bubbles: true })
+
 class UDExTextArea extends UI5Element {
   eventDetails!: {
     "change": void,
@@ -236,10 +243,6 @@ class UDExTextArea extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  getInputDomRef() {
-    return this.getDomRef()!.querySelector<HTMLTextAreaElement>("textarea")!;
-  }
-
   onBeforeRendering() {
     if (this.value && this.labelActiveClass === "") {
       this.labelActiveClass = this._labelActiveClassName;
@@ -254,8 +257,8 @@ class UDExTextArea extends UI5Element {
     this.handleGrowing();
   }
 
-  handleInput = (event: InputEvent) => {
-    this.value = (event.target as HTMLInputElement)?.value;
+  handleInput = (inputEvent: InputEvent) => {
+    this.value = (inputEvent.target as HTMLInputElement)?.value;
   };
 
   handleChange = () => {
@@ -313,6 +316,10 @@ class UDExTextArea extends UI5Element {
     this.active = false;
   };
 
+  getInputDomRef(): HTMLTextAreaElement {
+    return this.getDomRef()!.querySelector<HTMLTextAreaElement>("textarea")!;
+  }
+
   get ariaInvalid(): string | null {
     return this.valueState === UDExValueState.Error ? "true" : null;
   }
@@ -321,7 +328,7 @@ class UDExTextArea extends UI5Element {
     return this.valueState === UDExValueState.Error || this.valueState === UDExValueState.Warning || this.valueState === UDExValueState.Success;
   }
 
-  get valueStateTypeMappings() {
+  get valueStateTypeMappings(): Record<UDExValueState, string> {
     return {
       [UDExValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
       [UDExValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),

package/src/TextField.hbs

@@ -31,28 +31,28 @@
          aria-describedby="{{accInfo.ariaDescribedBy}}"
          aria-haspopup="{{accInfo.ariaHasPopup}}"
          aria-label="{{accInfo.ariaLabel}}"
-         aria-labelledby="{{accInfo.ariaLabelledBy}}"
          part="textfield-input"
          min="{{min}}"
          max="{{max}}"
          step="{{step}}"
       />
-
       {{#if icon}}
         <udex-control-button
-          accessible-name="{{accessibleIconName}}"
+          accessible-name="{{buttonAccessibleName}}"
+          accessible-description="{{buttonAccessibleDescription}}"
           tooltip="{{showButtonTooltip}}"
           ?active="{{active}}"
           ?disabled="{{disabled}}"
           ?readonly="{{readonly}}"
+          ?_is-combobox-role="{{_isComboboxRole}}"
           ?non-interactive="{{readonly}}"
           design="{{valueState}}"
           icon="{{icon}}"
           @click="{{handleIconClick}}"
           part="textfield-control-btn"
           size="Large"
-          class="udex-text-field_icon-container"
-        ></udex-control-button>
+          class="udex-text-field_icon-container">
+        </udex-control-button>
       {{/if}}
   </div>