@sapudex/web-components 0.114.2 → 0.127.6

package/src/List.ts

@@ -9,6 +9,8 @@ import {
   isDown,
   isHome,
   isEnd,
+  isEnter,
+  isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -154,25 +156,7 @@ class UDExList extends UI5Element {
 
   handleItemPress(e: CustomEvent) {
     const clickedItem: UDExListItemBase = e.detail.item;
-
-    if (this.modeSingleSelect && !this.controlled) {
-      this.revertSelectedItems(this.getSelectedItems());
-      clickedItem.selected = true;
-    }
-
-    if (this.modeRadioGroup && !this.controlled) {
-      const groupHeader = clickedItem.parentElement as UDExListGroupHeaderBase;
-      const groupItems = groupHeader.getItems() as Array<UDExListItemBase>;
-      this.revertSelectedItems(groupItems);
-
-      clickedItem.selected = true;
-    }
-
-    this.fireEvent("selection-change", {
-      listItems: this.getItemsFromList(),
-      selectedItems: this.getSelectedItems(),
-      item: clickedItem,
-    });
+    this.onItemPress(clickedItem);
   }
 
   handleKeyDown(e: KeyboardEvent) {
@@ -180,6 +164,15 @@ class UDExList extends UI5Element {
     this.handleDownArrow(e);
     this.handleHomeKey(e);
     this.handleEndKey(e);
+    this.handleEnterOrSpace(e);
+  }
+
+  handleEnterOrSpace(e: KeyboardEvent) {
+    if (isEnter(e) || isSpace(e)) {
+      e.preventDefault();
+      const clickedItem = e.target as UDExListItemBase;
+      this.onItemPress(clickedItem);
+    }
   }
 
   handleUpArrow(e: KeyboardEvent) {
@@ -193,20 +186,28 @@ class UDExList extends UI5Element {
       const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;
 
       if (nonInteractiveHeader && previousSelectIndex === 0) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, lastItemIndex);
         items[lastItemIndex].focus();
         return;
       }
 
       if (nonInteractiveHeader) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, previousSelectIndex - 1);
         items[previousSelectIndex - 1].focus();
         return;
       }
 
       if (isHeaderItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, previousSelectIndex);
         this.focusHeader(items[previousSelectIndex]);
         return;
       }
 
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, previousSelectIndex);
       items[previousSelectIndex].focus();
     }
   }
@@ -221,15 +222,21 @@ class UDExList extends UI5Element {
       const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;
 
       if (nonInteractiveHeader) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, nextSelectIndex + 1);
         items[nextSelectIndex + 1].focus();
         return;
       }
 
       if (isHeaderItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, nextSelectIndex);
         this.focusHeader(items[nextSelectIndex]);
         return;
       }
 
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, nextSelectIndex);
       items[nextSelectIndex].focus();
     }
   }
@@ -238,20 +245,27 @@ class UDExList extends UI5Element {
     if (isHome(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
+      const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
       const firstItem = items[0];
       const isHeaderItem = firstItem.isGroup;
       const nonInteractiveItem = firstItem.nonInteractive;
 
       if (nonInteractiveItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, 1);
         items[1].focus();
         return;
       }
 
       if (isHeaderItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, 0);
         this.focusHeader(items[0]);
         return;
       }
 
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, 0);
       items[0].focus();
     }
   }
@@ -260,10 +274,37 @@ class UDExList extends UI5Element {
     if (isEnd(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
+      const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
+
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, items.length - 1);
       items[items.length - 1].focus();
     }
   }
 
+  onItemPress(clickedItem :UDExListItemBase) {
+    if (this.modeSingleSelect && !this.controlled) {
+      this.revertSelectedItems(this.getSelectedItems());
+      clickedItem.selected = true;
+    }
+
+    if (this.modeRadioGroup && !this.controlled) {
+      const groupHeader = clickedItem.parentElement as UDExListGroupHeaderBase;
+      const groupItems = groupHeader.getItems() as Array<UDExListItemBase>;
+      this.revertSelectedItems(groupItems);
+      clickedItem.selected = true;
+    }
+
+    this.resetTabIndexes();
+    clickedItem._tabIndex = "0";
+
+    this.fireEvent("selection-change", {
+      listItems: this.getItemsFromList(),
+      selectedItems: this.getSelectedItems(),
+      item: clickedItem,
+    });
+  }
+
   revertSelectedItems(items: Array<UDExListItemBase>) {
     items.forEach((item: UDExListItemBase) => {
       if (!item.disabled) {
@@ -277,6 +318,14 @@ class UDExList extends UI5Element {
     header.focus();
   }
 
+  unsetTabIndexByIndex(items: UDExListItemBase[], index: number) {
+    items[index]._tabIndex = "-1";
+  }
+
+  setTabIndexByIndex(items: UDExListItemBase[], index: number) {
+    items[index]._tabIndex = "0";
+  }
+
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }
@@ -311,15 +360,37 @@ class UDExList extends UI5Element {
   }
 
   prepareListItemsMode() {
-    const slottedItems = this.getItemsFromList();
-    slottedItems.forEach(item => {
+    this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
       item.type = this.type;
       item._icon = this.itemIcon;
+      item._tabIndex = this.getTabIndex(index, item);
     });
   }
 
+  getTabIndex(index: number, item: UDExListItemBase): string {
+    if ((item.modeSingleSelect || this.modeRadioGroup) && this.isGroupList && index === 1) {
+      return "0";
+    }
+
+    if (this.modeSelected && index === 0) {
+      return "0";
+    }
+
+    return "-1";
+  }
+
+  resetTabIndexes() {
+    this.getItemsFromList().forEach(item => {
+      item._tabIndex = "-1";
+    });
+  }
+
+  get isGroupList(): boolean {
+    return this.getItemsFromList().some(item => item.isGroup);
+  }
+
   get ariaLabelModeText(): string {
     if (this.modeSingleSelect || this.modeRadioGroup) {
       return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);

package/src/ListGroupHeader.hbs

@@ -1,6 +1,8 @@
 <li
     part="item"
-    class="udex-list__group">
+    class="udex-list__group"
+    role="group"
+    aria-labelledby="group-heading">
     <ul
         class="udex-list__group-list"
         @ui5-item-press="{{getHandleGroupItemsClick}}">
@@ -15,7 +17,7 @@
 
 {{#*inline "multi-or-radio-group-header"}}
     {{#if isNonActiveHeader}}
-        <header class="udex-list__inactive-header" role="presentation">
+        <header id="group-heading" class="udex-list__inactive-header">
             <span class="udex-list__header-title">{{label}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text ">{{supportingText}}</span>
@@ -23,11 +25,13 @@
         </header>
     {{else}}
         <udex-list-item
+            id="group-heading"
             _additional-class-name="{{_additionalClassName}}"
             ?selected="{{selected}}"
+            _tab-index="{{_effectiveTabIndex}}"
             ?indeterminate="{{indeterminate}}"
             part="group-item"
-            role="listitem"
+            role="none"
             class="{{className}}"
             mode="{{mode}}"
             ?controlled="{{controlled}}"
@@ -55,8 +59,8 @@
                 part="icon">
             </ui5-icon>
         {{/if}}
-        <div class="udex-list__header" role="presentation">
-            <span class="udex-list__header-title">{{label}}</span>
+        <div class="udex-list__header">
+            <span id="group-heading" class="udex-list__header-title">{{label}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
             {{/if}}

package/src/ListItem.hbs

@@ -2,7 +2,7 @@
     <li
         part="item"
         role="{{roleItem}}"
-        tabindex="{{_tabIndex}}"
+        tabindex="{{_effectiveTabIndex}}"
         aria-disabled="{{_ariaDisabled}}"
         aria-labelledby="{{_accessibleNameRef}}"
         class="{{className}}"
@@ -14,6 +14,7 @@
         @focusin="{{handleFocusIn}}"
         @focusout="{{handleFocusOut}}"
         aria-selected="{{selected}}"
+        aria-current="{{selected}}"
         ?divider="{{divider}}"
         _id="{{this._id}}">
         {{#if modeMultiSelect}}

package/src/ListItem.ts

@@ -371,13 +371,6 @@ class UDExListItem extends UDExListItemBase {
     return this.disabled ? true : undefined;
   }
 
-  get _tabIndex() {
-    if (this.disabled) {
-      return -1;
-    }
-    return 0;
-  }
-
   get modeSingleContent() {
     return this.mode === ListMode.SingleContent;
   }

package/src/ListItemBase.ts

@@ -111,6 +111,16 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String, defaultValue: "" })
     _icon?: string;
 
+  @property({ type: String })
+    _tabIndex!: number | string;
+
+  get _effectiveTabIndex() {
+    if (this.disabled) {
+      return -1;
+    }
+    return this._tabIndex;
+  }
+
   get numberOfItem() {
     return [...this.parentNode!.children].indexOf(this) + 1;
   }
@@ -127,6 +137,10 @@ class UDExListItemBase extends UI5Element {
     return this.mode === ListMode.MultiSelect;
   }
 
+  get modeSingleSelect() {
+    return this.mode === ListMode.SingleSelect;
+  }
+
   get modeMultiSelectOrRadioGroup() {
     return this.modeMultiSelect || this.modeRadioGroup;
   }

package/src/ListSelectAll.hbs

@@ -6,6 +6,7 @@
           class="{{groupListClassName}}"
           @ui5-item-press="{{handleSelectAllGroupItemsPress}}">
           <udex-list-item
+              _tab-index="{{_effectiveTabIndex}}"
               role="list"
               _additional-class-name="{{additionalClassName}}"
               class="{{className}}"

package/src/MastheadItem.hbs

@@ -7,7 +7,7 @@
         target="{{target}}"
         href="{{href}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleName}}">
+        aria-label="{{accessibleLabel}}">
         {{> content}}
     </a>
 {{else if isProfileBtn}}
@@ -17,7 +17,7 @@
         aria-expanded="{{selected}}"
         aria-labelledby="{{ariaLabelledBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
-        aria-label="{{accessibleName}}"
+        aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @click="{{onClick}}">
         {{> content}}
@@ -33,7 +33,7 @@
         aria-expanded="{{selected}}"
         aria-labelledby="{{ariaLabelledBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
-        aria-label="{{accessibleName}}"
+        aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @click="{{onClick}}">
         {{> content}}

package/src/MastheadItem.ts

@@ -18,6 +18,8 @@ import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
+const breakpointSizeM: number = 1279;
+
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -164,7 +166,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: String, defaultValue: "" })
-    iconAlt?: string = "";
+    iconAlt?: string;
 
   /**
    * Hide active border for item
@@ -369,20 +371,24 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;
   }
 
-  get isProfileBtn():boolean {
+  get isProfileBtn(): boolean {
     return this.getAttribute("slot") === "profile";
   }
 
-  get isExploreBtn():boolean {
+  get isExploreBtn(): boolean {
     return this.getAttribute("slot") === "exploreSAP";
   }
 
+  get accessibleLabel(): string {
+    return this.accessibleName || this.innerText;
+  }
+
   get isMenuItem(): boolean {
     return true;
   }
 
   get isMobile(): boolean {
-    return window.innerWidth < 1279;
+    return window.innerWidth < breakpointSizeM;
   }
 }
 

package/src/MastheadShell.hbs

@@ -23,7 +23,10 @@
     {{#if _isSearchVisible}}
         <div class="udex-masthead-shell__search-container">
             <slot name="search"></slot>
+        </div>
+        <div class="udex-masthead-shell__btn-holder">
             <udex-control-button
+                class="udex-masthead-shell__close-search-btn"
                 size="Small"
                 icon="decline"
                 accessible-name="{{closeButtonAccessibleName}}"
@@ -94,6 +97,7 @@
         <a
             role="link"
             href="{{homeUrl}}"
+            title="{{logoTitle}}"
             target="_self"
             aria-label="{{homepageAriaLabel}}"
             class="udex-masthead-shell__logo udex-masthead-shell__logo--link">

package/src/MastheadShell.ts

@@ -23,6 +23,7 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
 const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
+const breakpointSizeM: number = 1279;
 /**
  * @class
  *
@@ -173,6 +174,15 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: String, defaultValue: "" })
     logoUrl!: string;
 
+  /**
+   * Defines the Logo default title
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    logoTitle!: string;
+
   /**
    * Defines a site label. It will be displayed next to a logo.
    *
@@ -267,6 +277,10 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
+    if (this.isMobileView) {
+      this._isSearchVisible = false;
+    }
+
     if (this._shouldHandleResize) {
       this._mobileMenu?.showFirstLevelMenu();
       this.removeOverflowBody();
@@ -478,6 +492,10 @@ class UDExMastheadShell extends UI5Element {
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
+
+  get isMobileView(): boolean {
+    return window.innerWidth <= breakpointSizeM;
+  }
 }
 
 UDExMastheadShell.define();

package/src/MessageStrip.ts

@@ -189,7 +189,7 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get _closeButtonText() {
-    return this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON);
+    return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
   }
 
   get iconProvided() {

package/src/Pagination.hbs

@@ -17,8 +17,9 @@
             <udex-button
             ?disabled="{{prevButtonDisbled}}"
             accessible-name="{{previousPageAccessibleName}}"
+            tooltip="{{previousBtnTooltip}}"
             size="Large"
-            icon="nav-back"
+            icon="navigation-left-arrow"
             design="Tertiary"
             @click="{{setPrevPage}}"
             ></udex-button>
@@ -45,7 +46,8 @@
         {{/if}}
         <li class="udex-pagination__item--next udex-pagination__item">
             <udex-button
-            ?disabled="{{nextButtonDisbled}}" 
+            ?disabled="{{nextButtonDisbled}}"
+            tooltip="{{nextBtnTooltip}}"
             accessible-name="{{nextPageAccessibleName}}"
             size="Large"
             icon="navigation-right-arrow"

package/src/Pagination.ts

@@ -6,6 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   OF,
   PAGINATION_PAGE,
@@ -141,6 +142,12 @@ class UDExPagination extends UI5Element {
     this._mobileDisplayNumber = 5;
   }
 
+  onEnterDOM() {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
   get nextButtonDisbled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
@@ -209,11 +216,19 @@ class UDExPagination extends UI5Element {
     return `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
+  get previousBtnTooltip(): string {
+    return !this.prevButtonDisbled ? `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}` : "";
+  }
+
   get nextPageAccessibleName(): string {
     if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(NEXT_PAGE); }
     return `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
+  get nextBtnTooltip(): string {
+    return !this.nextButtonDisbled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
+  }
+
   get pagination(): Page[] {
     return this.setupPages(this.pages);
   }
@@ -312,8 +327,8 @@ class UDExPagination extends UI5Element {
 
     for (let index = startIndex; index < endIndex && index < pages; index++) {
       const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? ` 
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : ` 
+      const accessibleName = isCurrent ? `
+      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
       ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
       pagesCollection.push({
         index,
@@ -330,8 +345,8 @@ class UDExPagination extends UI5Element {
     const pagesCollection = [];
     for (let index = 0; index < pages; index++) {
       const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? ` 
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : ` 
+      const accessibleName = isCurrent ? `
+      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
       ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
       pagesCollection.push({
         index,

package/src/PasswordField.hbs

@@ -1,5 +1,4 @@
-<div class="udex-password-field">
-  <udex-text-field
+<udex-text-field
     type={{type}}
     value="{{value}}"
     label="{{passwordLabel}}"
@@ -11,18 +10,8 @@
     supporting-text="{{supportingText}}"
     accessible-name="{{accessibleName}}"
     accessible-name-ref="{{accessibleNameRef}}"
-  ></udex-text-field>
-  {{#if renderShowButton}}
-    <udex-control-button
-      ?disabled="{{disabled}}"
-      id="show-button"
-      design="Default"
-      class="udex-password-field__button udex-password-field__button_show"
-      icon={{icon}}
-      size="Large"
-      accessible-name="{{showButtonTooltip}}"
-      tooltip={{showButtonTooltip}}
-      @click="{{handleShowPassword}}"
-      ></udex-control-button>
-  {{/if}}
-</div>
+    accessible-icon-name="{{showButtonTooltip}}"
+    show-button-tooltip="{{showButtonTooltip}}"
+    @ui5-click-icon="{{handleShowPassword}}"
+    icon="{{iconButton}}"
+></udex-text-field>