@sapudex/web-components 0.143.0 → 0.172.0

package/src/List.ts

@@ -16,7 +16,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import UDExListItem from "./ListItem.js";
-import { ListStyleType, ListMode } from "./types/List.js";
+import { ListStyleType, ListMode, LetterPressedHandlerObj } from "./types/List.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import {
@@ -27,6 +27,8 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 
 // Styles
 import ListCss from "./generated/themes/List.css.js";
+import isLetterKey from "./utils/isLetterKeyPressed.js";
+import listItemLabelStartsWithKeyFocus from "./utils/listItemLabelStartsWithKeyFocus.js";
 
 export type UDExListItemBase = UDExListItem & UDExListGroupHeader;
 /**
@@ -146,12 +148,27 @@ class UDExList extends UI5Element {
 
   static i18nBundle: I18nBundle;
 
+  _pressedKey!: string;
+  _pressedCount!: number;
+  _lastFoundPosition!: number;
+  _focusableListItems!: Array<UDExListItemBase>;
+  _letterKeyHandlerObj!: LetterPressedHandlerObj;
+
   static async onDefine(): Promise<void> {
     UDExList.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
+  resetFocusLetterHandlers(): void {
+    this.setPressedCount(0);
+    this.setPressedKey("");
+    this.setLastFoundPosition(0);
+  }
+
   onBeforeRendering(): void {
     this.prepareListItemsMode();
+    this.resetFocusLetterHandlers();
+    this._focusableListItems = this.getItemsWithoutHeader();
+    this._letterKeyHandlerObj = this.getLetterKeyObjHandler();
   }
 
   handleItemPress(e: CustomEvent): void {
@@ -160,149 +177,159 @@ class UDExList extends UI5Element {
   }
 
   handleKeyDown(e: KeyboardEvent): void {
-    this.handleUpArrow(e);
-    this.handleDownArrow(e);
-    this.handleHomeKey(e);
-    this.handleEndKey(e);
-    this.handleEnterOrSpace(e);
+    if (isUp(e)) {
+      this.handleUpArrow(e);
+    }
+    if (isDown(e)) {
+      this.handleDownArrow(e);
+    }
+    if (isHome(e)) {
+      this.handleHomeKey(e);
+    }
+    if (isEnd(e)) {
+      this.handleEndKey(e);
+    }
+    if (isEnter(e) || isSpace(e)) {
+      this.handleEnterOrSpace(e);
+    }
+    if (isLetterKey(e.key)) {
+      this.handleLetterKey(e);
+    }
   }
 
   handleEnterOrSpace(e: KeyboardEvent): void {
-    if (isEnter(e) || isSpace(e)) {
-      e.preventDefault();
-      const clickedItem = e.target as UDExListItemBase;
-      this.onItemPress(clickedItem);
-    }
+    e.preventDefault();
+    const clickedItem = e.target as UDExListItemBase;
+    this.onItemPress(clickedItem);
   }
 
   handleUpArrow(e: KeyboardEvent): void {
-    if (isUp(e)) {
-      e.preventDefault();
-      const items = this.getKeyboardNavigationItems();
-      const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
-      const lastItemIndex = items.length - 1;
-      const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-      const isHeaderItem = items[previousSelectIndex].isGroup;
-      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;
-      }
+    e.preventDefault();
+    const items = this.getKeyboardNavigationItems();
+    const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
+    const lastItemIndex = items.length - 1;
+    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+    const isHeaderItem = items[previousSelectIndex].isGroup;
+    const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;
+
+    if (nonInteractiveHeader && previousSelectIndex === 0) {
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, lastItemIndex);
+      items[lastItemIndex].focus();
+      return;
+    }
 
-      if (this.modeRadioGroup) {
-        items[currentSelectedIndex].selected = false;
-        items[previousSelectIndex].selected = true;
-      }
+    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);
-      items[previousSelectIndex].focus();
+      this.focusHeader(items[previousSelectIndex]);
+      return;
     }
-  }
 
-  handleDownArrow(e: KeyboardEvent): void {
-    if (isDown(e)) {
-      e.preventDefault();
-      const items = this.getKeyboardNavigationItems();
-      const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
-      const nextSelectIndex = currentSelectedIndex + 1 > items.length - 1 ? 0 : currentSelectedIndex + 1;
-      const isHeaderItem = items[nextSelectIndex].isGroup;
-      const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;
-
-      if (nonInteractiveHeader) {
-        this.unsetTabIndexByIndex(items, currentSelectedIndex);
-        this.setTabIndexByIndex(items, nextSelectIndex + 1);
-        items[nextSelectIndex + 1].focus();
-        return;
-      }
+    if (this.modeRadioGroup) {
+      items[currentSelectedIndex].selected = false;
+      items[previousSelectIndex].selected = true;
+    }
 
-      if (isHeaderItem) {
-        this.unsetTabIndexByIndex(items, currentSelectedIndex);
-        this.setTabIndexByIndex(items, nextSelectIndex);
-        this.focusHeader(items[nextSelectIndex]);
-        return;
-      }
+    this.unsetTabIndexByIndex(items, currentSelectedIndex);
+    this.setTabIndexByIndex(items, previousSelectIndex);
+    items[previousSelectIndex].focus();
+  }
 
-      if (this.modeRadioGroup) {
-        items[currentSelectedIndex].selected = false;
-        items[nextSelectIndex].selected = true;
-      }
+  handleDownArrow(e: KeyboardEvent): void {
+    e.preventDefault();
+    const items = this.getKeyboardNavigationItems();
+    const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
+    const nextSelectIndex = currentSelectedIndex + 1 > items.length - 1 ? 0 : currentSelectedIndex + 1;
+    const isHeaderItem = items[nextSelectIndex].isGroup;
+    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);
-      items[nextSelectIndex].focus();
+      this.focusHeader(items[nextSelectIndex]);
+      return;
     }
-  }
 
-  handleHomeKey(e: KeyboardEvent): void {
-    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 (this.modeRadioGroup) {
+      items[currentSelectedIndex].selected = false;
+      items[nextSelectIndex].selected = true;
+    }
 
-      if (isHeaderItem) {
-        this.unsetTabIndexByIndex(items, currentSelectedIndex);
-        this.setTabIndexByIndex(items, 0);
-        this.focusHeader(items[0]);
-        return;
-      }
+    this.unsetTabIndexByIndex(items, currentSelectedIndex);
+    this.setTabIndexByIndex(items, nextSelectIndex);
+    items[nextSelectIndex].focus();
+  }
 
-      if (this.modeRadioGroup) {
-        items[currentSelectedIndex].selected = false;
-        items[0].selected = true;
-      }
+  handleHomeKey(e: KeyboardEvent): void {
+    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);
-      items[0].focus();
+      this.focusHeader(items[0]);
+      return;
+    }
+
+    if (this.modeRadioGroup) {
+      items[currentSelectedIndex].selected = false;
+      items[0].selected = true;
     }
+
+    this.unsetTabIndexByIndex(items, currentSelectedIndex);
+    this.setTabIndexByIndex(items, 0);
+    items[0].focus();
   }
 
   handleEndKey(e: KeyboardEvent): void {
-    if (isEnd(e)) {
-      e.preventDefault();
-      const items = this.getKeyboardNavigationItems();
-      const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
+    e.preventDefault();
+    const items = this.getKeyboardNavigationItems();
+    const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
 
-      if (this.modeRadioGroup) {
-        items[currentSelectedIndex].selected = false;
-        items[items.length - 1].selected = true;
-      }
-
-      this.unsetTabIndexByIndex(items, currentSelectedIndex);
-      this.setTabIndexByIndex(items, items.length - 1);
-      items[items.length - 1].focus();
+    if (this.modeRadioGroup) {
+      items[currentSelectedIndex].selected = false;
+      items[items.length - 1].selected = true;
     }
+
+    this.unsetTabIndexByIndex(items, currentSelectedIndex);
+    this.setTabIndexByIndex(items, items.length - 1);
+    items[items.length - 1].focus();
   }
 
-  onItemPress(clickedItem :UDExListItemBase): void {
+  handleLetterKey(e: KeyboardEvent): void {
+    const letterKey = e.key;
+    e.stopPropagation();
+    e.preventDefault();
+    listItemLabelStartsWithKeyFocus(letterKey, this._focusableListItems, this._letterKeyHandlerObj);
+  }
+
+  onItemPress(clickedItem: UDExListItemBase): void {
     if (this.modeSingleSelect && !this.controlled) {
       this.revertSelectedItems(this.getSelectedItems());
       clickedItem.selected = true;
@@ -333,6 +360,14 @@ class UDExList extends UI5Element {
     });
   }
 
+  focusSelectedItem(): void {
+    const selectedItemIndex = this.items.findIndex(item => item.selected);
+    this.resetTabIndexes();
+    if (selectedItemIndex !== -1 && this.modeSingleSelect) {
+      this.setTabIndexByIndex(this.items, selectedItemIndex);
+    }
+  }
+
   focusHeader(item: UDExListItemBase): void {
     const header = item.shadowRoot?.querySelector(".udex-list__group-header") as HTMLElement;
     header.focus();
@@ -346,6 +381,41 @@ class UDExList extends UI5Element {
     items[index]._tabIndex = "0";
   }
 
+  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;
+  }
+
+  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;
+  }
+
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }

package/src/ListItem.hbs

@@ -51,7 +51,7 @@
     </li>
 {{/if}}
 {{#*inline "contentList"}}
-    <div class="udex-list__content-wrap" _id="{{this._id}}" aria-labelledby="{{this._id}}-invisibleText">
+    <div class="udex-list__content-wrap" _id="{{this._id}}" aria-labelledby="{{this._id}}-invisibleText" aria-label="{{accessibleListItemName}}">
         {{#if flag}}
             <div class="udex-list__flag-wrap">
                  <span class="udex-list__flag" style="background-position: {{flagPosition}}"></span>
@@ -120,6 +120,6 @@
                 {{/if}}
             {{/if}}
         </div>
-      <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleName}}</div>
+      <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
     </div>
 {{/inline}}

package/src/ListItem.ts

@@ -393,6 +393,10 @@ class UDExListItem extends UDExListItemBase {
     return this.size === ListItemSize.Large;
   }
 
+  get accessibleListItemName(): string {
+    return this.accessibleName || this.label;
+  }
+
   get stateAccessibleName(): string {
     if (this.indeterminate) { return UDExListItem.i18nBundle.getText(INDETERMINATE); }
     return `${this.selected ? UDExListItem.i18nBundle.getText(SELECTED) : UDExListItem.i18nBundle.getText(UNSELECTED)} `;

package/src/MastheadItem.hbs

@@ -1,4 +1,11 @@
 {{#if hasHref}}
+    {{#if isTargetBlank}}
+        <span
+            id="new-win-desc"
+            class="udex-masthead-hidden-text">
+            {{openInNewWindowText}}
+        </span>
+    {{/if}}
     <a
         id="{{this._id}}"
         class="{{additionalClass}}"
@@ -6,8 +13,8 @@
         role="{{accessibleRoleName}}"
         target="{{target}}"
         href="{{href}}"
-        aria-labelledby="{{ariaLabelledBy}}"
         aria-label="{{accessibleLabel}}"
+        aria-describedby="{{ariaDescribedBy}}"
         @click="{{handleNavigationItemClick}}">
         {{> content}}
     </a>
@@ -17,7 +24,8 @@
         role="combobox"
         class="udex-masthead-item__btn {{additionalClass}}"
         aria-expanded="{{selected}}"
-        aria-labelledby="{{ariaLabelledBy}}"
+        aria-describedby="{{ariaDescribedBy}}"
+        aria-controls="{{this._id}}_dropdown"
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
@@ -33,7 +41,7 @@
         id="{{this._id}}"
         class="udex-masthead-item__btn {{additionalClass}}"
         aria-expanded="{{selected}}"
-        aria-labelledby="{{ariaLabelledBy}}"
+        aria-describedby="{{ariaDescribedBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
@@ -70,8 +78,10 @@
 
 {{#*inline "dropdown"}}
     <div
+        id="{{this._id}}_dropdown"
         class="udex-masthead-item__dropdown"
-        @keydown="{{handleKeyDown}}">
+        @keydown="{{handleKeyDown}}"
+        @focusout="{{handleFocusout}}">
         <div class="udex-masthead-item__dropdown-holder">
             <slot name="dropdown"></slot>
         </div>

package/src/MastheadItem.ts

@@ -10,7 +10,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { PROFILE } from "./generated/i18n/i18n-defaults.js";
+import { OPENS_IN_A_NEW_WINDOW, PROFILE } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
 import MastheadShell from "./MastheadShell.js";
@@ -53,6 +53,13 @@ export type ItemClickEventDetail = {
   item: UDExMastheadItem,
 }
 
+export enum Target {
+  _blank = "_blank",
+  _parent = "_parent",
+  _self = "_self",
+  _top = "_top",
+}
+
 /**
  * @class
  *
@@ -73,6 +80,7 @@ export type ItemClickEventDetail = {
 @customElement({
   tag: "udex-masthead-item",
   renderer: litRender,
+  languageAware: true,
   styles: MastheadItemCss,
   template: MastheadItemTemplate,
   dependencies: [
@@ -93,7 +101,7 @@ export type ItemClickEventDetail = {
       type: HTMLElement,
     },
     originalEvent: {
-      type: PointerEvent,
+      type: Event,
     },
   },
 })
@@ -157,8 +165,8 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * <b>Note:</b> Standard hyperlink behavior is supported.
    * @public
    */
-  @property({ type: String })
-    target!: string;
+  @property({ type: Target, defaultValue: Target._self })
+    target!: Target;
 
   /**
    * Controls the ARIA name of the item
@@ -243,6 +251,15 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  handleFocusout(e: FocusEvent): void {
+    const eTarget = e.relatedTarget as HTMLElement;
+    const focusedAvatarItem = eTarget?.shadowRoot?.querySelector("[ui5-avatar]");
+
+    if (!this.isMobile && (!this.isProfileBtn || eTarget === null || focusedAvatarItem)) {
+      this.closeDropdown();
+    }
+  }
+
   handleKeyDown(e: KeyboardEvent): void {
     if (isEscape(e) && this.hasDropdownSlot) {
       if (this.isMobile) {
@@ -253,8 +270,8 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
-  handleKeyEscape() {
-    this.selected = false;
+  handleKeyEscape(): void {
+    this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
     } else {
@@ -324,6 +341,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  closeDropdown(): void {
+    this.selected = false;
+  }
+
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
@@ -340,7 +361,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     const iconClass = this.icon ? "udex-masthead-item__button--icon" : "";
     const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
     const exploreClass = this.isExploreBtn ? "udex-masthead-item__button--explore" : "";
-    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass}`;
+    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass}`.trim();
   }
 
   get profileAvatar(): UDExAvatar {
@@ -367,7 +388,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.selected ? " udex-masthead-item__button--active" : "";
   }
 
-  get ariaLabelledBy(): string {
+  get ariaDescribedBy(): string {
     const labels = [];
 
     if (this.text) {
@@ -378,7 +399,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       labels.push(`${this.__id}-icon`);
     }
 
-    return labels.join(" ");
+    if (this.isTargetBlank) {
+      labels.push(`new-win-desc`);
+    }
+
+    return labels.join(" ").trim();
   }
 
   get showDropdown(): boolean {
@@ -412,6 +437,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   get isMobile(): boolean {
     return window.innerWidth < breakpointSizeM;
   }
+
+  get isTargetBlank(): boolean {
+    return this.target === Target._blank;
+  }
+
+  get openInNewWindowText(): string {
+    return UDExMastheadItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
+  }
 }
 
 UDExMastheadItem.define();

package/src/MastheadMenu.hbs

@@ -22,6 +22,7 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
         <udex-masthead-menu-item
+            id="category-{{categoryId}}"
             @click="{{../../handleMenuItemClick}}"
             url="{{this.url}}"
             label="{{this.category}}"
@@ -33,16 +34,15 @@
 {{/inline}}
 
 {{#*inline "list"}}
-    <ul class="udex-masthead-menu__list" role="menu">
+    <ul class="udex-masthead-menu__list" aria-labelledby="category-{{categoryId}}">
         {{#each this.items}}
-            <li role="none">
+            <li>
                 <udex-masthead-menu-item
                     @click="{{../../../handleMenuItemClick}}"
                     badge="{{this.badge}}"
                     ?external-link="{{this.externalLink}}"
                     url="{{this.url}}"
-                    label="{{this.title}}"
-                    role="menuitem" >
+                    label="{{this.title}}">
                 </udex-masthead-menu-item>
             </li>
         {{/each}}