@sapudex/web-components 2.40.0 → 2.41.0

package/dist/vscode.html-custom-data.json

@@ -516,11 +516,6 @@
           "name": "show-search-input",
           "description": "Defines if the search input is visible.",
           "values": []
-        },
-        {
-          "name": "tab-navigation-enabled",
-          "description": "Enables tab navigation for the list.",
-          "values": []
         }
       ],
       "references": []
@@ -914,11 +909,6 @@
           "description": "Defines if the search input is visible.",
           "values": []
         },
-        {
-          "name": "tab-navigation-enabled",
-          "description": "Enables tab navigation for the list.",
-          "values": []
-        },
         {
           "name": "trigger-accessible-role",
           "description": "Allows setting a custom role for dropdown trigger.",
@@ -1672,11 +1662,6 @@
             { "name": "RadioGroup" }
           ]
         },
-        {
-          "name": "tab-navigation-enabled",
-          "description": "Enables tab navigation for the list.",
-          "values": []
-        },
         {
           "name": "type",
           "description": "Defines the type of the item.",
@@ -2282,6 +2267,11 @@
           "description": "Defines title of the countries menu",
           "values": []
         },
+        {
+          "name": "hide-search",
+          "description": "Hides the search field in the country list view.",
+          "values": []
+        },
         {
           "name": "language-voice",
           "description": "Defines the language voice of the search",
@@ -2883,6 +2873,11 @@
           "description": "Defines the inner stored displayonly state.",
           "values": []
         },
+        {
+          "name": "hide-button-tooltip",
+          "description": "Defines the tooltip for the hide password button.",
+          "values": []
+        },
         {
           "name": "label",
           "description": "Defines label text for the input field.",
@@ -3396,11 +3391,6 @@
           "name": "show-search-input",
           "description": "Defines if the search input is visible.",
           "values": []
-        },
-        {
-          "name": "tab-navigation-enabled",
-          "description": "Enables tab navigation for the list.",
-          "values": []
         }
       ],
       "references": []
@@ -3694,11 +3684,6 @@
           "description": "Defines if the search input is visible.",
           "values": []
         },
-        {
-          "name": "tab-navigation-enabled",
-          "description": "Enables tab navigation for the list.",
-          "values": []
-        },
         {
           "name": "tooltip-placement",
           "description": "Determines on which side of the component the Tooltip is displayed.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.40.0",
+  "version": "2.41.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -971,11 +971,6 @@
               "name": "show-search-input",
               "description": "Defines if the search input is visible.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "tab-navigation-enabled",
-              "description": "Enables tab navigation for the list.",
-              "value": { "type": "boolean | undefined", "default": "\"\"" }
             }
           ],
           "slots": [
@@ -1085,11 +1080,6 @@
                 "name": "show-search-input",
                 "description": "Defines if the search input is visible.",
                 "value": { "type": "boolean" }
-              },
-              {
-                "name": "tab-navigation-enabled",
-                "description": "Enables tab navigation for the list.",
-                "value": { "type": "boolean | undefined" }
               }
             ],
             "events": [
@@ -1789,11 +1779,6 @@
               "description": "Defines if the search input is visible.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "tab-navigation-enabled",
-              "description": "Enables tab navigation for the list.",
-              "value": { "type": "boolean | undefined", "default": "\"\"" }
-            },
             {
               "name": "trigger-accessible-role",
               "description": "Allows setting a custom role for dropdown trigger.",
@@ -1985,11 +1970,6 @@
                 "description": "Defines if the search input is visible.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "tab-navigation-enabled",
-                "description": "Enables tab navigation for the list.",
-                "value": { "type": "boolean | undefined" }
-              },
               {
                 "name": "trigger-accessible-role",
                 "description": "Allows setting a custom role for dropdown trigger.",
@@ -3749,11 +3729,6 @@
                 "default": "\"SingleSelect\""
               }
             },
-            {
-              "name": "tab-navigation-enabled",
-              "description": "Enables tab navigation for the list.",
-              "value": { "type": "boolean | undefined", "default": "\"\"" }
-            },
             {
               "name": "type",
               "description": "Defines the type of the item.",
@@ -3811,11 +3786,6 @@
                   "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\""
                 }
               },
-              {
-                "name": "tab-navigation-enabled",
-                "description": "Enables tab navigation for the list.",
-                "value": { "type": "boolean | undefined" }
-              },
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
@@ -4683,6 +4653,11 @@
               "description": "Defines title of the countries menu",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "hide-search",
+              "description": "Hides the search field in the country list view.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "language-voice",
               "description": "Defines the language voice of the search",
@@ -4740,6 +4715,11 @@
                 "description": "Defines title of the countries menu",
                 "value": { "type": "string" }
               },
+              {
+                "name": "hide-search",
+                "description": "Hides the search field in the country list view.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "language-voice",
                 "description": "Defines the language voice of the search",
@@ -6216,6 +6196,11 @@
               "description": "Defines the inner stored displayonly state.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "hide-button-tooltip",
+              "description": "Defines the tooltip for the hide password button.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "label",
               "description": "Defines label text for the input field.",
@@ -6315,6 +6300,11 @@
                 "description": "Defines the inner stored displayonly state.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "hide-button-tooltip",
+                "description": "Defines the tooltip for the hide password button.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "label",
                 "description": "Defines label text for the input field.",
@@ -7767,11 +7757,6 @@
               "description": "Defines if the search input is visible.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "tab-navigation-enabled",
-              "description": "Enables tab navigation for the list.",
-              "value": { "type": "boolean | undefined", "default": "\"\"" }
-            },
             {
               "name": "tooltip-placement",
               "description": "Determines on which side of the component the Tooltip is displayed.",
@@ -7887,11 +7872,6 @@
                 "description": "Defines if the search input is visible.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "tab-navigation-enabled",
-                "description": "Enables tab navigation for the list.",
-                "value": { "type": "boolean | undefined" }
-              },
               {
                 "name": "tooltip-placement",
                 "description": "Determines on which side of the component the Tooltip is displayed.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.40.0",
+  "version": "2.41.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/Dropdown.ts

@@ -7,6 +7,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import DropdownCss from "./generated/themes/Dropdown.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
+type HTMLElementWithDisabled = HTMLElement & { disabled?: boolean };
+
 /**
  * @class
  *
@@ -59,6 +61,66 @@ class UDExDropdown extends Popover {
       content.style.maxHeight = this.height;
     }
   }
+
+  // Shift+Tab from first focusable element: close and return focus to opener
+  forwardToLast(): Promise<void> {
+    this.closePopup(false, false, true);
+    const openerEl = this.getOpenerHTMLElement(this.opener);
+    if (openerEl) {
+      openerEl.focus();
+    }
+    return Promise.resolve();
+  }
+
+  // Tab from last focusable element: close and move focus to next element after opener
+  forwardToFirst(): Promise<void> {
+    const openerHost = this._getOpenerHost();
+    this.closePopup(false, false, true);
+    if (openerHost) {
+      this._moveFocusAfter(openerHost);
+    }
+    return Promise.resolve();
+  }
+
+  private _getOpenerHost(): HTMLElement | null {
+    const opener = this.opener;
+    if (!opener) { return null; }
+    if (opener instanceof HTMLElement) { return opener; }
+    const root = this.getRootNode() as Document | ShadowRoot;
+    return (root as Document).getElementById?.(opener) ?? document.getElementById(opener);
+  }
+
+  private _moveFocusAfter(from: Element): void {
+    let node: Element | null = from;
+    while (node && node !== document.documentElement) {
+      let sibling = node.nextElementSibling;
+      while (sibling) {
+        const focusable = this._firstFocusableIn(sibling as HTMLElement);
+        if (focusable) {
+          focusable.focus();
+          return;
+        }
+        sibling = sibling.nextElementSibling;
+      }
+      node = node.parentElement;
+    }
+  }
+
+  private _firstFocusableIn(el: HTMLElement): HTMLElement | null {
+    if (!el) { return null; }
+    if (
+      el.tabIndex >= 0
+      && !el.hidden
+      && !(el as HTMLElementWithDisabled).disabled
+      && (!!el.offsetParent || el.matches("body"))
+    ) {
+      return el;
+    }
+    return Array.from(el.children).reduce<HTMLElement | null>(
+      (found, child) => found ?? this._firstFocusableIn(child as HTMLElement),
+      null,
+    );
+  }
 }
 
 UDExDropdown.define();

package/src/List.ts

@@ -146,12 +146,7 @@ class UDExList extends UI5Element {
   @property({ type: String })
     itemIcon: string = "";
 
-  /**
-   * Enables tab navigation for the list.
-   *
-   * @default ""
-   * @public
-   */
+  /** @deprecated Tab keyboard navigation is no longer allowed. */
   @property({ type: Boolean })
     tabNavigationEnabled?: boolean;
 
@@ -190,10 +185,6 @@ class UDExList extends UI5Element {
   }
 
   handleKeyDown(e: KeyboardEvent): void {
-    if (this.tabNavigationEnabled) {
-      return;
-    }
-
     if (isRight(e)) {
       this.handleArrowRight(e);
     }
@@ -398,10 +389,8 @@ class UDExList extends UI5Element {
       clickedItem.selected = true;
     }
 
-    if (!this.tabNavigationEnabled) {
-      this.resetTabIndexes();
-      clickedItem._tabIndex = "0";
-    }
+    this.resetTabIndexes();
+    clickedItem._tabIndex = "0";
 
     this.fireDecoratorEvent("selection-change", {
       listItems: this.getItemsFromList(),
@@ -487,10 +476,6 @@ class UDExList extends UI5Element {
   }
 
   getTabIndex(index: number, item: UDExListItemBase): string {
-    if (this.tabNavigationEnabled) {
-      return "0";
-    }
-
     const isFirstItem = this.modeSelected && index === 0;
     const isFirstItemInGroupList = this.isGroupList && index === 1;
     const listGroupHeader = item.closest("[udex-list-group-header]") as UDExListGroupHeader;

package/src/MastheadCountrySelector.hbs

@@ -14,6 +14,7 @@
                 icon-start>
             </udex-masthead-menu-item>
         {{/unless}}
+        {{#unless hideSearch}}
         <udex-search
             class="udex-masthead-country-selector__search"
             @ui5-handle-value-search="{{handleSearch}}"
@@ -27,6 +28,7 @@
             show-submit-button>
         </udex-search>
         <span aria-live="polite" aria-atomic="true" class="hidden">{{_accSearchResultInfo}}</span>
+        {{/unless}}
         <div class="udex-masthead-country-selector__list-container">
             <div class="udex-masthead-country-selector__list-wrap" @scroll={{this.handleCountryListShadowVisible}}>
                 <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">

package/src/MastheadCountrySelector.ts

@@ -192,6 +192,15 @@ class UDExMastheadCountrySelector extends UI5Element {
   @property({ type: Boolean })
     showSearchVoiceButton!: boolean;
 
+  /**
+   * Hides the search field in the country list view.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    hideSearch!: boolean;
+
   /**
    * Defines the language voice of the search
    *

package/src/MastheadMobileMenu.hbs

@@ -243,6 +243,7 @@
                         @click="{{../handleMobileCategoryItemEvent}}"
                         label="{{this.title}}"
                         url="{{this.url}}"
+                        has-border
                         third-level>
                     </udex-masthead-menu-item>
                 </li>

package/src/PasswordField.ts

@@ -8,6 +8,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
 import UDExValueState from "./types/common.js";
 import PasswordFieldTemplate from "./PasswordFieldTemplate.js";
+import { SHOW_PASSWORD, HIDE_PASSWORD } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 export enum UDExInputType {
   Password = "Password",
@@ -233,6 +235,16 @@ class UDExPasswordField extends UI5Element {
   @property({ type: String })
     showButtonTooltip!: string;
 
+  /**
+   * Defines the tooltip for the hide password button.
+   *
+   * @default ""
+   * @public
+   */
+
+  @property({ type: String })
+    hideButtonTooltip!: string;
+
   /**
    * Defines the inner stored readonly state.
    *
@@ -309,6 +321,18 @@ class UDExPasswordField extends UI5Element {
   get iconButton(): string | undefined {
     return this.renderShowButton ? this.icon : undefined;
   }
+
+  get activeButtonTooltip(): string {
+    return this.passwordVisible ? this.hideButtonTooltipText : this.showButtonTooltipText;
+  }
+
+  get hideButtonTooltipText(): string {
+    return this.hideButtonTooltip || translate(UDExPasswordField, HIDE_PASSWORD);
+  }
+
+  get showButtonTooltipText(): string {
+    return this.showButtonTooltip || translate(UDExPasswordField, SHOW_PASSWORD);
+  }
 }
 
 UDExPasswordField.define();

package/src/PasswordFieldTemplate.tsx

@@ -19,8 +19,8 @@ export default function PasswordFieldTemplate(this: UDExPasswordField) {
         supporting-text={this.supportingText}
         accessible-name={this.accessibleName}
         accessible-name-ref={this.accessibleNameRef}
-        accessible-icon-name={this.showButtonTooltip}
-        show-button-tooltip={this.showButtonTooltip}
+        accessible-icon-name={this.activeButtonTooltip}
+        button-tooltip={this.activeButtonTooltip}
         onui5-input={this.handleInput}
         onui5-change={this.handleChange}
         onui5-blur={this.handleBlur}

package/src/Search.ts

@@ -1005,7 +1005,7 @@ class UDExSearch extends UI5Element {
     e.stopPropagation();
     this.handleEnterKey(e);
     this.handleTabKey(e);
-    this.handleShiftTabKey(e);
+    this.handleDownKey(e);
     this.handleEscapeKey(e);
     this.fireDecoratorEvent("search-keydown", { e });
   };
@@ -1022,14 +1022,21 @@ class UDExSearch extends UI5Element {
   }
 
   handleTabKey(e: KeyboardEvent) {
-    if (isTabNext(e) && this.open) {
-      this.Suggestion?.onTab(e);
+    if (!this.open || this.openSuggestionPopup) {
+      return;
+    }
+    if (isTabNext(e) || isTabPrevious(e)) {
+      this.onClosePopover();
     }
   }
 
-  handleShiftTabKey(e: KeyboardEvent) {
-    if (isTabPrevious(e) && this.open) {
-      this.Suggestion?.onShiftTab(e);
+  handleDownKey(e: KeyboardEvent) {
+    if (isDown(e) && this.showSuggestedPopover) {
+      e.preventDefault();
+      if (!this.open) {
+        this.onOpenPopover();
+      }
+      this.Suggestion?.onKeyDown(e);
     }
   }
 
@@ -1104,9 +1111,6 @@ class UDExSearch extends UI5Element {
   }
 
   handleKeyDownReset(e: KeyboardEvent) {
-    if (isTabPrevious(e) && this.open) {
-      this.Suggestion?.handlePrevTabReset(e);
-    }
     if (isEnter(e) || isSpace(e)) {
       e.preventDefault();
       e.stopPropagation();

package/src/SearchTemplate.tsx

@@ -232,7 +232,6 @@ function renderSearchSuggestionPopover(this: UDExSearch) {
       style={this.popoverStyles}
       id={this.getSuggestionsPopoverId}
       aria-orientation="vertical"
-      accessible-role="Dialog"
       onKeyDown={this.handleKeyPressSuggestionList}
       accessible-name={this.suggestionsAccessibleName}
     >
@@ -277,7 +276,6 @@ function renderSearchSuggestionPopoverResultsSuggestedList(this: UDExSearch) {
       <div class="udex-search-suggestions__list"
         role="listbox"
         aria-labelledby="suggested-heading"
-        tabindex={0}
         onKeyDown={this.handleKeyDownPopover}
       >
         {
@@ -317,7 +315,6 @@ function renderSearchSuggestionPopoverResultsRecommendedList(this: UDExSearch) {
       <div class="udex-search-suggestions__list"
         role="listbox"
         aria-labelledby="recommended-heading"
-        tabindex={0}
         onKeyDown={this.handleKeyDownPopover}
       >
         {

package/src/SearchableListBase.ts

@@ -125,12 +125,7 @@ export type UDExSearchableListBaseEvents = {
 
 class UDExSearchableListBase extends UI5Element {
   eventDetails!: UDExSearchableListBaseEvents;
-  /**
-   * Enables tab navigation for the list.
-   *
-   * @default ""
-   * @public
-   */
+  /** @deprecated Tab keyboard navigation is no longer allowed. */
   @property({ type: Boolean })
     tabNavigationEnabled?: boolean;
 

package/src/SearchableListBaseTemplate.tsx

@@ -50,7 +50,6 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           role={this.roleForGroupList as AriaRole}
           accessible-role={this.accessibleRoleForList}
           class="udex-filter-menu__list"
-          tab-navigation-enabled={this.tabNavigationEnabled}
           controlled={this.isControlled}
           mode={this.mode}>
           {this._filteredItems.map((processedItem, index) => (