@sapudex/web-components 0.114.2 → 0.117.1

package/src/FilterMenu.ts

@@ -7,6 +7,7 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isTabPrevious, isTabNext, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -14,14 +15,15 @@ import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExFilterMenuItem from "./FilterMenuItem.js";
 import UDExFilterMenuGroupHeader from "./FilterMenuGroupHeader.js";
-import Search from "./Search.js";
-import Button from "./Button.js";
+import UDExSearch from "./Search.js";
+import UDEButton from "./Button.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
 import { ListMode } from "./types/List.js";
 import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import UDExBadge from "./Badge.js";
+import UDExListItemBase from "./ListItemBase.js";
 
 import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
 import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
@@ -64,8 +66,8 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
     UDExListItem,
     UDExListGroupHeader,
     UDExBadge,
-    Search,
-    Button,
+    UDExSearch,
+    UDEButton,
   ],
 })
 
@@ -274,11 +276,13 @@ class UDExFilterMenu extends UDExSearchableListBase {
     accessibleRole!: `${PopupAccessibleRole}`;
 
   _dropdown!: UDExDropdown;
-  _search!: Search;
+  _search!: UDExSearch;
+  _hasFooterButtons!: boolean;
 
   onAfterRendering() {
     this._dropdown = this.getDropdown();
     this._search = this.getSearch();
+    this._hasFooterButtons = this.hasFooterButtons;
   }
 
   onEnterDOM(): void {
@@ -300,7 +304,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.onItemPress(e);
 
     if (this.modeSingleSelect) {
-      this._dropdown.onClose();
+      this.onDropdownClose();
     }
   }
 
@@ -313,7 +317,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleSubmitSearch() {
-    this._dropdown.onClose();
+    this.onDropdownClose();
     this.onSubmitSearch();
   }
 
@@ -337,7 +341,37 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  handleTriggerClick() {
+  handleKeyDownList(e: KeyboardEvent) {
+    const isTabNextPress = isTabNext(e) && !this._hasFooterButtons;
+    const isTabPrevPress = isTabPrevious(e) && !this._search;
+
+    if (isTabNextPress || isTabPrevPress) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownSearch(e: CustomEvent) {
+    const keyEvent = e.detail as KeyboardEvent;
+    if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownResultBtn(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (isTabNext(e) && !this.hasResetBtn) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownResetBtn(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (isTabNext(e)) {
+      this.onDropdownClose();
+    }
+  }
+
+  onDropdownClose() {
     if (this._dropdown.open) {
       this._dropdown.onClose();
     }
@@ -347,8 +381,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
   }
 
-  getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("udex-search")!;
+  getSearch(): UDExSearch {
+    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
   }
 
   _dropdownBeforeOpen() {
@@ -399,6 +433,22 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.hideResultBtn && this.hideResetBtn;
   }
 
+  get hasFooterButtons(): boolean {
+    return (this.hasResultBtn || this.hasResetBtn) && this.modeMultiSelect;
+  }
+
+  get hasResultBtn(): boolean {
+    return !this.hideResultBtn && !this.disabledResultBtn;
+  }
+
+  get hasResetBtn(): boolean {
+    return !this.hideResetBtn;
+  }
+
+  getItems(): Array<UDExListItemBase> {
+    return this.getSlottedNodes<UDExListItemBase>("items");
+  }
+
   static get searchableListBaseTemplate() {
     return SearchableListBaseTemplate;
   }

package/src/HeroBanner.hbs

@@ -1,27 +1,30 @@
 <div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}">
-  {{#if hasCustomBackgroundPicture}}
-    <slot name="backgroundPicture"></slot>
-  {{else if hasBackgroundImage}}
-    <picture>
-      <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
-    </picture>
-  {{/if}}
+  <div class="udex-hero-banner__container">
+    {{#if hasCustomBackgroundPicture}}
+      <slot name="backgroundPicture"></slot>
+    {{else if hasBackgroundImage}}
+      <picture>
+        <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
+      </picture>
+    {{/if}}
 
-  {{#if hasBackgroundVideo}}
-  <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown={{_handleKeydown}} >
-      <video ?autoplay="{{shouldVideoAutoplay}}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="{{backgroundVideoLabel}}">
-          <source src="{{backgroundVideo}}" type="video/mp4" />
-      </video>
-      <div class="udex-hero-banner__background-video-overlay"></div>
-      {{> hero-content}}
-      <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click={{_toggleMediaButton}}>
-          <ui5-icon name={{mediaButtonIconName}}></ui5-icon>
-      </button>
+    {{#if hasBackgroundVideo}}
+    <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown={{_handleKeydown}} >
+        <video ?autoplay="{{shouldVideoAutoplay}}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="{{backgroundVideoLabel}}">
+            <source src="{{backgroundVideo}}" type="video/mp4" />
+        </video>
+        <div class="udex-hero-banner__background-video-overlay"></div>
+        {{> hero-content}}
+        <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click={{_toggleMediaButton}}>
+            <ui5-icon name={{mediaButtonIconName}}></ui5-icon>
+        </button>
+    </div>
+    {{else}}
+    <div class="udex-hero-banner__content-container">
+        {{> hero-content}}
+    </div>
+    {{/if}}
   </div>
-  {{else}}
-      {{> hero-content}}
-  {{/if}}
-
 </div>
 
 {{#*inline "hero-content"}}

package/src/InputGroup.ts

@@ -63,7 +63,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: String })
-  groupName?: string;
+    groupName?: string;
 
   /**
    * Defines the orientation of the component.
@@ -72,7 +72,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: Orientation, defaultValue: Orientation.Vertical })
-  orientation!: `${Orientation}`;
+    orientation!: `${Orientation}`;
 
   /**
    * Defines the value state of the component.
@@ -81,7 +81,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: GroupValueState, defaultValue: GroupValueState.Standard })
-  valueState!: `${GroupValueState}`;
+    valueState!: `${GroupValueState}`;
 
   /**
    * Defines supporting text under the Input Group.
@@ -90,7 +90,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: String })
-  supportingText!: string;
+    supportingText!: string;
 
   /**
    * Slot for input elements items.
@@ -98,7 +98,8 @@ class UDExInputGroup extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: HTMLElement, "default": true, individualSlots: true }) items!: Array<UDExCheckbox | UDExRadioButton>;
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    items!: Array<UDExCheckbox | UDExRadioButton>;
 
   static i18nBundle: I18nBundle;
 

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/PhoneNumberField.ts

@@ -260,7 +260,7 @@ class UDExPhoneNumberField extends UI5Element {
 
   static i18nBundle: I18nBundle;
   _dropdown!: UDExDropdown;
-  _handleResizeBound: ResizeObserverCallback
+  _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
     UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");

package/src/Search.hbs

@@ -30,9 +30,10 @@
                 class="udex-search__field"
                 autocomplete="off"
                 role="combobox"
-                aria-controls="suggestions-popover"
+                aria-controls="{{getAriaControls}}"
                 aria-expanded="false"
                 aria-haspopup="{{showSuggestedPopover}}"
+                aria-label="Search"
                 placeholder="{{label}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
@@ -56,7 +57,7 @@
                 autocomplete="off"
                 role="combobox"
                 aria-label="{{accInfo.ariaLabel}}"
-                aria-controls="suggestions-popover"
+                aria-controls="{{getAriaControls}}"
                 aria-expanded="false"
                 aria-haspopup="{{showSuggestedPopover}}"
                 .value="{{value}}"