@sapudex/web-components 2.58.0 → 2.60.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.58.0",
+  "version": "2.60.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -9801,6 +9801,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.\n- **footer** - Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the tab list.\n\nWhen set, screen readers announce this text as the name of the tab group\n(e.g. \"Profile navigation\") as focus enters the tabs. When empty, the tab\nlist is exposed by its role only, with no accessible name.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "auto-play",
               "description": "Enables automatic tab switching for Vertical orientation.",
@@ -9878,6 +9883,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the tab list.\n\nWhen set, screen readers announce this text as the name of the tab group\n(e.g. \"Profile navigation\") as focus enters the tabs. When empty, the tab\nlist is exposed by its role only, with no accessible name.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "auto-play",
                 "description": "Enables automatic tab switching for Vertical orientation.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.58.0",
+  "version": "2.60.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.25.0",
-    "@ui5/webcomponents-base": "2.25.0",
-    "@ui5/webcomponents-fiori": "2.25.0",
-    "@ui5/webcomponents-icons": "2.25.0",
-    "@ui5/webcomponents-localization": "2.25.0",
-    "@ui5/webcomponents-theming": "2.25.0",
+    "@ui5/webcomponents": "2.27.0",
+    "@ui5/webcomponents-base": "2.27.0",
+    "@ui5/webcomponents-fiori": "2.27.0",
+    "@ui5/webcomponents-icons": "2.27.0",
+    "@ui5/webcomponents-localization": "2.27.0",
+    "@ui5/webcomponents-theming": "2.27.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "^8.23.6"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.25.0",
+    "@ui5/webcomponents-tools": "2.27.0",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/ListGroupHeaderBase.ts

@@ -233,6 +233,15 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get singleCollapsibleHeaderRole(): string {
+    // In aria-activedescendant mode (SelectBox/CountrySelector) the HOST element
+    // carries the treeitem role + state (set via SearchableListBaseTemplate's
+    // hostAriaAttrs). The inner focusable div must then be presentational, otherwise
+    // it is a second treeitem nested inside the host treeitem with no owning
+    // tree/group — the "role not inside the required context" axe/SiteImprove error.
+    // Mirrors UDExListItem.roleItem, which is presentational under _useHostAriaRole.
+    if (this._useHostAriaRole) {
+      return "presentation";
+    }
     return this._treeMode ? "treeitem" : "button";
   }
 

package/src/ListGroupHeaderTemplate.tsx

@@ -85,6 +85,20 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
   // (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat
   // structure with the content region emitted as a sibling by the template body.
   const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;
+  // In aria-activedescendant mode (SelectBox) the HOST element is the treeitem and
+  // already carries aria-expanded + the accessible name. This inner div must then be
+  // presentational (singleCollapsibleHeaderRole) and must NOT duplicate those states,
+  // otherwise it is a second treeitem nested inside the host treeitem with no owning
+  // tree/group (axe/SiteImprove aria-required-parent). It stays focusable, though:
+  // clicking the collapsible-header body relies on it receiving DOM focus to redirect
+  // focus back to the combobox input — the same focusable, role="presentation" shape
+  // the list-item [part=item] divs already use. The real-focus (FilterMenu) path keeps
+  // the treeitem semantics plus controls/labelling on this div.
+  const headerAriaAttrs = this._useHostAriaRole ? {} : {
+    "aria-expanded": this.expanded,
+    "aria-controls": this.ariaControlsId,
+    "aria-labelledby": this.collapsibleHeaderLabelledBy,
+  };
   return (
     <div
       class={`udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`}
@@ -93,9 +107,7 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
       role={this.singleCollapsibleHeaderRole as AriaRole}
       tabIndex={0}
       onKeyDown={this.handleKeyDown}
-      aria-expanded={this.expanded}
-      aria-controls={this.ariaControlsId}
-      aria-labelledby={this.collapsibleHeaderLabelledBy}
+      {...headerAriaAttrs}
       _tab-index={Number(this._effectiveTabIndex)}>
       {nested ? (
         <>

package/src/MastheadCountrySelectorTemplate.tsx

@@ -45,12 +45,13 @@ function activeRegionView(this: UDExMastheadCountrySelector) {
       )}
       <div class="udex-masthead-country-selector__list-container">
         <div class="udex-masthead-country-selector__list-wrap" onScroll={this.handleCountryListShadowVisible}>
-          <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
+          <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries">
             {this._activeCountries.map((country, index) => (
-              <li role="none" key={index}>
+              <li key={index}>
                 <UDExMastheadMenuItem
                   class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
                   onClick={this.handleCountryClick as any}
+                  accessible-role="link"
                   url={country.url}
                   label={country.displayTitle}
                   index={index}

package/src/RatingIndicatorTemplate.tsx

@@ -25,7 +25,6 @@ export default function RatingIndicatorTemplate(this: UDExRatingIndicator) {
       aria-description={this._ariaDescription}
       tabindex={this.effectiveTabIndex}
       onFocusIn={this._onfocusin}
-      onFocusOut={this._onfocusout}
       onClick={this._onclick}
       onKeyDown={this._onkeydown}
       title={this.ratingTooltip}

package/src/SecondaryNavigation.ts

@@ -4,7 +4,7 @@ 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-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -16,7 +16,7 @@ import type UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
-import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
+import SecondaryNavigationTemplate from "./SecondaryNavigationTemplate.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
@@ -71,7 +71,7 @@ type UDExSecondaryNavigationMobileMenuOpenerClickEventDetail = {
  */
 @customElement({
   tag: "udex-secondary-navigation",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SecondaryNavigationCss],
   template: SecondaryNavigationTemplate,
   dependencies: [UDExSecondaryNavigationItem],

package/src/SecondaryNavigationItem.ts

@@ -3,8 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import {
   isEscape, isEnter, isSpace, isLeft, isRight, isUp, isDown, isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -13,9 +12,8 @@ import parseRelativeUnits from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import type { NavItem } from "./SecondaryNavigationItemBase.js";
 import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
-import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavigationItemTemplate.lit.js";
+import SecondaryNavigationItemTemplate from "./SecondaryNavigationItemTemplate.js";
 
 // Styles
 import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationItem.css.js";
@@ -54,10 +52,10 @@ type UDExSecondaryNavigationItemSubItemClickEventDetail = {
  */
 @customElement({
   tag: "udex-secondary-navigation-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SecondaryNavigationItemCss],
   template: SecondaryNavigationItemTemplate,
-  dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
+  dependencies: [UDExSecondaryNavigationSubItem],
 })
 
 /**

package/src/SecondaryNavigationItemBase.ts

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { UDExTarget } from "./types/common.js";
@@ -30,7 +30,7 @@ export type NavItem = {
  * @public
  */
 @customElement({
-  renderer: litRender,
+  renderer: jsxRenderer,
 })
 
 class UDExSecondaryNavigationItemBase extends UI5Element {

package/src/SecondaryNavigationItemTemplate.tsx

@@ -0,0 +1,80 @@
+import type UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
+import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+export default function SecondaryNavigationItemTemplate(this: UDExSecondaryNavigationItem) {
+  if (this.isLink) {
+    return (
+      <a
+        className="udex-secondary-navigation__item"
+        tabindex={0}
+        href={this.path}
+        target={this.target}
+        aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+        onKeyDown={this.handleItemLinkKeyDown}
+        onClick={this.fireNavItemClickEvent as any}
+        {...{ "active": this.isActive || undefined }}>
+        {this.itemLabel}
+      </a>
+    );
+  }
+
+  return (
+    <>
+      <button
+        className="udex-secondary-navigation__item"
+        tabindex={0}
+        aria-haspopup={this.hasNestedItems}
+        aria-expanded={this.isOpen}
+        aria-label={this.ariaLabel || undefined}
+        onKeyDown={this.handleItemEnterOrSpaceKeys}
+        onClick={this.openDropdown as any}
+        {...{ "active": this.isActive || undefined }}>
+        <span className="udex-secondary-navigation__item-text-wrap">
+          {this.itemLabel}
+          {this._subTitle && (
+            <span className="udex-secondary-navigation__item-sub-title">
+              {this._subTitle}
+            </span>
+          )}
+          {this.hasNestedItems && (
+            <UI5Icon
+              class="udex-secondary-navigation__item-icon"
+              name={slimArrowDownIcon}
+              mode={IconMode.Decorative}>
+            </UI5Icon>
+          )}
+        </span>
+      </button>
+      {this.isOpen && (
+        <div className="udex-secondary-navigation__dropdown">
+          <ul
+            className="udex-secondary-navigation__dropdown-list"
+            onKeyDown={this.handleSubItemKeyDown}>
+            {this._processedItems.map((item, index) => (
+              <li>
+                <UDExSecondaryNavigationSubItem
+                  index={index}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-back-item-click={this.onBackClick}
+                  is-back={item.isBack || undefined}
+                  label={item.title}
+                  mobile-link-title={item.mobileLinkTitle}
+                  nestedItems={item.items ?? []}
+                  path={item.path}
+                  target={item.target}
+                  active={item.active}>
+                </UDExSecondaryNavigationSubItem>
+              </li>
+            ))}
+          </ul>
+          <div onKeyDown={this.handleButtonsEscKey}>
+            <slot></slot>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/SecondaryNavigationSubItem.ts

@@ -1,16 +1,13 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import type { NavItem } from "./SecondaryNavigationItemBase.js";
 import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { BACK_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryNavigationSubItemTemplate.lit.js";
+import SecondaryNavigationSubItemTemplate from "./SecondaryNavigationSubItemTemplate.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -45,10 +42,9 @@ type UDExSecondaryNavigationSubItemBackClickEventDetail = {
  */
 @customElement({
   tag: "udex-secondary-navigation-sub-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: SecondaryNavigationSubItemCss,
   template: SecondaryNavigationSubItemTemplate,
-  dependencies: [UI5Icon],
 })
 
 /**

package/src/SecondaryNavigationSubItemTemplate.tsx

@@ -0,0 +1,63 @@
+import type UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowLeftIcon from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function SecondaryNavigationSubItemTemplate(this: UDExSecondaryNavigationSubItem) {
+  if (this.isBack) {
+    return (
+      <button
+        className="udex-secondary-navigation__dropdown-item"
+        onClick={this.onBackItemClick as any}
+        aria-label={this.backButtonAriaLabel}
+        tabindex={0}
+        {...{ "is-back": "" }}>
+        <UI5Icon
+          class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back"
+          name={slimArrowLeftIcon}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+        {this.itemLabel}
+      </button>
+    );
+  }
+
+  if (this.isButton) {
+    return (
+      <button
+        onClick={this.onItemClick as any}
+        aria-haspopup={this.hasItems || undefined}
+        {...{
+          "sub-active": this.isSubItemActive || undefined,
+          "active": this.active || undefined,
+        }}
+        aria-label={this.label || undefined}
+        tabindex={0}
+        aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+        className="udex-secondary-navigation__dropdown-item">
+        {this.itemLabel}
+        {this.hasItems && (
+          <UI5Icon
+            class="udex-secondary-navigation__dropdown-icon"
+            name={slimArrowRightIcon}
+            mode={IconMode.Decorative}>
+          </UI5Icon>
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <a
+      className="udex-secondary-navigation__dropdown-item"
+      onClick={this.onItemClick as any}
+      href={this.path}
+      target={this.target}
+      tabindex={0}
+      aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+      {...{ "active": this.active || undefined }}>
+      {this.itemLabel}
+    </a>
+  );
+}

package/src/SecondaryNavigationTemplate.tsx

@@ -0,0 +1,90 @@
+import type UDExSecondaryNavigation from "./SecondaryNavigation.js";
+import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
+
+export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigation) {
+  return (
+    <div className={this.rootClass}>
+      {this.hasBreadcrumbsSlot && (
+        <div className="udex-secondary-navigation__breadcrumbs">
+          <slot name="breadcrumbs"></slot>
+        </div>
+      )}
+      <div className="udex-secondary-navigation__holder">
+        {this.heading.length > 0 && (
+          <div className="udex-secondary-navigation__heading">
+            {this.headingHref.length > 0 ? (
+              <a
+                className="udex-secondary-navigation__title"
+                tabindex={0}
+                onClick={this.handleHeadingClick as any}
+                href={this.headingHref}>
+                {this.heading}
+              </a>
+            ) : (
+              <span className="udex-secondary-navigation__title">{this.heading}</span>
+            )}
+          </div>
+        )}
+        <nav className="udex-secondary-navigation__wrap">
+          <ul
+            className="udex-secondary-navigation__list"
+            onKeyDown={this.handleKeyDown}>
+            {this.visibleItems.map((item, index) => (
+              <li className="udex-secondary-navigation__list-item">
+                <UDExSecondaryNavigationItem
+                  index={index}
+                  active={item.active}
+                  path={item.path}
+                  label={item.title}
+                  mobile-link-title={item.mobileLinkTitle}
+                  target={item.target}
+                  subItems={item.items ?? []}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-nav-item-click={this.handleItemClick}
+                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                </UDExSecondaryNavigationItem>
+              </li>
+            ))}
+            {this._showMoreButton && (
+              <li className="udex-secondary-navigation__list-item">
+                <UDExSecondaryNavigationItem
+                  index={this.visibleItems.length}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-nav-item-click={this.handleItemClick}
+                  label={this.moreButtonText}
+                  subItems={this._overflowItems}
+                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                </UDExSecondaryNavigationItem>
+              </li>
+            )}
+          </ul>
+          {this.hasDesktopButtonsSlot && (
+            <div className="udex-secondary-navigation__buttons">
+              <slot name="buttons"></slot>
+            </div>
+          )}
+        </nav>
+      </div>
+      <UDExSecondaryNavigationItem
+        class="udex-secondary-navigation__mobile-nav"
+        role="button"
+        aria-label={this.mobileMenuOpenerAriaLabel}
+        label={this.heading}
+        mobile-link-title={this.title}
+        onui5-nav-item-click={this.handleMobileMenuOpenerClick}
+        onui5-sub-item-click={this.handleSubItemClick}
+        onKeyDown={this.handleKeyDown}
+        subItems={this.parsedItems}
+        {...{
+          "_is-mobile-menu-opener": "",
+          "_max-height": this.maxDropdownHeight
+        }}>
+        {this.hasMobileButtonsSlot && (
+          <div className="udex-secondary-navigation__buttons" onClick={this.handleMobileButtonsClick}>
+            <slot name="buttons"></slot>
+          </div>
+        )}
+      </UDExSecondaryNavigationItem>
+    </div>
+  );
+}

package/src/SelectBase.ts

@@ -353,6 +353,31 @@ class UDExSelectBase extends UDExSearchableListBase {
     this._setActiveDescendant(items[firstIndex], false);
   }
 
+  /**
+   * Establishes the initial aria-activedescendant when the dropdown opens, without moving
+   * DOM focus. In SingleSelect mode the currently selected item is activated so reopening
+   * restores focus to it; when nothing is selected (or in other modes) the first navigable
+   * item is activated instead.
+   */
+  _activateSelectedOrFirstItem(): void {
+    const items = this._list?.getKeyboardNavigationItems();
+    if (!items?.length) {
+      return;
+    }
+
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    const selectedIndex = this.modeSingleSelect
+      ? items.findIndex(item => item.selected && !item.isGroup)
+      : -1;
+    const targetIndex = selectedIndex >= 0 ? selectedIndex : firstIndex;
+
+    this._list.setTabIndexByIndex(items, targetIndex);
+    this._setActiveDescendant(items[targetIndex], false);
+    if (this.showImageFlags) {
+      this.handleImagePosition(items, targetIndex);
+    }
+  }
+
   /**
    * Navigates to the item at the given index, updating aria-activedescendant and _selectedOption.
    */
@@ -490,48 +515,6 @@ class UDExSelectBase extends UDExSearchableListBase {
     this._navigateToIndex(items, firstIndex);
   }
 
-  handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
-    const nextIndex = currentSelectedIndex + 1;
-    const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;
-    const isNonInteractive = items[nextSelectIndex].nonInteractive && !items[nextSelectIndex].collapsible;
-
-    if (isNonInteractive) {
-      const skipIndex = nextSelectIndex + 1 > lastItemIndex ? 0 : nextSelectIndex + 1;
-      this._selectedOption = items[skipIndex].label;
-      if (this.showImageFlags) {
-        this.handleImagePosition(items, skipIndex);
-      }
-      return;
-    }
-
-    this._selectedOption = items[nextSelectIndex].label;
-
-    if (this.showImageFlags) {
-      this.handleImagePosition(items, nextSelectIndex);
-    }
-  }
-
-  handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
-    const prevIndex = currentSelectedIndex - 1;
-    const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;
-    const isNonInteractive = items[previousSelectIndex].nonInteractive && !items[previousSelectIndex].collapsible;
-
-    if (isNonInteractive) {
-      const skipIndex = previousSelectIndex === 0 ? lastItemIndex : previousSelectIndex - 1;
-      this._selectedOption = items[skipIndex].label;
-      if (this.showImageFlags) {
-        this.handleImagePosition(items, skipIndex);
-      }
-      return;
-    }
-
-    this._selectedOption = items[previousSelectIndex].label;
-
-    if (this.showImageFlags) {
-      this.handleImagePosition(items, previousSelectIndex);
-    }
-  }
-
   handleLetterKeyPress(e: KeyboardEvent) {
     e.stopPropagation();
     e.preventDefault();
@@ -638,10 +621,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (isDownAndPopoverClosed) {
       e.preventDefault();
       this.openDropdown();
-      this._activateFirstItem();
-      if (this.showImageFlags) {
-        this.handleImagePosition(items, firstIndex);
-      }
+      this._activateSelectedOrFirstItem();
       return;
     }
 
@@ -799,6 +779,9 @@ class UDExSelectBase extends UDExSearchableListBase {
       this._expandCollapsedGroupsWithSelection();
       return renderFinished();
     }).then(() => {
+      if (!this._activeDescendantItem) {
+        this._activateSelectedOrFirstItem();
+      }
       this._handleDropdownScroll();
       this._announceCurrentOrFirst();
     }).catch(() => {});