@sapudex/web-components 2.8.0 → 2.10.0

package/src/FilterMenu.ts

@@ -37,6 +37,7 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 
 type UDExFilterMenuResultClickEventDetail = {
   selectedItems: Array<UDExListItemBase>,
@@ -46,6 +47,12 @@ type UDExFilterMenuResetClickEventDetail = {
   restoredItems: Array<UDExListItemBase>,
 }
 
+type initialItemState = {
+  id: string,
+  selected: boolean,
+  indeterminate?: boolean,
+}
+
 /**
  * @class
  *
@@ -296,10 +303,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: String })
     triggerAccessibleRole: string = "combobox";
 
+  @property({ type: Boolean })
+    _shouldApplyFilter: boolean = false;
+
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
   _trigger!: UDExButton;
   _search!: UDExSearch;
   _popover!: Popover;
   _breakpointSizeXS = 640;
+  _initialState: Array<initialItemState> = [];
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -348,6 +362,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleReset(): void {
+    this.onDropdownClose();
     this.fireDecoratorEvent("reset-click", {
       restoredItems: this.selectedItems,
     });
@@ -355,12 +370,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleResult(): void {
-    if (!this.disabledButtons) {
-      this._popover.open = false;
-      this.fireDecoratorEvent("result-click", {
-        selectedItems: this.selectedItems,
-      });
-    }
+    this._shouldApplyFilter = true;
+    this.onDropdownClose();
+    this.fireDecoratorEvent("result-click", {
+      selectedItems: this.selectedItems,
+    });
   }
 
   handleKeyDownList(e: KeyboardEvent): void {
@@ -438,6 +452,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
       this._setContentHeight();
     }
 
+    this._initialState = this._getInitialState(this.items);
     this.fireDecoratorEvent("before-open");
   }
 
@@ -449,6 +464,44 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.fireDecoratorEvent("after-open");
   }
 
+  _getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState> {
+    return items.flatMap(item => {
+      if (item.isGroup) {
+        const groupState: initialItemState = {
+          id: item._id,
+          selected: item.selected,
+          indeterminate: item.indeterminate,
+        };
+        const subItemsState = (item as UDExListGroupHeaderBase).getItems().map(subItem => ({
+          id: subItem._id,
+          selected: subItem.selected,
+        }));
+        return [groupState, ...subItemsState];
+      }
+      return {
+        id: item._id,
+        selected: item.selected,
+      };
+    });
+  }
+
+  _setInitialListState(): void {
+    this.getSlottedItems(this.items).forEach((item, index) => {
+      const initialState = this._initialState[index];
+      if (item._id === initialState?.id) {
+        item.selected = initialState.selected;
+        if (item.isGroup) {
+          item.indeterminate = initialState.indeterminate;
+        }
+      }
+    });
+  }
+
+  _setInitialState(): void {
+    this._setInitialListState();
+    this._requestRender = true;
+  }
+
   _dropdownBeforeClose(): void {
     this.fireDecoratorEvent("before-close");
   }
@@ -459,6 +512,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
       this._managePopupListeners(UDExPopoverPart.Footer, "removeEventListener");
     }
 
+    if (!this._shouldApplyFilter && this.modeMultiSelect && !this.modeSelectAll) {
+      this._setInitialState();
+    }
+
+    this._shouldApplyFilter = false;
     this._open = false;
     this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireDecoratorEvent("after-close");
@@ -480,10 +538,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.resetBtnLabel !== undefined && this.resetBtnLabel.length > 0 ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledButtons(): boolean {
-    return !this.selectedItems.length && !this.selectAll;
-  }
-
   get _iconAccessibleNameText(): string {
     return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
   }
@@ -501,17 +555,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   get hasFooterButtons(): boolean {
-    return (this.hasResultBtn || this.hasResetBtn) && !this.disabledButtons;
-  }
-
-  get hasResultBtn(): boolean {
-    return !this.hideResultBtn && !this.disabledButtons;
+    return !!this.shadowRoot!.querySelector("[udex-button]");
   }
 
   get hasResetBtn(): boolean {
     return !this.hideResetBtn;
   }
 
+  get modeSelectAll(): boolean {
+    return !!this.querySelector<UDExFilterMenuSelectAll>("[udex-filter-menu-select-all]");
+  }
+
   getTriggerButton(): UDExButton {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }

package/src/Footer.hbs

@@ -103,22 +103,15 @@
     {{#if socialLinksArray.length}}
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
-              <a
-                target="{{target}}"
-                href="{{this.url}}"
-                class="udex-footer__social-icon"
+              <udex-social-media-button
+                type="{{this.name}}"
+                url="{{this.url}}"
+                target="{{this.target}}"
+                accessible-name="{{this.accessibleName}}"
                 data-name="{{this.name}}"
                 data-id="{{this.id}}"
-                @click="{{../_onSocialMediaLinkClick}}"
-              >
-                <img
-                  data-name="{{this.name}}"
-                  data-id="{{this.id}}"
-                  alt="{{this.name}} {{../socialIconAccessibleName}}"
-                  src="{{this.iconUrl}}"
-                  loading="lazy"
-                />
-              </a>
+                @ui5-click="{{../_onSocialMediaLinkClick}}"
+                ></udex-social-media-button>
           {{/each}}
         </div>
     {{/if}}

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>
+  );
+}