@sapudex/web-components 0.143.0 → 0.172.0

package/src/MastheadMenu.ts

@@ -14,6 +14,8 @@ import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
 
+const rowClass = "udex-masthead-menu_with-one-column";
+
 export type Item = {
   title: string;
   url: string;
@@ -21,6 +23,7 @@ export type Item = {
 };
 
 export type SubMenuLinkItem = {
+  categoryId: string;
   category: string;
   url: string;
   items: Item[];
@@ -72,7 +75,7 @@ export type MenuItemClickEventDetail = {
       type: HTMLElement,
     },
     originalEvent: {
-      type: PointerEvent,
+      type: Event,
     },
   },
 })
@@ -84,7 +87,7 @@ class UDExMastheadMenu extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     menuTitle!: string;
 
   /**
@@ -96,12 +99,12 @@ class UDExMastheadMenu extends UI5Element {
   @property({ type: String, defaultValue: "[]" })
     subItems!: string;
 
-  handleKeyDown(e: KeyboardEvent) {
+  handleKeyDown(e: KeyboardEvent): void {
     this.handleUpArrow(e);
     this.handleDownArrow(e);
   }
 
-  handleUpArrow(e: KeyboardEvent) {
+  handleUpArrow(e: KeyboardEvent): void {
     if (isUp(e)) {
       e.preventDefault();
       const currentItem = e.target as UDExMastheadMenuItem;
@@ -109,7 +112,7 @@ class UDExMastheadMenu extends UI5Element {
     }
   }
 
-  handleDownArrow(e: KeyboardEvent) {
+  handleDownArrow(e: KeyboardEvent): void {
     if (isDown(e)) {
       e.preventDefault();
       const currentItem = e.target as UDExMastheadMenuItem;
@@ -117,7 +120,7 @@ class UDExMastheadMenu extends UI5Element {
     }
   }
 
-  handleMenuItemClick(e: Event) {
+  handleMenuItemClick(e: Event): void {
     this.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
       item: e.target as UDExMastheadMenuItem,
       originalEvent: e,
@@ -151,12 +154,21 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   get itemsList(): Array<MenuItem> {
-    return this.parseArrayFromString(this.subItems);
+    let id = 1;
+    const parsedItems: Array<MenuItem> = this.parseArrayFromString(this.subItems);
+    return parsedItems.map((mainItem: MenuItem) => {
+      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
+        category.categoryId = `${id++}`;
+        return category;
+      });
+
+      return mainItem;
+    });
   }
 
   get oneRowClass(): string {
     const hasOneColumn = this.itemsList.length === 1 && this.itemsList[0].subMenuLinkItems.length === 1;
-    return hasOneColumn ? "udex-masthead-menu_with-one-column" : "";
+    return hasOneColumn ? rowClass : "";
   }
 }
 

package/src/MastheadMenuItem.hbs

@@ -1,7 +1,15 @@
 {{#if isActive}}
+    {{#if externalLink}}
+        <span
+            id="new-win-desc"
+            class="udex-masthead-hidden-text">
+            {{openInNewWindowText}}
+        </span>
+    {{/if}}
     <a
         class="udex-masthead-menu-item {{rootClass}}"
-        role="{{accessibleRole}}"
+        aria-describedby="{{ariaDescribedby}}"
+        role="{{accessibleRoleText}}"
         href="{{url}}"
         part="menu-item-link"
         target="{{target}}">
@@ -30,7 +38,7 @@
             _id="{{id}}"
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
-            role="{{accessibleRole}}">
+            role="button">
             {{#if iconStart}}
                 {{>arrow-left}}
             {{/if}}

package/src/MastheadMenuItem.ts

@@ -4,8 +4,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
 
 import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
 
@@ -17,6 +20,11 @@ export enum ItemType {
   Button = "Button",
   Link = "Link"
 }
+
+export enum Target {
+  _blank = "_blank",
+  _self = "_self",
+}
 /**
  * @class
  *
@@ -36,6 +44,7 @@ export enum ItemType {
  */
 @customElement({
   tag: "udex-masthead-menu-item",
+  languageAware: true,
   renderer: litRender,
   styles: MastheadMenuItemCss,
   template: MastheadMenuItemTemplate,
@@ -128,6 +137,12 @@ class UDExMastheadMenuItem extends UI5Element {
   @property({ type: Boolean })
     iconEnd?: boolean;
 
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExMastheadMenuItem.i18nBundle = await getI18nBundle("@udex/web-components");
+  }
+
   onEnterDOM() {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
@@ -158,7 +173,7 @@ class UDExMastheadMenuItem extends UI5Element {
   }
 
   get target(): string {
-    return this.externalLink ? "_blank" : "_self";
+    return this.externalLink ? Target._blank : Target._self;
   }
 
   get lastWordOfLabel(): string | undefined {
@@ -169,6 +184,18 @@ class UDExMastheadMenuItem extends UI5Element {
     const leadingWords = this.label.split(" ").slice(0, -1).join(" ");
     return `${leadingWords} `;
   }
+
+  get openInNewWindowText(): string {
+    return UDExMastheadMenuItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
+  }
+
+  get ariaDescribedby(): string | null {
+    return this.externalLink ? "new-win-desc" : null;
+  }
+
+  get accessibleRoleText(): string | null {
+    return this.accessibleRole ? this.accessibleRole : null;
+  }
 }
 
 UDExMastheadMenuItem.define();

package/src/MastheadMobileMenu.ts

@@ -60,7 +60,7 @@ export type MobileItemClickEventDetail = {
       type: HTMLElement,
     },
     originalEvent: {
-      type: PointerEvent,
+      type: Event,
     },
   },
 })
@@ -236,7 +236,7 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   handleMenuMode() {
     if (this.isCategoriesOpen) {
-      if (this.isNoMenuItemsMode) {
+      if (this.isNoMenuItemsMode && this.hasExploreBtnSlot) {
         this.openCategories(this.exploreItem);
       }
 

package/src/MastheadProfileMenu.hbs

@@ -2,6 +2,7 @@
   <div class="udex-masthead-profile-menu__header">
     {{#if userData}}
       <udex-avatar
+        aria-hidden="true"
         size="L"
         initials="{{userData.avatarInitials}}">
         {{#if userData.avatarUrl}}

package/src/MastheadProfileMenu.ts

@@ -63,7 +63,7 @@ export type ProfileMenuItemClickEventDetail = {
 @event("logout", {
   detail: {
     originalEvent: {
-      type: PointerEvent,
+      type: Event,
     },
   },
 })
@@ -79,7 +79,7 @@ export type ProfileMenuItemClickEventDetail = {
       type: HTMLElement,
     },
     originalEvent: {
-      type: PointerEvent,
+      type: Event,
     },
   },
 })
@@ -119,6 +119,7 @@ class UDExMastheadProfileMenu extends UI5Element {
    */
   @slot({ type: Node, "default": false })
     message!: Array<Node>;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {

package/src/MastheadShell.hbs

@@ -9,14 +9,15 @@
         {{/if}}
 
         {{#if isMainMenuVisible}}
-            <div
-                class="udex-masthead-shell__main-menu"
-                data-menubar-item-expanded="true"
-                role="menubar">
-                {{#each menuItems}}
-                    {{>item}}
-                {{/each}}
-            </div>
+            <nav aria-label="{{mainNavigationAriaLabel}}">
+                <ul
+                    class="udex-masthead-shell__main-menu"
+                    aria-label="{{mainNavigationAriaLabel}}">
+                    {{#each menuItems}}
+                        {{>item}}
+                    {{/each}}
+                </ul>
+            </nav>
         {{/if}}
     </div>
 
@@ -30,6 +31,7 @@
                     class="udex-masthead-shell__close-search-btn"
                     size="Small"
                     icon="decline"
+                    tooltip="{{closeButtonAccessibleName}}"
                     accessible-name="{{closeButtonAccessibleName}}"
                     @click={{hideSearch}}>
                 </udex-control-button>
@@ -39,6 +41,17 @@
 
     {{#if isRightMenuVisible}}
         <div class="udex-masthead-shell__right-menu">
+            {{#if hasMobileMenuButtons}}
+                <udex-masthead-item
+                    @ui5-item-click="{{handleMobileMenuClick}}"
+                    class="udex-masthead-shell__menu-btn"
+                    accessible-role="button"
+                    icon="menu2"
+                    part="menu-open-btn"
+                    accessible-name="menu">
+                    <slot slot="dropdown" name="mobileMenu"></slot>
+                </udex-masthead-item>
+            {{/if}}
             {{#if hasExploreSAP}}
                 <div
                     class="udex-masthead-shell__explore"
@@ -73,15 +86,6 @@
                 </div>
             {{/if}}
             {{#if hasMobileMenuButtons}}
-                <udex-masthead-item
-                    @ui5-item-click="{{handleMobileMenuClick}}"
-                    class="udex-masthead-shell__menu-btn"
-                    accessible-role="button"
-                    icon="menu2"
-                    part="menu-open-btn"
-                    accessible-name="menu">
-                    <slot slot="dropdown" name="mobileMenu"></slot>
-                </udex-masthead-item>
                 <udex-masthead-item
                     @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
                     @ui5-item-click="{{handleMobileCloseClick}}"
@@ -98,9 +102,11 @@
 </div>
 
 {{#*inline "item"}}
-    <div @ui5-item-click="{{../setSelectedItem}}" class="udex-masthead-shell__item" role="menuitem">
+    <li
+        class="udex-masthead-shell__item"
+        @ui5-item-click="{{../setSelectedItem}}">
         <slot name="{{_individualSlot}}"></slot>
-    </div>
+    </li>
 {{/inline}}
 
 {{#*inline "logo"}}

package/src/MastheadShell.ts

@@ -13,6 +13,8 @@ import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/cart.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
@@ -23,6 +25,7 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
+import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
 
 const breakpointSizeM: number = 1279;
 /**
@@ -44,6 +47,7 @@ const breakpointSizeM: number = 1279;
  */
 @customElement({
   tag: "udex-masthead-shell",
+  languageAware: true,
   renderer: litRender,
   styles: MastheadShellCss,
   template: MastheadShellTemplate,
@@ -85,7 +89,7 @@ const breakpointSizeM: number = 1279;
 @event("logo-click", {
   detail: {
     originalEvent: {
-      type: PointerEvent,
+      type: Event,
     },
   },
 })
@@ -98,7 +102,7 @@ const breakpointSizeM: number = 1279;
 @event("site-label-click", {
   detail: {
     originalEvent: {
-      type: PointerEvent,
+      type: Event,
     },
   },
 })
@@ -289,6 +293,12 @@ class UDExMastheadShell extends UI5Element {
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
 
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExMastheadShell.i18nBundle = await getI18nBundle("@udex/web-components");
+  }
+
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
@@ -331,7 +341,7 @@ class UDExMastheadShell extends UI5Element {
     this._shouldHandleResize = true;
   }
 
-  handleKeyDown(e: KeyboardEvent) {
+  handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
     this.handleLeftArrow(e);
     this.handleRightArrow(e);
@@ -341,6 +351,9 @@ class UDExMastheadShell extends UI5Element {
     if (isLeft(e)) {
       const currentItem = e.target as UDExMastheadItem;
       if (this.isNavigationItem(currentItem)) {
+        if (currentItem.selected) {
+          currentItem.closeDropdown();
+        }
         this.focusPreviousMenuItem(currentItem);
       }
     }
@@ -350,6 +363,9 @@ class UDExMastheadShell extends UI5Element {
     if (isRight(e)) {
       const currentItem = e.target as UDExMastheadItem;
       if (this.isNavigationItem(currentItem)) {
+        if (currentItem.selected) {
+          currentItem.closeDropdown();
+        }
         this.focusNextMenuItem(currentItem);
       }
     }
@@ -399,15 +415,15 @@ class UDExMastheadShell extends UI5Element {
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
-    e.preventDefault();
     if (isSpace(e) || isEnter(e)) {
+      e.preventDefault();
       this.closeMobileMenu();
       this.mobileBtn?.focus();
     }
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
+    document.addEventListener("click", (e: Event) => {
       const el = e.target as UDExMastheadItem;
       const isMobile = window.innerWidth < 1280;
       const isDropdownSlot = el.getAttribute("slot") === "dropdown";
@@ -565,6 +581,10 @@ class UDExMastheadShell extends UI5Element {
   get isSearchVisible(): boolean {
     return this.showSearchByDefault || this._isSearchOpened;
   }
+
+  get mainNavigationAriaLabel(): string {
+    return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
+  }
 }
 
 UDExMastheadShell.define();

package/src/Pagination.hbs

@@ -1,6 +1,6 @@
 {{#if pages}}
 <nav aria-label="pagination" class="{{paginationClass}}">
-    <ul class="udex-pagination__list">      
+    <ul class="udex-pagination__list" role="navigation" aria-label="{{paginationAccessibleName}}">      
         {{#if absoluteNavigation}}
         <li class="udex-pagination__item--first udex-pagination__item">
             <udex-button
@@ -31,6 +31,7 @@
                         aria-label="{{accessibleName}}"
                         @click="{{../onPageClick}}" 
                         ?active="{{active}}"
+                        aria-current="{{ariaCurrent}}"
                         index="{{index}}">
                         <span class="udex-pagination__page--value">{{value}}</span>
                     </a>
@@ -38,7 +39,7 @@
             {{/each}}
         {{/if}}
         {{#if typeShort}}
-            <li class="udex-pagination__item udex-pagination__item--short" tabindex="0" aria-label="{{paginationShortAccessibleName}}">
+            <li class="udex-pagination__item udex-pagination__item--short" tabindex="-1" aria-label="{{paginationShortAccessibleName}}">
                 <span class="udex-pagination__item--short-value">{{shortTextStart}}</span>
                 <span class="udex-pagination__item--short-separator">{{shortTextSeparator}}</span>
                 <span class="udex-pagination__item--short-value">{{shortTextEnd}}</span>