@sapudex/web-components 2.56.0 → 2.58.0

package/src/MastheadShellTemplate.tsx

@@ -0,0 +1,228 @@
+import type UDExMastheadShell from "./MastheadShell.js";
+import UDExMastheadItem from "./MastheadItem.js";
+import UDExControlButton from "./ControlButton.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
+import menuIcon from "@ui5/webcomponents-icons/dist/menu2.js";
+
+export default function MastheadShellTemplate(this: UDExMastheadShell) {
+  return (
+    <header
+      className={this.mainClass}
+      onKeyDown={this.handleKeyDown}>
+      <div className="udex-masthead-shell__main-content">
+        <div className="udex-masthead-shell__landing-wrap">
+          {this.logoUrl && logo.call(this)}
+          {this.siteLabel && siteLabel.call(this)}
+          {this.coBrandImage && coBrand.call(this)}
+        </div>
+
+        {this.isMainMenuVisible && (
+          <nav
+            className="udex-masthead-shell__nav"
+            aria-label={this.mainNavigationAriaLabel}>
+            <ul
+              className="udex-masthead-shell__main-menu"
+              aria-label={this.mainNavigationAriaLabel}>
+              {this.menuItems.map(item => (
+                <li
+                  key={item._id}
+                  className="udex-masthead-shell__item"
+                  onui5-item-click={this.setSelectedItem}>
+                  <slot name={item._individualSlot}></slot>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </div>
+
+      {this.isSearchVisible && (
+        <>
+          <div
+            className="udex-masthead-shell__search-container"
+            onui5-search-keydown={this.handleSearchKeyDown}>
+            <slot name="search"></slot>
+          </div>
+          {this._isSearchOpened && (
+            <div className="udex-masthead-shell__btn-holder">
+              <UDExControlButton
+                class="udex-masthead-shell__close-search-btn"
+                part="search-close-button"
+                size={UDExButtonSize.Small}
+                icon={declineIcon}
+                tooltip={this.closeButtonAccessibleName}
+                accessible-name={this.closeButtonAccessibleName}
+                onClick={this.handleCloseSearch as any}>
+              </UDExControlButton>
+            </div>
+          )}
+        </>
+      )}
+
+      <div className={this.rightMenuClass}>
+        {this.hasExploreSAP && (
+          <div
+            className="udex-masthead-shell__explore"
+            onui5-item-click={this.setSelectedItem}>
+            <slot name="exploreSAP"></slot>
+          </div>
+        )}
+        {this.hasSearch && (
+          <div className="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
+            <UDExMastheadItem
+              class="udex-masthead-shell__search-btn"
+              part="search-button"
+              icon={searchIcon}
+              onClick={this.handleSearchClick as any}
+              accessible-name={this.openSearchButtonAccessibleNameText}
+              icon-alt={this.openSearchButtonAccessibleNameText}>
+            </UDExMastheadItem>
+          </div>
+        )}
+        {this.hasJoule && (
+          <div
+            className="udex-masthead-shell__joule udex-masthead-shell__item_icon"
+            onui5-item-click={this.setSelectedItem}
+            onClick={this.handleJouleClick as any}>
+            <slot name="joule"></slot>
+          </div>
+        )}
+        {this.hasCart && (
+          <div
+            className="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+            onui5-item-click={this.setSelectedItem}
+            onClick={this.handleCartClick as any}>
+            <slot name="cart"></slot>
+          </div>
+        )}
+        {this.hasSupport && (
+          <div
+            className="udex-masthead-shell__support udex-masthead-shell__item_icon"
+            onui5-item-click={this.setSelectedItem}
+            onClick={this.handleSupportClick as any}>
+            <slot name="support"></slot>
+          </div>
+        )}
+        {this.hasProfile && (
+          <div
+            className="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+            onui5-item-click={this.setSelectedItem}
+            onclick-default={this.handleProfileClick}>
+            <slot name="profile"></slot>
+          </div>
+        )}
+        {this.hasCountrySelector && (
+          <div
+            className="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
+            onui5-item-click={this.setSelectedItem}
+            onClick={this.handleCountrySelectorClick as any}>
+            <slot name="countrySelector"></slot>
+          </div>
+        )}
+        {this.hasMobileMenuButtons && (
+          <>
+            <UDExMastheadItem
+              class="udex-masthead-shell__menu-btn"
+              accessible-role="button"
+              part="menu-open-btn"
+              accessible-name="menu"
+              icon={menuIcon}
+              onui5-item-click={this.handleOpenMobileMenu}
+              {...{ "_is-menu-open-btn": "" }}>
+              <slot slot="dropdown" name="mobileMenu"></slot>
+            </UDExMastheadItem>
+            <UDExMastheadItem
+              class="udex-masthead-shell__close-btn"
+              accessible-role="button"
+              part="menu-close-btn"
+              onKeyDown={this.handleEnterAndSpaceOnCloseBtn}
+              onui5-item-click={this.closeMobileMenu}
+              icon={declineIcon}
+              accessible-name={this.mobileCloseButtonAccessibleName}
+              hide-active-border
+              {...{ "_is-menu-close-btn": "" }}>
+            </UDExMastheadItem>
+          </>
+        )}
+      </div>
+    </header>
+  );
+}
+
+function logo(this: UDExMastheadShell) {
+  return this.homeUrl ? (
+    <a
+      className="udex-masthead-shell__logo udex-masthead-shell__logo--link"
+      target="_self"
+      role="link"
+      tabindex={0}
+      onClick={this.handleLogoClick as any}
+      href={this.homeUrl}
+      title={this.logoTitle}
+      aria-label={this.homepageAriaLabel}>
+      <img
+        className="udex-masthead-shell__logo-image"
+        src={this.logoUrl}
+        alt={this.logoAlt}
+      />
+    </a>
+  ) : (
+    <div className="udex-masthead-shell__logo">
+      <img
+        className="udex-masthead-shell__logo-image"
+        src={this.logoUrl}
+        alt={this.logoAlt}
+      />
+    </div>
+  );
+}
+
+function siteLabel(this: UDExMastheadShell) {
+  return this.siteLabelUrl ? (
+    <a
+      className="udex-masthead-shell__site-label udex-masthead-shell__site-label--link"
+      role="link"
+      target="_self"
+      onClick={this.handleSiteLabelClick as any}
+      href={this.siteLabelUrl}
+      tabindex={0}
+      title={this.siteLabelTitle}
+      aria-label={this.siteLabelAriaLabel}>
+      {this.siteLabel}
+    </a>
+  ) : (
+    <div className="udex-masthead-shell__site-label">{this.siteLabel}</div>
+  );
+}
+
+function coBrand(this: UDExMastheadShell) {
+  return this.coBrandUrl ? (
+    <div className="udex-masthead-shell__co-brand">
+      <a
+        className="udex-masthead-shell__co-brand-link"
+        target="_self"
+        role="link"
+        onClick={this.handleCoBrandClick as any}
+        href={this.coBrandUrl}
+        tabindex={0}
+        title={this.coBrandTitle}
+        aria-label={this.coBrandAriaLabel}>
+        <img
+          className="udex-masthead-shell__co-brand-image"
+          src={this.coBrandImage}
+          alt={this.coBrandAlt}
+        />
+      </a>
+    </div>
+  ) : (
+    <div className="udex-masthead-shell__co-brand">
+      <img
+        className="udex-masthead-shell__co-brand-image"
+        src={this.coBrandImage}
+        alt={this.coBrandAlt}
+      />
+    </div>
+  );
+}

package/src/SearchableListBase.ts

@@ -17,7 +17,9 @@ import type UDExListItem from "./ListItem.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
 import type UDExSelectBoxItem from "./SelectBoxItem.js";
 import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
-import { NO_MATCHES_FOUND, RESULT_RETURNED, STARS } from "./generated/i18n/i18n-defaults.js";
+import {
+  NO_MATCHES_FOUND, RESULT_RETURNED, STARS,
+} from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
@@ -351,6 +353,17 @@ class UDExSearchableListBase extends UI5Element {
     if (!originalItem) { return; }
     originalItem.collapsed = e.detail.collapsed;
     originalItem.setCollapsedItems?.();
+    // NOTE: no dynamic screen-reader announcement of the new expanded/collapsed state
+    // is emitted here. JAWS announces it natively — the list uses role="tree" (see
+    // List._hasCollapsibleGroups) so JAWS enters application mode and reads the focused
+    // header's aria-expanded on every arrow toggle. VoiceOver, however, refuses to
+    // re-announce aria-expanded on a treeitem whose children role="group" is a sibling
+    // rather than a DOM descendant (unavoidable across the shadow boundary; aria-owns
+    // can't bridge the nested shadow roots in multi-select). Every aria-live approach
+    // (a shadow-local span, UI5's top-level InvisibleMessage) is dropped by VoiceOver
+    // inside this teleported popover, and a same-element focus re-read is suppressed by
+    // VoiceOver. VoiceOver still reads the full state when focus first lands on the
+    // header. This is a documented VoiceOver-specific limitation.
   }
 
   onSelectAllHeaderPress(e:CustomEvent) {
@@ -847,9 +860,32 @@ class UDExSearchableListBase extends UI5Element {
     if (this.isTreeStructure) {
       return "tree";
     }
+    if (this.isPerGroupListbox) {
+      // Each group is its own role="listbox" (see ListGroupHeaderTemplate); the outer
+      // container must be transparent, otherwise the per-group listboxes would be nested
+      // inside a listbox (invalid, and JAWS would fall back to one flat count).
+      return "presentation";
+    }
     return this.defaultAccessibleRole;
   }
 
+  /**
+   * FilterMenu real-focus SingleSelect where EVERY top-level item is a group.
+   * Renders each group as its own role="listbox" so JAWS counts options natively
+   * per group ("1 of 4"): JAWS ignores role="group" boundaries and author
+   * aria-posinset within a single listbox, but counts reliably within a flat
+   * listbox. Not engaged for aria-activedescendant widgets (SelectBox), trees,
+   * MultiSelect/RadioGroup, or mixed grouped+ungrouped lists (ungrouped options
+   * would be orphaned once the outer listbox role is dropped).
+   */
+  get isPerGroupListbox(): boolean {
+    if (this.isTreeStructure || this._activeDescendantMode || !this.modeSingleSelect) {
+      return false;
+    }
+    const items = this.items;
+    return items.length > 0 && items.every(item => item.isGroup);
+  }
+
   get listItemRole(): string {
     if (this.isTreeStructure) {
       return "treeitem";

package/src/SearchableListBaseTemplate.tsx

@@ -100,8 +100,26 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
   const { item, groupItems } = processedItem;
   const header = item as UDExListGroupHeaderBase;
   const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
+  // Position among sibling group headers, for the explicit tree-position attributes below.
+  const treeGroups = this.isTreeStructure ? this._filteredItems.filter(p => p.isGroup) : [];
+  const groupPosInSet = treeGroups.indexOf(processedItem) + 1;
+  const groupSetSize = treeGroups.length;
+  // Explicit per-group tree position for the FilterMenu (real-focus) treeitems. Scoped to
+  // MultiSelect only: the SingleSelect tree is now conformantly nested (role="group" inside
+  // the parent treeitem) so JAWS/NVDA count children natively — explicit values there just
+  // confuse JAWS. MultiSelect still uses the malformed sibling structure until Phase 2, so it
+  // keeps the explicit override. Not applied in aria-activedescendant mode (SelectBox announces
+  // position via its own live region — see [[project_selectbox_aria_live_region]]).
+  const treePositionAttrs = (!this._activeDescendantMode && this.isTreeStructure && this.modeMultiSelect) ? {
+    "_aria-pos-in-set": groupPosInSet,
+    "_aria-set-size": groupSetSize,
+  } : {};
   // In aria-activedescendant mode (SelectBox), each group header host element
   // must carry role + ARIA state so screen readers can reach them via the pointer.
+  // In real-focus mode (FilterMenu) the host is always transparent (role="none"):
+  // the shadow DOM's div.udex-list__group provides the single role="group" with
+  // aria-labelledby="group-heading" in non-tree mode; in tree mode the treeitem is
+  // on the focusable div inside the shadow.
   const hostAriaAttrs = this._activeDescendantMode ? {
     role: (this.isTreeStructure ? "treeitem" : "option") as AriaRole,
     "aria-label": cleanLabel(item.label ?? ""),
@@ -110,13 +128,15 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
     "aria-disabled": item.disabled ? "true" as string : undefined,
     "aria-expanded": header.collapsible ? (header.expanded ? "true" as string : "false" as string) : undefined,
     "_use-host-aria-role": true,
-  } : { role: (this.isTreeStructure ? "none" : "group") as AriaRole };
+  } : { role: "none" as AriaRole };
   return (
     <UDExListGroupHeader
       key={index}
       id={item._id}
       {...hostAriaAttrs}
+      {...treePositionAttrs}
       _tree-mode={this.isTreeStructure || undefined}
+      _group-as-listbox={this.isPerGroupListbox || undefined}
       {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
@@ -135,7 +155,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
       onAccordionIconClick={this.handleAccordionIconClick}
       indeterminate={header.indeterminate}>
       {groupItems.map((child, i) =>
-        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)
+        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect, i + 1, groupItems.length)
       )}
     </UDExListGroupHeader>
   );
@@ -151,6 +171,8 @@ function renderListItem(
   activeDescendantMode?: boolean,
   isTreeStructure?: boolean,
   modeMultiSelect?: boolean,
+  posInSet?: number,
+  setSize?: number,
 ) {
   // In aria-activedescendant mode (SelectBox), role + ARIA state must be on the
   // host element so screen readers can reach them via the aria-activedescendant pointer.
@@ -167,6 +189,19 @@ function renderListItem(
   } : {
     ...(accessibleRole ? { "accessible-role": accessibleRole } : {}),
   };
+  // Explicit per-group position for FilterMenu real-focus items. Applied whenever
+  // posInSet/setSize are provided (i.e. items inside a group header), across all
+  // modes except aria-activedescendant (SelectBox uses its own live region):
+  //   • Non-tree grouped listbox (SingleSelect non-collapsible): options get per-group
+  //     counts since native shadow-DOM counting is unreliable for nested custom elements.
+  //   • SingleSelect conformant-nested tree: explicit values match the native structural
+  //     count, so JAWS trusts and re-announces on every arrow step (not just group entry).
+  //   • MultiSelect sibling tree (Phase 2 pending): keeps the fix-20 override.
+  // Not applied in aria-activedescendant mode (SelectBox — see [[project_selectbox_aria_live_region]]).
+  const treePositionAttrs = (!activeDescendantMode && posInSet != null && setSize != null) ? {
+    "_aria-pos-in-set": posInSet,
+    "_aria-set-size": setSize,
+  } : {};
   return (
     <UDExListItem
       key={index}
@@ -198,6 +233,7 @@ function renderListItem(
       size={item.size}
       type={item.type}
       {...hostAriaAttrs}
+      {...treePositionAttrs}
       {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>
     </UDExListItem>
   );

package/src/SecondaryNavigation.ts

@@ -25,8 +25,9 @@ import translate from "./utils/translate.js";
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
-const canvasContentFont: string = "16px / 17.6px '72 Brand Variable'";
+const canvasContentFont: string = "14px '72 Brand Variable'";
 const rootClass = "udex-secondary-navigation__root";
+const ITEM_ICON_WIDTH = 20;
 
 type UDExSecondaryNavigationClickEventDetail = {
   originalEvent: Event,
@@ -268,7 +269,10 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   reflowItems(): void {
-    const availableWidth = this.rootHolder.offsetWidth - (this.headingHolder?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
+    const headingWidth = this.headingHolder
+      ? this.headingHolder.offsetWidth + (parseFloat(getComputedStyle(this.headingHolder).marginInlineEnd) || 0)
+      : 0;
+    const availableWidth = this.rootHolder.offsetWidth - headingWidth - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
     const itemsGap = 20;
     const widths = this.parsedItems.map(item => this.getItemWidth(item));
@@ -306,16 +310,27 @@ class UDExSecondaryNavigation extends UI5Element {
 
   getItemWidth(item: NavItem): number {
     const context = this.getCanvasContext();
-    context.font = canvasContentFont;
+    context.font = this.getCanvasFont();
+    const iconWidth = item.items?.length ? ITEM_ICON_WIDTH : 0;
 
-    return Math.ceil(context.measureText(item.title).width);
+    return Math.ceil(context.measureText(item.title).width) + iconWidth;
   }
 
   getMoreButtonWidth(): number {
     const context = this.getCanvasContext();
-    context.font = canvasContentFont;
+    context.font = this.getCanvasFont();
 
-    return Math.ceil(context.measureText(this.moreButtonText).width);
+    return Math.ceil(context.measureText(this.moreButtonText).width) + ITEM_ICON_WIDTH;
+  }
+
+  getCanvasFont(): string {
+    const navItem = this.domNavItems[0];
+    const btn = navItem?.shadowRoot?.querySelector<HTMLElement>(".udex-secondary-navigation__item");
+    if (btn) {
+      const cs = getComputedStyle(btn);
+      return `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+    }
+    return canvasContentFont;
   }
 
   getCanvasContext(): CanvasRenderingContext2D {

package/src/SelectBase.ts

@@ -14,7 +14,7 @@ import type UDExSearch from "./Search.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import {
-  COUNTRY_SELECT, STARS, SELECTED, UNSELECTED, INDETERMINATE, DISABLED,
+  COUNTRY_SELECT, STARS, SELECTED, UNSELECTED, INDETERMINATE, DISABLED, EXPANDED, COLLAPSED,
 } from "./generated/i18n/i18n-defaults.js";
 import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
@@ -697,6 +697,12 @@ class UDExSelectBase extends UDExSearchableListBase {
       e.preventDefault();
       const activeItem = this._activeDescendantItem;
       if (activeItem.isGroup) {
+        // Group-header selection is "select all" — only meaningful in MultiSelect.
+        // In SingleSelect (and RadioGroup) a group header is not a selectable option,
+        // so Enter/Space must do nothing (collapse/expand stays on Left/Right + chevron).
+        if (!this.modeMultiSelect) {
+          return;
+        }
         // Group header: fire header-press (same event the click handler fires) so
         // handleHeaderPress → onHeaderPress → handleGroupHeaderSelection runs.
         activeItem.fireDecoratorEvent("header-press", { item: activeItem });
@@ -1138,8 +1144,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     const parts: string[] = [];
 
     if (item.collapsible) {
-      // Use plain English — matches what AT announce for aria-expanded.
-      parts.push(item.expanded ? "expanded" : "collapsed");
+      parts.push(translate(UDExSearchableListBase, item.expanded ? EXPANDED : COLLAPSED));
     }
 
     if (item.disabled) {

package/src/Tab.ts

@@ -3,21 +3,18 @@ import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TabNavigation from "./TabNavigation.js";
 import UDExBadge from "./Badge.js";
 import { UDExTarget } from "./types/common.js";
-import TabTemplate from "./generated/templates/TabTemplate.lit.js";
-import TabHeaderTemplate from "./generated/templates/TabHeaderTemplate.lit.js";
-import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
+import TabTemplate from "./TabTemplate.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
-import translate from "./utils/translate.js";
 
 export interface ITab extends UI5Element {
   getTabInHeaderDomRef: () => ITab | null;
@@ -40,7 +37,6 @@ export interface ITab extends UI5Element {
   hasNotHref: boolean;
   hasLinkSlot: boolean;
   selectedClass: string;
-  tabNavigation: any;
   _individualSlot: string;
   _effectiveSlotName: string;
   _slotName: string;
@@ -79,7 +75,7 @@ export interface ITab extends UI5Element {
  */
 @customElement({
   tag: "udex-tab",
-  renderer: litRender,
+  renderer: jsxRenderer,
   template: TabTemplate,
   dependencies: [UDExBadge],
 })
@@ -409,22 +405,6 @@ class UDExTab extends UI5Element implements ITab {
     }
     return "";
   }
-
-  get tabNavigation() {
-    return executeTemplate(UDExTab.headerTemplate, this);
-  }
-
-  get tabInOverflow() {
-    return executeTemplate(UDExTab.overflowTemplate, this);
-  }
-
-  static get headerTemplate() {
-    return TabHeaderTemplate;
-  }
-
-  static get overflowTemplate() {
-    return TabInOverflowTemplate;
-  }
 }
 
 UDExTab.define();