@sapudex/web-components 2.5.0 → 2.7.0

package/src/Avatar.ts

@@ -1,16 +1,15 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 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 Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
-
+import type AvatarColorScheme from "@ui5/webcomponents/dist/types/AvatarColorScheme.js";
 // Template
-import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
+import AvatarTemplate from "./AvatarTemplate.js";
 
 // Styles
 import AvatarCss from "./generated/themes/Avatar.css.js";
@@ -42,18 +41,18 @@ export enum UDExAvatarSize {
   XL = "XL",
 }
 
-const udexToUi5ColorSchemeMap = {
+const UDExToUi5ColorSchemeMap = {
   Mango: "Accent1",
   Red: "Accent2",
   Raspberry: "Accent3",
   Pink: "Accent4",
   Indigo: "Accent5",
   Blue: "Accent6",
+  Transparent: "Accent6",
+  Neutral: "Accent6",
   Teal: "Accent7",
   Green: "Accent8",
   Grey: "Accent10",
-  Transparent: "Accent6",
-  Neutral: "Accent6",
 };
 
 /**
@@ -75,10 +74,9 @@ const udexToUi5ColorSchemeMap = {
  */
 @customElement({
   tag: "udex-avatar",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: AvatarCss,
   template: AvatarTemplate,
-  dependencies: [Avatar],
 })
 
 /**
@@ -233,8 +231,8 @@ class UDExAvatar extends UI5Element {
     return this.getAttribute("color-scheme") as UDExAvatarColorScheme || this.colorScheme;
   }
 
-  get getUDExAvatarColorScheme(): string {
-    return udexToUi5ColorSchemeMap[this.colorScheme];
+  get getUDExAvatarColorScheme(): AvatarColorScheme {
+    return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;
   }
 
   get imageSlot(): boolean {

package/src/AvatarTemplate.tsx

@@ -0,0 +1,22 @@
+import type Avatar from "./Avatar.js";
+import UI5Avatar from "@ui5/webcomponents/dist/Avatar.js";
+
+export default function AvatarTemplate(this: Avatar) {
+  return (
+    <UI5Avatar
+      class={this.udexAvatarClass}
+      accessibleName={this.avatarAccessibleName}
+      colorScheme={this.getUDExAvatarColorScheme}
+      onClick={this.handleClick}
+      disabled={this.disabled}
+      initials={this.initials}
+      interactive={this.interactive}
+      fallbackIcon={this.fallbackIcon}
+      icon={this.icon}
+      shape={this.shape}
+      size={this.size}>
+      {this.imageSlot && <slot></slot>}
+      {this.badgeSlot && <slot name="badge" slot="badge"></slot>}
+    </UI5Avatar>
+  );
+}

package/src/Badge.ts

@@ -2,25 +2,21 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-
-import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
-
-// Styles
-import BadgeCss from "./generated/themes/Badge.css.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import BadgeTemplate from "./BadgeTemplate.js";
 import UDExIconPlacement from "./types/IconPlacement.js";
-
 import {
   UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,
 } from "./types/BadgeDesign.js";
 
+// Styles
+import BadgeCss from "./generated/themes/Badge.css.js";
+
 /**
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- *
  * <h3>Usage</h3>
  *
  * For the <code>udex-badge</code>
@@ -34,11 +30,11 @@ import {
  */
 @customElement({
   tag: "udex-badge",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: BadgeCss,
   template: BadgeTemplate,
-  dependencies: [Icon],
 })
+
 class UDExBadge extends UI5Element {
   /**
    * Defines the type of the component.
@@ -61,7 +57,7 @@ class UDExBadge extends UI5Element {
   /**
    * Defines the design of text type component.
    *
-   * @default "Info"
+   * @default "Information"
    * @public
    */
   @property()

package/src/BadgeTemplate.tsx

@@ -0,0 +1,22 @@
+import type Badge from "./Badge.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function BadgeTemplate(this: Badge) {
+  return (
+    <div className={this.badgeClasses}>
+      {this.startIcon &&
+        <UI5Icon
+          class="udex-badge__icon udex-badge__icon--start"
+          name={this.icon}>
+        </UI5Icon>
+      }
+      <slot></slot>
+      {this.endIcon &&
+        <UI5Icon
+          class="udex-badge__icon udex-badge__icon--end"
+          name={this.icon}>
+        </UI5Icon>
+      }
+    </div>
+  );
+}

package/src/Carousel.ts

@@ -2,38 +2,44 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  isUp,
-  isDown,
-  isRight,
-  isLeft,
+  isUp, isDown, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
-import {
-  CAROUSEL_NEXT_ARROW_TEXT,
-  CAROUSEL_PREVIOUS_ARROW_TEXT,
-} from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
+import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 
-import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
+import CarouselTemplate from "./CarouselTemplate.js";
 
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
-import UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
   bottom = "bottom",
 }
 
+export enum UDExCarouselButtonDesign {
+  Secondary = "Secondary",
+  Tertiary = "Tertiary",
+}
+
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-carousel</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Carousel.js";</code>
+ *
  * @constructor
  * @extends UI5Element
  * @tagname udex-carousel
@@ -41,11 +47,11 @@ export enum UDExCarouselNavigationPosition {
  */
 @customElement({
   tag: "udex-carousel",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: CarouselCss,
   template: CarouselTemplate,
-  dependencies: [UI5Carousel, UDExButton],
 })
+
 class UDExCarousel extends UI5Element {
   /**
    * Defines the position of the navigation.
@@ -100,11 +106,11 @@ class UDExCarousel extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  get nextPageText() {
+  get nextPageText(): string {
     return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
   }
 
-  get previousPageText() {
+  get previousPageText(): string {
     return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
   }
 
@@ -114,24 +120,24 @@ class UDExCarousel extends UI5Element {
     return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
   }
 
-  get buttonDesign() {
+  get buttonDesign(): UDExCarouselButtonDesign {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top
-      ? "Secondary"
-      : "Tertiary";
+      ? UDExCarouselButtonDesign.Secondary
+      : UDExCarouselButtonDesign.Tertiary;
   }
 
-  get showNavigationButtons() {
+  get showNavigationButtons(): { top: boolean; bottom: boolean } {
     return {
       top: this.navigationPlacement === UDExCarouselNavigationPosition.top,
       bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,
     };
   }
 
-  get _hidePageIndicator() {
+  get _hidePageIndicator(): boolean {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top;
   }
 
-  get _carousel() {
+  get _carousel(): UI5Carousel | null {
     return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
   }
 

package/src/CarouselTemplate.tsx

@@ -0,0 +1,56 @@
+import type Carousel from "./Carousel.js";
+import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js";
+import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function CarouselTemplate(this: Carousel) {
+  return (
+    <div className={this.carouselClass} onKeyDown={this._onkeydown}>
+      {this.showNavigationButtons.top && navigation.call(this)}
+      <UI5Carousel
+        id="carousel"
+        hideNavigationArrows
+        arrowsPlacement={CarouselArrowsPlacement.Navigation}
+        accessibleName={this.accessibleName}
+        hidePageIndicator={this._hidePageIndicator}>
+        {this.items.map(item =>
+          <slot name={(item as SlottedChild)._individualSlot}></slot>
+        )}
+      </UI5Carousel>
+      {this.showNavigationButtons.bottom && navigation.call(this)}
+    </div>
+  );
+}
+
+function navigation(this: Carousel) {
+  const btnClassName = "udex-carousel__navigation-button";
+
+  return (
+    <div class="udex-carousel__navigation-wrapper" part="navigation">
+      <UDExButton
+        size={UDExButtonSize.Large}
+        disabled={this.isPrevButtonDisabled}
+        class={btnClassName}
+        icon={slimArrowLeft}
+        design={this.buttonDesign}
+        tooltip={this.previousPageText}
+        onClick={this._prevButtonClick}
+        part="prev-button">
+      </UDExButton>
+      <UDExButton
+        size={UDExButtonSize.Large}
+        disabled={this.isNextButtonDisabled}
+        class={btnClassName}
+        icon={slimArrowRight}
+        design={this.buttonDesign}
+        tooltip={this.nextPageText}
+        onClick={this._nextButtonClick}
+        part="next-button">
+      </UDExButton>
+    </div>
+  );
+}

package/src/ContactItemTemplate.tsx

@@ -1,11 +1,12 @@
 import type ContactItem from "./ContactItem.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExLink from "./Link.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
 
 export default function ContactItemTemplate(this: ContactItem) {
   return (
     <div class="udex-contact-item">
-      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode="Decorative"></UI5Icon>}
+      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode={IconMode.Decorative}></UI5Icon>}
       <div class="udex-contact-item__content">
         {labelContent.call(this)}
         <p class="udex-contact-item__description"><slot></slot></p>

package/src/CountrySelector.ts

@@ -364,30 +364,25 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._dropdown.open = true;
     this._search.focus();
     this._search.value = key;
-    this.onValueSearch(key);
+    this.fireChangeSearch();
   }
 
   handleInputMouseDown(e: CustomEvent): void {
     e.preventDefault();
   }
 
-  onValueSearch(searchValue: string) {
-    this._shouldFilterItems = true;
-    this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-    this.fireDecoratorEvent("change-search", { value: searchValue });
-  }
-
   handleTriggerClick() {
     if (!this.isOpenerDisabled) {
       this._dropdown.open = !this._dropdown.open;
     }
   }
 
-  handleValueSearch(e: CustomEvent) {
-    this.onValueSearch(e.detail.value as string);
+  handleValueSearch(e: CustomEvent): void {
+    this.onSearch(e);
+    this.fireChangeSearch();
   }
 
-  handleSubmitSearch() {
+  handleSubmitSearch(): void {
     this.onSubmitSearch();
   }
 
@@ -428,6 +423,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     });
   }
 
+  fireChangeSearch(): void {
+    this.fireDecoratorEvent("change-search", { value: this._search.value });
+  }
+
   getItemTemplate(country: Country) {
     return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
   }

package/src/Divider.ts

@@ -1,10 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 
 // Template
-import DividerTemplate from "./generated/templates/DividerTemplate.lit.js";
+import DividerTemplate from "./DividerTemplate.js";
 
 // Styles
 import DividerCss from "./generated/themes/Divider.css.js";
@@ -14,7 +15,14 @@ import DividerCss from "./generated/themes/Divider.css.js";
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>udex-divider</code> component is a divider component used to separate content in a page.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-divider</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Divider.js";</code>
+ *
  *
  * @constructor
  * @extends UI5Element
@@ -23,7 +31,7 @@ import DividerCss from "./generated/themes/Divider.css.js";
  */
 @customElement({
   tag: "udex-divider",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: DividerCss,
   template: DividerTemplate,
 })
@@ -38,7 +46,7 @@ class UDExDivider extends UI5Element {
     accessibleRole: string = "separator";
 
   get effectiveAccRole() {
-    return this.accessibleRole.toLowerCase();
+    return this.accessibleRole.toLowerCase() as AriaRole;
   }
 }
 

package/src/DividerTemplate.tsx

@@ -0,0 +1,11 @@
+import type Divider from "./Divider.js";
+
+export default function DividerTemplate(this: Divider) {
+  return (
+    <div
+      class="udex-divider-wrapper"
+      role={this.effectiveAccRole}>
+      <span class="udex-divider"></span>
+    </div>
+  );
+}

package/src/Dropdown.ts

@@ -5,6 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 
 // Styles
 import DropdownCss from "./generated/themes/Dropdown.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 /**
  * @class
@@ -27,7 +28,7 @@ import DropdownCss from "./generated/themes/Dropdown.css.js";
 @customElement({
   tag: "udex-dropdown",
   renderer: jsxRenderer,
-  styles: [Popover.styles, DropdownCss],
+  styles: [Popover.styles, DropdownCss, getEffectiveScrollbarStyle()],
 })
 
 class UDExDropdown extends Popover {

package/src/FilterMenu.ts

@@ -21,6 +21,7 @@ import UDExSearch from "./Search.js";
 import UDExButton from "./Button.js";
 import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
+import { UDExPopoverPart } from "./types/SearchableListBase.js";
 import { Placement, HorizontalAlign } from "./types/Dropdown.js";
 import { UDExListMode } from "./types/List.js";
 import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
@@ -35,6 +36,7 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 // Styles
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 type UDExFilterMenuResultClickEventDetail = {
   selectedItems: Array<UDExListItemBase>,
@@ -65,7 +67,7 @@ type UDExFilterMenuResetClickEventDetail = {
 @customElement({
   tag: "udex-filter-menu",
   renderer: litRender,
-  styles: [FilterMenuCss, SearchableListCss],
+  styles: [FilterMenuCss, SearchableListCss, getEffectiveScrollbarStyle()],
   template: FilterMenuTemplate,
   dependencies: [
     Popover,
@@ -160,13 +162,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: Boolean })
     disableTargetOverlap?: boolean;
 
-  /**
-   * Allows control over the height.
-   * @public
-   */
-  @property({ type: String })
-    height?: string;
-
   /**
    * Determines on which side the component is placed at.
    *
@@ -433,15 +428,16 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
-  }
-
   _dropdownBeforeOpen(): void {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "addEventListener");
+      this._managePopupListeners(UDExPopoverPart.Footer, "addEventListener");
+    }
+
     if (this.height) {
-      const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
-      content.style.maxHeight = this.height;
+      this._setContentHeight();
     }
+
     this.fireDecoratorEvent("before-open");
   }
 
@@ -458,6 +454,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   _dropdownAfterClose(): void {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "removeEventListener");
+      this._managePopupListeners(UDExPopoverPart.Footer, "removeEventListener");
+    }
+
     this._open = false;
     this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireDecoratorEvent("after-close");
@@ -515,10 +516,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }
 
-  getPopover(): Popover {
-    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
-  }
-
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }

package/src/HeroBanner.hbs

@@ -38,6 +38,7 @@
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>
 
     {{#if hasAdditionalContent}}
+    <udex-media-player source="http://media.w3.org/2010/05/sintel/trailer.mp4"  aspect-ratio="16:9"></udex-media-player>
         <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
     {{/if}}
 {{/inline}}

package/src/List.ts

@@ -10,7 +10,6 @@ import {
   isHome,
   isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type UDExListItem from "./ListItem.js";
 import { UDExListStyleType, UDExListMode } from "./types/List.js";
 import type UDExListGroupHeader from "./ListGroupHeader.js";
@@ -29,6 +28,7 @@ import ListCss from "./generated/themes/List.css.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
 import type { UDExListWithFirstLetterFocus } from "./utils/ListWithFirstLetterFocus.js";
 import UDExFirstLetterFocusHandler from "./utils/ListWithFirstLetterFocus.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 export type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;
 

package/src/MastheadCountrySelector.hbs

@@ -1,8 +1,6 @@
 <div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
     {{#if _isActiveRegionOpen}}
-        <span class="udex-masthead-country-selector__title">
-            {{countryTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{countryTitle}}</span>
         {{#unless this.isSingleMode}}
             <udex-masthead-menu-item
                 class="udex-masthead-country-selector__region-back-item"
@@ -26,12 +24,13 @@
             non-interactive-submit-button
             show-submit-button>
         </udex-search>
+        <span aria-live="polite" aria-atomic="true" class="hidden">{{_accSearchResultInfo}}</span>
         <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
             {{#each _activeCountries}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
-                        @click="{{../fireEventCountryItemClick}}"
+                        @click="{{../handleCountryClick}}"
                         _country-code="{{this.countryCode}}"
                         url="{{this.url}}"
                         label="{{this.displayTitle}}"
@@ -43,19 +42,16 @@
             {{/each}}
         </ul>
     {{else}}
-        <span class="udex-masthead-country-selector__title">
-            {{regionTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
         <ul class="udex-masthead-country-selector__list" role="menu">
             {{#each regionsData}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         id="{{this._id}}"
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
                         aria-has-popup="true"
-                        accessible-role="button"
                         type="Button"
                         part="menu-item"
                         is-nav-item