@sapudex/web-components 0.147.0 → 0.172.0

package/src/Pagination.ts

@@ -16,6 +16,7 @@ import {
   LAST_PAGE,
   PREVIOUS_PAGE,
   NEXT_PAGE,
+  CURRENT_PAGE,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -128,18 +129,26 @@ class UDExPagination extends UI5Element {
     _direction?: string;
 
   _pages: Page[];
+  _visiblePages: Page[];
 
   _previousPageElement?: HTMLElement;
 
   _mobileDisplayNumber: number;
+  _desktopDisplayNumber: number;
+  _firstPageIndex!: number;
+  _lastPageIndex!: number;
+  _pageFocusedManually!: boolean;
 
   static i18nBundle: I18nBundle;
 
   constructor() {
     super();
     this._pages = [];
+    this._visiblePages = [];
     this.currentPageIndex = 0;
     this._mobileDisplayNumber = 5;
+    this._desktopDisplayNumber = 10;
+    this._pageFocusedManually = false;
   }
 
   onEnterDOM() {
@@ -148,6 +157,10 @@ class UDExPagination extends UI5Element {
     }
   }
 
+  onBeforeRendering(): void {
+    this.setupPages(this.pages);
+  }
+
   get nextButtonDisbled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
@@ -189,6 +202,13 @@ class UDExPagination extends UI5Element {
     return ` ${UDExPagination.i18nBundle.getText(OF)} `;
   }
 
+  get paginationAccessibleName(): string {
+    if (this.typeShort) {
+      return this.paginationShortAccessibleName;
+    }
+    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}`;
+  }
+
   get pageAccessibleName(): string {
     return UDExPagination.i18nBundle.getText(PAGINATION_PAGE);
   }
@@ -213,7 +233,7 @@ class UDExPagination extends UI5Element {
 
   get previousPageAccessibleName(): string {
     if (this.currentPageIndex === 0) { return UDExPagination.i18nBundle.getText(PREVIOUS_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
+    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
@@ -222,7 +242,7 @@ class UDExPagination extends UI5Element {
 
   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}`;
+    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
   get nextBtnTooltip(): string {
@@ -230,7 +250,7 @@ class UDExPagination extends UI5Element {
   }
 
   get pagination(): Page[] {
-    return this.setupPages(this.pages);
+    return this._visiblePages;
   }
 
   get paginationClass(): string {
@@ -244,6 +264,18 @@ class UDExPagination extends UI5Element {
     return `${classes} udex-pagination--${this.display} udex-pagination--${this.type}`;
   }
 
+  get displayNumber(): number {
+    const lastIndex = this.display === DisplayType.mobile ? this._mobileDisplayNumber : this._desktopDisplayNumber;
+    return lastIndex;
+  }
+
+  get pageOffset(): number {
+    if (this.display === DisplayType.mobile) {
+      return Math.floor(this._mobileDisplayNumber / 2);
+    }
+    return this._desktopDisplayNumber / 2 - 1;
+  }
+
   static async onDefine() {
     UDExPagination.i18nBundle = await getI18nBundle("@udex/web-components");
   }
@@ -256,9 +288,8 @@ class UDExPagination extends UI5Element {
       return;
     }
 
-    element.setAttribute("aria-current", "page");
     this.currentPageIndex = pageIndex;
-    this._previousPageElement?.removeAttribute("aria-current");
+    this._pageFocusedManually = true;
     this._previousPageElement = element;
   }
 
@@ -268,7 +299,11 @@ class UDExPagination extends UI5Element {
     if (this.pages && currentPage >= this.pages - 1) {
       return;
     }
+
     this.currentPageIndex = currentPage + 1;
+    this._pageFocusedManually = false;
+    this._pages = this.setupPagesData();
+
     this.emitChangeEvent();
   }
 
@@ -279,6 +314,9 @@ class UDExPagination extends UI5Element {
       return;
     }
     this.currentPageIndex -= 1;
+    this._pageFocusedManually = false;
+    this._pages = this.setupPagesData();
+
     this.emitChangeEvent();
   }
 
@@ -288,6 +326,10 @@ class UDExPagination extends UI5Element {
     if (currentPage === 0) {
       return;
     }
+
+    this._firstPageIndex = 0;
+    this._lastPageIndex = this.displayNumber;
+
     this.currentPageIndex = 0;
     this.emitChangeEvent();
   }
@@ -298,76 +340,79 @@ class UDExPagination extends UI5Element {
     if (!this.pages || currentPage >= this.pages - 1) {
       return;
     }
-    this.currentPageIndex = this.pages - 1;
+
+    this._firstPageIndex = this.pages - this.displayNumber;
+    this._lastPageIndex = this.pages;
+
+    this.currentPageIndex = this._lastPageIndex - 1;
     this.emitChangeEvent();
   }
 
-  setupMobilePages(pages: number): Page[] {
-    const pagesCollection = [];
-    let startIndex;
-    let endIndex;
-    const offset = Math.floor(this._mobileDisplayNumber / 2);
-
-    if (pages <= this._mobileDisplayNumber) {
-      startIndex = 0;
-      endIndex = pages;
-    } else {
-      const displayStartNumber = this.currentPageIndex < offset ? 0 : this.currentPageIndex - offset;
+  setupPages(pages?: number) {
+    if (!pages) {
+      this._visiblePages = [];
+      return;
+    }
 
-      startIndex = this.currentPageIndex <= pages - offset - 1
-        ? displayStartNumber
-        : pages - this._mobileDisplayNumber;
+    if (!this._pages.length) {
+      this._firstPageIndex = 0;
+      this._lastPageIndex = pages > this.displayNumber ? this.displayNumber : pages;
+    }
 
-      const displayEndNumber = this.currentPageIndex < offset
-        ? this._mobileDisplayNumber
-        : this.currentPageIndex + this._mobileDisplayNumber - offset;
+    this._pages = this.setupPagesData();
 
-      endIndex = this.currentPageIndex <= pages - offset ? displayEndNumber : pages;
+    if (this.currentPageIndex > this._lastPageIndex || this._lastPageIndex - this.currentPageIndex <= this.pageOffset) {
+      this._visiblePages = this.shiftVisiblePages();
     }
 
-    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)}` : `
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
-      pagesCollection.push({
-        index,
-        value: index + 1,
-        active: isCurrent,
-        accessibleName,
-      });
+    if (this.currentPageIndex < this._firstPageIndex || this.currentPageIndex - this._firstPageIndex <= this.pageOffset) {
+      this._visiblePages = this.shiftVisiblePages(true);
     }
+  }
 
-    return pagesCollection;
-  }
-
-  setupDesktopPages(pages: number): Page[] {
-    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)}` : `
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
-      pagesCollection.push({
-        index,
-        value: index + 1,
-        active: isCurrent,
-        accessibleName,
-      });
+  setupPagesData(): Page[] {
+    const updatedPages = [];
+    if (this.pages) {
+      this._previousPageElement?.removeAttribute("aria-current");
+      for (let index = 0; index < this.pages; index++) {
+        const isCurrent = index === this.currentPageIndex;
+        const ariaCurrent = "page";
+        const accessibleName = this.getPageAccessibleName(index);
+        updatedPages.push({
+          index,
+          value: index + 1,
+          active: isCurrent,
+          accessibleName,
+          ...(isCurrent && { ariaCurrent }),
+        });
+      }
     }
-
-    return pagesCollection;
+    return updatedPages;
   }
 
-  setupPages(pages?: number): Page[] {
-    if (!pages) {
-      return [];
-    }
-    if (this.display === DisplayType.mobile) {
-      return this.setupMobilePages(pages);
+  shiftVisiblePages(shiftBackwards: boolean = false): Page[] {
+    if (shiftBackwards) {
+      while (this.currentPageIndex - this._firstPageIndex < this.pageOffset && this._firstPageIndex > 0) {
+        this._firstPageIndex--;
+        this._lastPageIndex--;
+      }
+    } else {
+      while (this._lastPageIndex - this.currentPageIndex - 1 < this.pageOffset && this._lastPageIndex < this.pages!) {
+        this._firstPageIndex++;
+        this._lastPageIndex++;
+      }
     }
+    return this._pages.slice(this._firstPageIndex, this._lastPageIndex);
+  }
 
-    return this.setupDesktopPages(pages);
+  getPageAccessibleName(index: number): string {
+    const isCurrent = index === this.currentPageIndex;
+
+    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}`;
+
+    return accessibleName;
   }
 
   onPageClick(e: Event) {
@@ -387,6 +432,11 @@ class UDExPagination extends UI5Element {
   }
 
   onAfterRendering() {
+    if (this._pageFocusedManually) {
+      const activePageItem = this.shadowRoot?.querySelector<HTMLElement>(".udex-pagination__page[active]");
+      activePageItem?.focus();
+    }
+
     if (this.type === PaginationType.full) {
       return;
     }

package/src/PhoneNumberField.hbs

@@ -65,10 +65,10 @@
                     {{selectedCountryName}} {{selectedPhonePrefix}}
                 </div>
                 <div class="udex-phone-number-field__button-content">
-                    <div
+                    <img
                         class="udex-phone-number-field__flag"
-                        style="{{selectedFlagBackgroundPosition}}"
-                    ></div>
+                        aria-label={{selectedCountryName}}
+                        style="{{selectedFlagBackgroundPosition}}">
                 </div>
             </udex-button>
         {{/unless}}

package/src/PhoneNumberField.ts

@@ -287,6 +287,7 @@ class UDExPhoneNumberField extends UI5Element {
 
   static i18nBundle: I18nBundle;
   _dropdown!: UDExDropdown;
+  _dropdownList!: UDExList;
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
@@ -318,6 +319,10 @@ class UDExPhoneNumberField extends UI5Element {
 
   onAfterRendering() {
     this._dropdown = this.getDropdown();
+    this._dropdownList = this.getDropdownList();
+    if (this.countryIso) {
+      this._dropdownList.focusSelectedItem();
+    }
   }
 
   onClick(): void {
@@ -409,7 +414,6 @@ class UDExPhoneNumberField extends UI5Element {
     if (isIncorrectNumberEntered) {
       this.value = "";
     }
-
     this.fireEvent("change");
   }
 
@@ -417,11 +421,8 @@ class UDExPhoneNumberField extends UI5Element {
     const dropdown = this.getDropdown();
 
     dropdown.onClose();
-
     this.selectedIso = e.detail.item.id;
-    this.value = this.selectedPhonePrefix;
-    this.phoneFormat = this.value + this.selectedPlaceholder;
-    this.maxlength = this.phoneFormat.length;
+    this.applyPhoneMask();
     this.getInputField().focus();
   }
 
@@ -429,6 +430,7 @@ class UDExPhoneNumberField extends UI5Element {
     this.buttonIcon = OpenButtonIcon.iconUp;
     this._dropdownExpanded = true;
   }
+
   handleDropdownClose() {
     this.buttonIcon = OpenButtonIcon.iconDown;
     this._dropdownExpanded = false;
@@ -490,13 +492,19 @@ class UDExPhoneNumberField extends UI5Element {
       ? this.selectedPhonePrefix + this.selectedPlaceholder : initialPlaceholder;
   }
 
-  getDropdown() {
+  getDropdownList(): UDExList {
+    return this.shadowRoot!.querySelector<UDExList>(
+      "[udex-list]",
+    )!;
+  }
+
+  getDropdown(): UDExDropdown {
     return this.shadowRoot!.querySelector<UDExDropdown>(
       "[udex-dropdown]",
     )!;
   }
 
-  getButton() {
+  getButton(): UDExButton {
     return this.shadowRoot!.querySelector<UDExButton>(
       "[udex-button]",
     )!;
@@ -528,7 +536,7 @@ class UDExPhoneNumberField extends UI5Element {
 
   get selectedCountryName(): string {
     if (!this.countryIso) {
-      return "";
+      return "None";
     }
 
     return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.countryName

package/src/RangeSlider.ts

@@ -29,7 +29,6 @@ import SliderCss from "./generated/themes/Slider.css.js";
   tag: "udex-range-slider",
   renderer: litRender,
   styles: [SliderBase.styles, rangeSliderCss, SliderCss],
-  dependencies: [],
 })
 class UDExRangeSlider extends RangeSlider {
   onEnterDOM(): void {

package/src/Search.hbs

@@ -1,13 +1,14 @@
 <div class="udex-search__root {{classWithPrefix}}">
     {{#if isShowSearchHomePrefix}}
         <div class="udex-search__prefix">
-            <button type="button"
-                    role="combobox"
-                    aria-expanded="{{_prefixDropdownExpanded}}"
-                    aria-haspopup="true"
-                    aria-controls="udex-search-prefix"
-                    class="udex-search__prefix-button"
-                    @click="{{handleDropdownClick}}">
+            <button
+                type="button"
+                role="combobox"
+                aria-expanded="{{_prefixDropdownExpanded}}"
+                aria-haspopup="true"
+                aria-controls="udex-search-prefix"
+                class="udex-search__prefix-button"
+                @click="{{handleDropdownClick}}">
                 <span class="udex-search__prefix-label">{{labelPrefix}}</span>
                 <ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon>
             </button>
@@ -16,7 +17,7 @@
                 class="udex-search__prefix-popover"
                 hide-arrow
                 placement-type="Bottom"
-	              horizontal-align="Left"
+                horizontal-align="Left"
                 style="{{prefixPopoverStyles}}"
                 @after-close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>
@@ -75,8 +76,7 @@
                     design="Default"
                     tooltip="{{tooltipInfo.tooltipResetButton}}"
                     @click="{{onReset}}"
-                    @keydown="{{handleKeyDownReset}}"
-                >
+                    @keydown="{{handleKeyDownReset}}">
                     <ui5-icon
                         class="udex-search__button-icon"
                         accessible-name="{{accInfo.accessibleNameResetIcon}}"

package/src/Search.ts

@@ -728,22 +728,20 @@ class UDExSearch extends UI5Element {
       dropdown.style.width = `${button.offsetWidth + 1}px`;
       button.classList.add("udex-search__prefix-button--active");
       wrapper.classList.add("udex-search__prefix--show-popover");
-      this.handleItemClick();
+      this.dropdownPrefix[0].addEventListener("item-press", this.handleItemClick);
     }
   }
 
-  private handleItemClick() {
-    this.dropdownPrefix[0].addEventListener("item-press", (e: any) => {
-      const selectedItemPrefix = e.detail.item as ListItemBase;
-      this.labelPrefix = selectedItemPrefix.innerText;
-      this.fireEvent("prefix-item-click", { item: selectedItemPrefix });
-      this.onClosePrefixPopover();
-    });
-  }
+  handleItemClick = (e: Event) => {
+    const selectedItemPrefix = (e as CustomEvent).detail.item as ListItemBase;
+    this.labelPrefix = selectedItemPrefix.innerText;
+    this.fireEvent("prefix-item-click", { item: selectedItemPrefix });
+    this.onClosePrefixPopover();
+  };
 
   onClosePrefixPopover() {
     const dropdown = this.getPrefixPopover();
-
+    this.dropdownPrefix[0].removeEventListener("item-press", this.handleItemClick);
     dropdown.close();
     this._prefixDropdownExpanded = false;
     this.handleAfterClosePrefixPopover();
@@ -755,7 +753,6 @@ class UDExSearch extends UI5Element {
 
     wrapper.classList.remove("udex-search__prefix--show-popover");
     button.classList.remove("udex-search__prefix-button--active");
-    this.dropdownPrefix[0].removeEventListener("item-press", () => {});
   }
 
   handleInputClick(): void {
@@ -767,7 +764,7 @@ class UDExSearch extends UI5Element {
     }
   }
 
-  onSubmit(e: MouseEvent): void {
+  onSubmit(e: Event): void {
     e.stopPropagation();
     this.handleSubmitValue();
   }
@@ -810,6 +807,10 @@ class UDExSearch extends UI5Element {
     }
   }
 
+  handleKeyPressSuggestionList(e: KeyboardEvent): void {
+    this.Suggestion?.handleKeyPress(e);
+  }
+
   handleClassToRoot() {
     const hasAdditionRootClass = !this.shadowRoot?.querySelector(".udex-search__root")?.classList.contains("udex-search__root--show-popover");
 
@@ -891,7 +892,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("mousedown", (e: MouseEvent) => {
+    document.addEventListener("mousedown", (e: Event) => {
       const popover = (e.target as HTMLElement).shadowRoot?.querySelector("[ui5-popover]");
 
       if (e.target !== this && popover !== this.Suggestion?.popover) {
@@ -1011,7 +1012,7 @@ class UDExSearch extends UI5Element {
     this.focusClasses = "";
   }
 
-  onReset(e: MouseEvent): void {
+  onReset(e: Event): void {
     e.stopPropagation();
     this.handleReset();
   }
@@ -1022,7 +1023,7 @@ class UDExSearch extends UI5Element {
     this.onClosePopover();
     this.fireEvent("handle-value-reset");
     this.Suggestion?.resetFocusState();
-    this.focus();
+    this.getSearchInput()?.focus();
   }
 
   handleKeyDownReset(e: KeyboardEvent) {
@@ -1033,7 +1034,6 @@ class UDExSearch extends UI5Element {
       e.preventDefault();
       e.stopPropagation();
       this.handleReset();
-      this.getSearchInput()?.focus();
     }
   }
 
@@ -1041,7 +1041,7 @@ class UDExSearch extends UI5Element {
     return this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
   }
 
-  onVoice(e: MouseEvent): void {
+  onVoice(e: Event): void {
     e.stopPropagation();
     if (this.speechRecognition) {
       this.onSpeechLaunch();

package/src/SearchSuggestions.hbs

@@ -8,6 +8,7 @@
     id="{{getSuggestionsPopoverId}}"
     aria-orientation="vertical"
     accessible-role="Dialog"
+    @keydown="{{handleKeyPressSuggestionList}}"
     accessible-name="{{suggestionsAccessibleName}}">
     {{#if showNoResultMessage}}
         <span class="udex-search-suggestions__message">{{noResultMessage}}</span>

package/src/SearchableListBase.hbs

@@ -14,6 +14,8 @@
 {{else}}
     <udex-list
         id="udex-list"
+        role="{{roleForGroupList}}"
+        accessible-role="{{accessibleRoleForList}}"
         class="udex-filter-menu__list"
         ?controlled="{{isControlled}}"
         mode="{{mode}}">
@@ -45,7 +47,7 @@
                     </udex-list-select-all>
                 {{else}}
                     <udex-list-group-header
-                        role="list"
+                        role="group"
                         _additional-class-name="udex-searchable-list__header"
                         class="{{../groupClassName}}"
                         ?non-interactive="{{this.item.nonInteractive}}"

package/src/SearchableListBase.ts

@@ -2,8 +2,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+  isDown, isUp,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
 import Search from "./Search.js";
 import UDExListItemBase from "./ListItemBase.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
@@ -277,7 +281,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   checkAndUpdateLabel(item: UDExListItemBase | UDExListGroupHeaderBase, str: string): boolean {
-    const cleanedLabel = this.cleanLabel(item.label);
+    const cleanedLabel = cleanLabel(item.label);
     if (this.isIncludes(cleanedLabel, str)) {
       item.label = this.addSearchTermTag(cleanedLabel, str);
       return true;
@@ -285,10 +289,6 @@ class UDExSearchableListBase extends UI5Element {
     return false;
   }
 
-  cleanLabel(str: string): string {
-    return str.replace(/<\/?b[^>]*>/g, "");
-  }
-
   addSearchTermTag(text: string, str: string): string {
     return text.replace(new RegExp(`(${str})`, "i"), "<b>$&</b>");
   }
@@ -314,6 +314,15 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  handleKeyDown(e: KeyboardEvent) {
+    if (isUp(e)) {
+      this.handlePreviousItemFocus(e);
+    }
+    if (isDown(e)) {
+      this.handleNextListItemFocus(e);
+    }
+  }
+
   getSlottedItems(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<UDExListItemBase | UDExListGroupHeaderBase> {
     const arr: Array<UDExListItemBase | UDExListGroupHeaderBase> = [];
     items.forEach(item => {
@@ -354,10 +363,44 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  // moves focus to next list item
+  handlePreviousItemFocus(e: KeyboardEvent) {
+    const item = e.target as HTMLElement;
+    const listItems = this.getDomListItems();
+    const currentSelectIndex = this.getCurrentIndex(item);
+    const previousSelectIndex = currentSelectIndex - 1;
+    if (currentSelectIndex > 0) {
+      e.preventDefault();
+      (listItems[previousSelectIndex] as HTMLElement).focus();
+    }
+  }
+
+  // moves focus to previous list item
+  handleNextListItemFocus(e: KeyboardEvent) {
+    const item = e.target as HTMLElement;
+    const listItems = this.getDomListItems();
+    const lastItemIndex = listItems.length - 1;
+    const currentSelectIndex = this.getCurrentIndex(item);
+    const nextSelectIndex = currentSelectIndex + 1;
+    if (nextSelectIndex <= lastItemIndex) {
+      e.preventDefault();
+      (listItems[nextSelectIndex] as HTMLElement).focus();
+    }
+  }
+
+  getCurrentIndex(item: Element): number {
+    return this.getDomListItems().indexOf(item);
+  }
+
   getSearch(): Search {
     return this.shadowRoot!.querySelector<Search>("udex-search")!;
   }
 
+  getDomListItems(): Element[] {
+    const elementList = this.shadowRoot!.querySelector("udex-list") as HTMLElement;
+    return elementList ? Array.from(elementList.querySelectorAll("udex-list-item")) : [];
+  }
+
   setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
     items.forEach(item => {
       item.mode = this.mode;
@@ -429,6 +472,14 @@ class UDExSearchableListBase extends UI5Element {
     return items.length > SHOW_SEARCH_AFTER_COUNT && !this.modeRadioGroup;
   }
 
+  get roleForGroupList(): string {
+    return this._filteredItems.some(element => element.isGroup) ? "group" : "none";
+  }
+
+  get accessibleRoleForList(): string {
+    return this._filteredItems.some(element => element.isGroup) ? "group" : "list";
+  }
+
   static async onDefine(): Promise<void> {
     UDExSearchableListBase.i18nBundle = await getI18nBundle("@udex/web-components");
   }

package/src/SecondaryNavigation.hbs

@@ -58,6 +58,7 @@
         </div>
     </div>
     <udex-secondary-navigation-item
+        @keydown="{{handleKeyDown}}"
         class="udex-secondary-navigation__mobile-nav"
         role="button"
         aria-label="{{mobileMenuOpenerAriaLabel}}"