@sapudex/web-components 0.147.0 → 0.172.0

package/src/SecondaryNavigation.ts

@@ -8,18 +8,14 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
-  isLeft,
-  isRight,
-  isEscape,
+  isEscape, isLeft, isRight, isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
-
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
-
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
@@ -229,30 +225,41 @@ class UDExSecondaryNavigation extends UI5Element {
 
   handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
+    const item = e.target as UDExSecondaryNavigationItem;
+
     if (isLeft(e)) {
-      this.focusPrevNavItem(e);
+      return this.focusPrevNavItem(e);
     }
     if (isRight(e)) {
-      this.focusNextNavItem(e);
+      return this.focusNextNavItem(e);
+    }
+    if (isEscape(e) && item.hasNestedItems) {
+      return item.closeDropdown();
     }
-    if (isEscape(e)) {
-      (e.target as UDExSecondaryNavigationItem).closeDropdown();
+    if (isDown(e) && item.hasNestedItems) {
+      item.openDropdown();
     }
   }
 
   focusPrevNavItem(e: KeyboardEvent): void {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const lastItemIndex = this.domNavItems.length - 1;
-    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    this.domNavItems[previousSelectIndex]?.focus();
+    const previousSelectIndex = currentSelectedIndex - 1;
+    if (currentSelectedIndex > 0) {
+      e.preventDefault();
+      this.domNavItems[previousSelectIndex]?.focus();
+    }
   }
 
   focusNextNavItem(e: KeyboardEvent): void {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    this.domNavItems[nextSelectIndex].focus();
+    const lastItemIndex = this.domNavItems.length - 1;
+    const nextSelectIndex = currentSelectedIndex + 1;
+    if (nextSelectIndex < lastItemIndex) {
+      e.preventDefault();
+      this.domNavItems[nextSelectIndex].focus();
+    }
   }
 
   getItemWidth(item: NavItem): number {
@@ -369,7 +376,7 @@ class UDExSecondaryNavigation extends UI5Element {
     document.addEventListener("mousedown", this.outsideClickListener);
   }
 
-  outsideClickListener = (e: MouseEvent): void => {
+  outsideClickListener = (e: Event): void => {
     if (this.isMobileScreen && e.target !== this) {
       this.closeMobileDropdown();
       return;
@@ -384,7 +391,7 @@ class UDExSecondaryNavigation extends UI5Element {
     this.mobileNav?.closeDropdown();
   }
 
-  handleDesktopDropdown(e: MouseEvent): void {
+  handleDesktopDropdown(e: Event): void {
     const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
     if (!isClickedNavItem && this._clickedNavItem) {
       this._clickedNavItem.closeDropdown();

package/src/SecondaryNavigationItem.hbs

@@ -6,19 +6,20 @@
         href="{{path}}"
         target="{{target}}"
         @keydown="{{handleItemLinkKeyDown}}"
-        @click="{{onItemClick}}">
+        @click="{{fireNavItemClickEvent}}">
         {{itemLabel}}
     </a>
 {{else}}
     <button
         class="udex-secondary-navigation__item"
         role="{{itemRole}}"
+        tabindex="0"
         ?active="{{isActive}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"
         aria-label="{{ariaLabel}}"
-        @keydown="{{handleItemButtonKeyDown}}"
-        @click="{{onItemClick}}">
+        @keydown="{{handleItemEnterOrSpaceKeys}}"
+        @click="{{openDropdown}}">
         <span class="udex-secondary-navigation__item-text-wrap">
             {{itemLabel}}
             {{#if _subTitle}}
@@ -37,10 +38,10 @@
     </button>
     {{#if isOpen}}
         <div
-            class="udex-secondary-navigation__dropdown"
-            @keydown="{{handleSubItemKeyDown}}">
+            class="udex-secondary-navigation__dropdown">
             <ul role="menu"
-                class="udex-secondary-navigation__dropdown-list">
+                class="udex-secondary-navigation__dropdown-list"
+                @keydown="{{handleSubItemKeyDown}}">
                 {{#each _processedItems}}
                     <li role="none">
                         <udex-secondary-navigation-sub-item
@@ -58,7 +59,9 @@
                     </li>
                 {{/each}}
             </ul>
-            <slot></slot>
+            <div @keydown="{{handleButtonsEscKey}}">
+                <slot></slot>
+            </div>
         </div>
     {{/if}}
 {{/if}}

package/src/SecondaryNavigationItem.ts

@@ -14,7 +14,7 @@ import {
   isSpace,
   isEnter,
   isHome,
-  isEnd,
+  isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
@@ -159,18 +159,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
-  onItemClick(): void {
-    if (this.hasNestedItems) {
-      this.setDropdownItems();
-      this.toggleDropdown();
-    }
-
-    this.fireEvent("nav-item-click", {
-      item: this,
-      index: this.index,
-    });
-  }
-
   onSubItemClick(e: Event): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const clickedItem = this._processedItems[index];
@@ -178,6 +166,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (clickedItem.items) {
       this.setDropdownHistory();
       this.setNestedItems(clickedItem);
+      this.onShouldFocusFirstSubItem();
     }
 
     this.fireEvent("sub-item-click", {
@@ -190,8 +179,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.setPrevNestedItems();
   }
 
-  toggleDropdown(): void {
-    this.isOpen = !this.isOpen;
+  openDropdown(): void {
+    if (this.hasNestedItems) {
+      this.setDropdownItems();
+      this.isOpen = !this.isOpen;
+      this.onShouldFocusFirstSubItem();
+    }
+
+    this.fireNavItemClickEvent();
   }
 
   closeDropdown(): void {
@@ -200,12 +195,11 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
-      e.preventDefault();
-      this.onItemClick();
+      this.openDropdown();
     }
   }
 
-  handleItemButtonKeyDown(e: KeyboardEvent): void {
+  handleItemEnterOrSpaceKeys(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
       this.onShouldFocusFirstSubItem();
     }
@@ -242,23 +236,41 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       e.preventDefault();
       this.handleEnterAndSpace(e);
     }
+    if (isTabPrevious(e) && this._isMobileView) {
+      this.closeDropdown();
+    }
+    if ((isTabPrevious(e) || isTabNext(e)) && !this._isMobileView) {
+      this.closeDropdown();
+    }
+  }
+
+  handleButtonsEscKey(e: KeyboardEvent): void {
+    if (isEscape(e) && this._isMobileView) {
+      this.handleEscapeKey();
+    }
   }
 
   handleUpArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const lastIndex = this.domNavItems.length - 1;
-    const previousIndex = index - 1 < 0 ? lastIndex : index - 1;
-    if (!(lastIndex === previousIndex)) {
-      this.domNavItems[previousIndex].focus();
-    }
+    const previousSelectIndex = index - 1 < 0 ? lastIndex : index - 1;
+    const previousItem = this.domNavItems[previousSelectIndex];
+    const currentItem = this.domNavItems[index];
+
+    this.unsetTabIndex(currentItem);
+    this.setTabIndex(previousItem);
+    previousItem.focus();
   }
 
   handleDownArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const nextIndex = index + 1 > this.domNavItems.length - 1 ? 0 : index + 1;
-    if (!(nextIndex === 0)) {
-      this.domNavItems[nextIndex].focus();
-    }
+    const nextItem = this.domNavItems[nextIndex];
+    const currentItem = this.domNavItems[index];
+
+    this.unsetTabIndex(currentItem);
+    this.setTabIndex(nextItem);
+    nextItem.focus();
   }
 
   handleLeftArrow(e: KeyboardEvent): void {
@@ -270,10 +282,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   handleRightArrow(e: KeyboardEvent): void {
-    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;
+    const { hasItems, isBack, index } = e.target as UDExSecondaryNavigationSubItem;
     if (hasItems && !isBack) {
       this.onSubItemClick(e);
-      this.onShouldFocusFirstSubItem();
+      this.unsetTabIndex(this.domNavItems[index]);
     }
   }
 
@@ -300,6 +312,13 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.focus();
   }
 
+  fireNavItemClickEvent(): void {
+    this.fireEvent("nav-item-click", {
+      item: this,
+      index: this.index,
+    });
+  }
+
   setDropdownHistory(): void {
     this._dropdownHistory.push(this._processedItems);
   }
@@ -331,8 +350,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     }
   }
 
+  setTabIndex(item: UDExSecondaryNavigationSubItem): void {
+    item._tabIndex = "0";
+  }
+
+  unsetTabIndex(item: UDExSecondaryNavigationSubItem): void {
+    item._tabIndex = "-1";
+  }
+
   onFirstSubItemFocus(): void {
-    this.domNavItems[0].focus();
+    const firstSubItem = this.domNavItems[0];
+
+    firstSubItem.focus();
+    this.setTabIndex(firstSubItem);
   }
 
   onLastSubItemFocus(): void {

package/src/SecondaryNavigationSubItem.hbs

@@ -1,5 +1,6 @@
 {{#if isBack}}
     <button
+        tabindex="{{_tabIndex}}"
         @click="{{onBackItemClick}}"
         role="menuitem"
         aria-label="{{backButtonAriaLabel}}"
@@ -15,6 +16,7 @@
 {{else}}
     {{#if isButton}}
         <button
+            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
             role="menuitem"
             aria-haspopup="{{hasItems}}"
@@ -32,6 +34,7 @@
         </button>
     {{else}}
         <a
+            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
             role="menuitem"
             href="{{path}}"

package/src/SecondaryNavigationSubItem.ts

@@ -88,6 +88,9 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object, multiple: true })
     nestedItems!: Array<NavItem>;
 
+  @property({ type: String, defaultValue: "-1" })
+    _tabIndex!: string;
+
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {

package/src/SegmentedButton.ts

@@ -72,7 +72,7 @@ class UDExSegmentedButton extends SegmentedButton {
     this.style.setProperty(getScopedVarName("--udex-segmented-button-items-count"), `${items.length}`);
   }
 
-  _onmousedown(e: MouseEvent) {
+  _onmousedown(e: Event) {
     const eventTarget = e.target as SegmentedButtonItem;
     const isTargetSegmentedButtonItem = eventTarget.hasAttribute("udex-segmented-button-item");
 
@@ -83,7 +83,7 @@ class UDExSegmentedButton extends SegmentedButton {
     }
   }
 
-  _selectItem(e: MouseEvent | KeyboardEvent) {
+  _selectItem(e: Event | KeyboardEvent) {
     // Method to be update with @ui5/webcomponents v.2.0 , due to ToggleButton dependency change (pressed -> selected)
     const target = e.target as SegmentedButtonItem;
     const isTargetSegmentedButtonItem = target.hasAttribute("udex-segmented-button-item");

package/src/SelectBox.ts

@@ -482,7 +482,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
+    document.addEventListener("click", (e: Event) => {
       if (this._tokenizer?.tokens.length > 0 && e.target !== this) {
         this._tokenizer.expanded = false;
       }

package/src/SideNavigationGroup.ts

@@ -26,7 +26,6 @@ import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.j
   tag: "udex-side-navigation-group",
   renderer: litRender,
   styles: [SideNavigationGroup.styles, SideNavigationGroupCss],
-  dependencies: [],
 })
 
 class UDExSideNavigationGroup extends SideNavigationGroup {}

package/src/SideNavigationItem.ts

@@ -26,7 +26,6 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
   tag: "udex-side-navigation-item",
   renderer: litRender,
   styles: [SideNavigationItem.styles, SideNavigationItemCss],
-  dependencies: [],
 })
 
 class UDExSideNavigationItem extends SideNavigationItem {

package/src/SideNavigationSubItem.ts

@@ -26,7 +26,6 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
   tag: "udex-side-navigation-sub-item",
   renderer: litRender,
   styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
-  dependencies: [],
 })
 
 class UDExSideNavigationSubItem extends SideNavigationSubItem {}

package/src/Slider.ts

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

package/src/StepInput.hbs

@@ -20,21 +20,6 @@
         step="{{step}}"
     ></udex-text-field>
     {{#unless displayonly}}
-        <udex-control-button
-            class="udex-step-input__button udex-step-input__button_inc"
-            title="{{incIconTitle}}"
-            accessible-name="{{incIconTitle}}"
-            icon="add"
-            size="Large"
-            design="{{valueState}}"
-            @click="{{_incValue}}"
-            @mousedown="{{_incSpin}}"
-            @mouseup="{{_resetSpin}}"
-            @mouseout="{{_resetSpinOut}}"
-            ?disabled="{{_incIconInactive}}"
-            ?active="{{incIconActive}}"
-            ?readonly="{{readonly}}"
-        ></udex-control-button>
         <udex-control-button
             class="udex-step-input__button udex-step-input__button_dec"
             title="{{decIconTitle}}"
@@ -50,5 +35,20 @@
             ?active="{{decIconActive}}"
             ?readonly="{{readonly}}"
         ></udex-control-button>
+        <udex-control-button
+            class="udex-step-input__button udex-step-input__button_inc"
+            title="{{incIconTitle}}"
+            accessible-name="{{incIconTitle}}"
+            icon="add"
+            size="Large"
+            design="{{valueState}}"
+            @click="{{_incValue}}"
+            @mousedown="{{_incSpin}}"
+            @mouseup="{{_resetSpin}}"
+            @mouseout="{{_resetSpinOut}}"
+            ?disabled="{{_incIconInactive}}"
+            ?active="{{incIconActive}}"
+            ?readonly="{{readonly}}"
+        ></udex-control-button>
     {{/unless}}
-</div>
+</div>

package/src/TabNavigation.ts

@@ -261,12 +261,12 @@ class UDExTabNavigation extends UI5Element {
   onAfterRendering(): void {
     if (this.items.length) {
       this.setItemsInHeader();
-      this.initOutsideClick();
       this.setVisibleTabs();
       this.applyTabIndex();
     } else {
-      throw new Error("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
+      console.warn("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
     }
+    this.initOutsideClick();
   }
 
   initOutsideClick() {

package/src/Tag.ts

@@ -11,6 +11,7 @@ import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
 // Styles
 import TagCss from "./generated/themes/Tag.css";
+import IconPlacement from "./types/IconPlacement.js";
 
 export enum TagType {
     Text = "Text",
@@ -19,11 +20,6 @@ export enum TagType {
     Grey = "Grey"
 }
 
-export enum IconPlacement {
-    Start = "Start",
-    End = "End"
-}
-
 export enum TagSize {
   Small = "Small",
   Medium = "Medium"

package/src/Tile.ts

@@ -35,7 +35,7 @@ type AnchorNode = HTMLAnchorElement | undefined | null;
  */
 @event("click", {
   detail: {
-    originalEvent: { type: MouseEvent },
+    originalEvent: { type: Event },
   },
 })
 class UDExTile extends UI5Element {
@@ -126,7 +126,7 @@ class UDExTile extends UI5Element {
     }
   }
 
-  _onclick(e: MouseEvent) {
+  _onclick(e: Event) {
     e.stopImmediatePropagation();
 
     if (this.interactive) {

package/src/Toast.ts

@@ -2,12 +2,13 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Toast from "@ui5/webcomponents/dist/Toast.js";
-import "@ui5/webcomponents/dist/Icon.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
-import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import UDExButton from "./Button.js";
 
 import ToastTemplate from "./generated/templates/ToastTemplate.lit.js";
 
@@ -43,7 +44,7 @@ export enum ToastValueState {
   renderer: litRender,
   styles: [Toast.styles, ToastCss],
   template: ToastTemplate,
-  dependencies: [Toast],
+  dependencies: [Icon, UDExButton],
 })
 
 /**

package/src/Wizard.hbs

@@ -3,6 +3,7 @@
   aria-label="{{ariaLabelText}}"
   role="region"
   ?indeterminate="{{indeterminate}}"
+  part="ui5-wiz-root"
 >
 	<nav class="ui5-wiz-nav" part="navigator" aria-label="{{navAriaLabelText}}" tabindex="-1">
 		<div class="ui5-wiz-nav-list" role="list" aria-label="{{listAriaLabelText}}" aria-describedby="wiz-nav-descr" aria-controls="{{_id}}-wiz-content">

package/src/Wizard.ts

@@ -49,7 +49,7 @@ const RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {
   renderer: litRender,
   template: WizardTemplate,
   styles: [wizardCss, WizardCss],
-  dependencies: [Wizard, UDExWizardTab, UDExWizardStep],
+  dependencies: [...Wizard.dependencies, UDExWizardTab, UDExWizardStep],
 })
 
 class UDExWizard extends Wizard {

package/src/WizardTab.ts

@@ -37,7 +37,6 @@ export enum WindowSize {
   tag: "udex-wizard-tab",
   renderer: litRender,
   styles: [wizardTabCss, WizardTabCss],
-  dependencies: [UI5WizardTab],
 })
 class UDExWizardTab extends UI5WizardTab {
   /**

package/src/features/SearchSuggestionsPopover.ts

@@ -2,6 +2,9 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element";
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
+import isLetterKey from "../utils/isLetterKeyPressed.js";
+import listItemLabelStartsWithKeyFocus from "../utils/listItemLabelStartsWithKeyFocus.js";
+import { LetterPressedHandlerObj } from "../types/List.js";
 
 interface SuggestionComponent extends UI5Element {
   open: boolean;
@@ -28,6 +31,12 @@ class Suggestion {
   focusabledList?: HTMLDivElement;
   lists?: Array<HTMLDivElement>;
 
+  _pressedKey!: string;
+  _pressedCount!: number;
+  _lastFoundPosition!: number;
+  _focusableListItems!: Array<Element>;
+  _letterKeyHandlerObj!: LetterPressedHandlerObj;
+
   constructor(component: SuggestionComponent) {
     this.component = component;
     this._getSuggestionPopover();
@@ -56,6 +65,63 @@ class Suggestion {
     this._getComponent().open = true;
     this.popover!.showAt(this._getComponent());
     this.initLists();
+    this._focusableListItems = this._getItems();
+    this._letterKeyHandlerObj = this.getLetterKeyObjHandler();
+    this.resetFocusLetterHandlers();
+  }
+
+  setPressedKey(value:string): void {
+    this._pressedKey = value;
+  }
+
+  getPressedKey(): string {
+    return this._pressedKey;
+  }
+
+  setPressedCount(value:number): void {
+    this._pressedCount = value;
+  }
+
+  getPressedCount() : number {
+    return this._pressedCount;
+  }
+
+  setLastFoundPosition(value:number): void {
+    this._lastFoundPosition = value;
+  }
+
+  getLastFoundPosition(): number {
+    return this._lastFoundPosition;
+  }
+
+  resetFocusLetterHandlers(): void {
+    this.setPressedCount(0);
+    this.setPressedKey("");
+    this.setLastFoundPosition(0);
+  }
+
+  handleKeyPress(e: KeyboardEvent): void {
+    const key = e.key;
+    if (isLetterKey(key)) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.handleLetterKey(e);
+    }
+  }
+
+  getLetterKeyObjHandler(): LetterPressedHandlerObj {
+    return {
+      getPressedKey: () => this.getPressedKey(),
+      setPressedKey: (arg: string) => this.setPressedKey(arg),
+      getPressedCount: () => this.getPressedCount(),
+      setPressedCount: (arg: number) => this.setPressedCount(arg),
+      getLastFoundPosition: () => this.getLastFoundPosition(),
+      setLastFoundPosition: (arg: number) => this.setLastFoundPosition(arg),
+    } as LetterPressedHandlerObj;
+  }
+
+  handleLetterKey(event: KeyboardEvent): void {
+    listItemLabelStartsWithKeyFocus(event.key, this._focusableListItems, this._letterKeyHandlerObj);
   }
 
   initLists(): void {
@@ -106,7 +172,7 @@ class Suggestion {
     }
   }
 
-  getFocusableItems() {
+  getFocusableItems(): Element[] {
     const items = this.focusabledList?.children ? this.focusabledList?.children : [];
     return Array.from(items);
   }