@sapudex/web-components 2.60.0 → 2.62.0

package/dist/SelectBase.js

@@ -12,7 +12,7 @@ import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/
 import { cleanLabel } from "./utils/listItemLabelUtils.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, EXPANDED, COLLAPSED, } from "./generated/i18n/i18n-defaults.js";
+import { COUNTRY_SELECT, STARS, SELECTED, UNSELECTED, INDETERMINATE, EXPANDED, } from "./generated/i18n/i18n-defaults.js";
 import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
 import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
@@ -62,10 +62,9 @@ class UDExSelectBase extends UDExSearchableListBase {
          */
         this._navigating = false;
         /**
-         * Text read by screen readers when the active item changes.
-         * Announced via an aria-live="assertive" region in the template.
-         * This works regardless of shadow DOM / popover teleportation because
-         * the live region lives inside SelectBox's own shadow root.
+         * Supplemental status announced by the polite live region.
+          * Navigation uses native host semantics only. Opening and explicit selection
+          * changes retain feedback without repeating the hierarchy or input token count.
          *
          * @private
          */
@@ -81,6 +80,7 @@ class UDExSelectBase extends UDExSearchableListBase {
         this._lastSelectedItemId = "";
         this._listKeyDownListenerAdded = false;
         this._activeDescendantItem = null;
+        this._pendingSelectionAnnouncement = "";
         this._handleResizeBound = this._handleResize.bind(this);
         this._handleListKeyDownBound = this._handleListKeyDownCapture.bind(this);
     }
@@ -141,14 +141,14 @@ class UDExSelectBase extends UDExSearchableListBase {
         return raw === 0 ? lastIndex : raw - 1;
     }
     /**
-     * Sets or clears the aria-activedescendant on the combobox input and updates
-     * the aria-live region so JAWS/VoiceOver announce the item name and position.
-     * The live region is the primary announcement mechanism because aria-activedescendant
-     * across a UI5 Popover (which teleports content to document.body) is unreliable —
-     * screen readers cannot follow the ID reference across shadow root boundaries.
+     * Sets or clears the aria-activedescendant on the combobox input.
+      * The referenced host owns its name, hierarchy and state; do not repeat these
+      * in the live region on navigation.
      */
     _setActiveDescendant(item, scroll = true) {
         this._activeDescendantItem = item;
+        this._navigating = !!item;
+        this._liveRegionText = "";
         // Query the SelectBox's OWN shadow DOM for all elements bearing the class —
         // this reaches the rendered udex-list-group-header / udex-list-item elements
         // regardless of whether they are the current or a previously stale instance.
@@ -159,21 +159,11 @@ class UDExSelectBase extends UDExSearchableListBase {
         });
         if (!item) {
             this._search.removeAttribute("aria-activedescendant");
-            this._liveRegionText = "";
             return;
         }
         item.classList.add("_udex-active-descendant");
         item.setAttribute("_active-descendant", "");
-        this._search.setAttribute("aria-activedescendant", item._id);
-        // Update the live region with tree-aware position and state so JAWS/VoiceOver
-        // announce the active item regardless of whether the popover is teleported to document.body.
-        if (this._list) {
-            const label = cleanLabel(item.label ?? "");
-            const supporting = item.supportingText ? cleanLabel(item.supportingText) : "";
-            const stateParts = this._itemStateLabels(item);
-            const posText = this._treePositionText(item);
-            this._liveRegionText = [label, supporting, posText, ...stateParts].filter(Boolean).join(", ");
-        }
+        this._search.setAttribute("aria-activedescendant", item.id);
         if (scroll && this._list?._scrollIntoView) {
             // Only scroll if the item is not already fully visible in the dropdown.
             const popoverContent = this._popover?.shadowRoot?.querySelector("[part=content]");
@@ -190,6 +180,38 @@ class UDExSelectBase extends UDExSearchableListBase {
             }
         }
     }
+    /** Announce explicit selection after the rendered host has caught up with source changes. @private */
+    _announceSelectionChange() {
+        const item = this._activeDescendantItem;
+        this._liveRegionText = "";
+        renderFinished().then(() => {
+            if (this._open && item && this._activeDescendantItem === item) {
+                this._liveRegionText = this._selectionAnnouncement(item);
+            }
+        }).catch(() => { });
+    }
+    /** Explicit activation feedback is distinct from native navigation announcements. @private */
+    _selectionAnnouncement(item) {
+        // CountrySelector sources are data objects, not DOM elements.
+        const name = item.getAttribute?.("aria-label") || [item.label, item.supportingText, item.getAttribute?.("additional-text"), item.hasRating ? item.ratingAriaLabel : undefined]
+            .filter(Boolean).map(text => cleanLabel(text)).join(" ");
+        const selectionState = item.selected ? SELECTED : UNSELECTED;
+        const state = translate(UDExSelectBase, item.indeterminate ? INDETERMINATE : selectionState);
+        return [name, state].filter(Boolean).join(", ");
+    }
+    /** Close feedback must survive clearing the active descendant. @private */
+    _finishDropdownClose() {
+        this._setActiveDescendant(null);
+        this._open = false;
+        this._liveRegionText = this._pendingSelectionAnnouncement;
+        this._pendingSelectionAnnouncement = "";
+        this.fireEventDropdownClose();
+    }
+    handleAccordionIconClick(e) {
+        super.handleAccordionIconClick(e);
+        // The host's aria-expanded owns this feedback; discard stale selection status.
+        this._liveRegionText = "";
+    }
     /**
      * Activates the first navigable item as the aria-activedescendant without moving DOM focus.
      */
@@ -223,6 +245,7 @@ class UDExSelectBase extends UDExSearchableListBase {
         if (this.showImageFlags) {
             this.handleImagePosition(items, targetIndex);
         }
+        return items[targetIndex];
     }
     /**
      * Navigates to the item at the given index, updating aria-activedescendant and _selectedOption.
@@ -370,8 +393,14 @@ class UDExSelectBase extends UDExSearchableListBase {
         this.resetSearchState();
         if (this.modeSingleSelect) {
             // SingleSelect closes the dropdown — clear active descendant.
+            const selectedItem = this.getItemFromList(this.getDataTokenId(item));
+            if (selectedItem) {
+                this._pendingSelectionAnnouncement = this._selectionAnnouncement(selectedItem);
+            }
             this._setActiveDescendant(null);
-            this._search.focus();
+            if (this.shadowRoot?.activeElement !== this._search) {
+                this._search.focus();
+            }
             this.closeDropdown();
             return;
         }
@@ -388,11 +417,10 @@ class UDExSelectBase extends UDExSearchableListBase {
         // Return DOM focus to the input so the clicked item loses its :focus ring.
         // Without this, the browser keeps focus on the item (from the click) and a
         // second ring appears when arrow keys move _activeDescendantItem elsewhere.
-        this._search.focus();
-        // Re-announce with the updated checked/unchecked state. The rendered item's
-        // `selected` prop is updated on the next render cycle (template re-render),
-        // so we wait for it before re-reading state labels.
-        renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => { });
+        if (this.shadowRoot?.activeElement !== this._search) {
+            this._search.focus();
+        }
+        this._announceSelectionChange();
     }
     onKeyDownSearch(e) {
         const items = this._list?.getKeyboardNavigationItems();
@@ -437,8 +465,9 @@ class UDExSelectBase extends UDExSearchableListBase {
         }
         if (isDownAndPopoverClosed) {
             e.preventDefault();
+            // Opening establishes the active descendant and its visual highlight;
+            // DOM focus remains on the input for the combobox interaction pattern.
             this.openDropdown();
-            this._activateSelectedOrFirstItem();
             return;
         }
         if (isDownAndPopoverOpened) {
@@ -451,9 +480,9 @@ class UDExSelectBase extends UDExSearchableListBase {
                 this._navigateToIndex(items, nextIndex);
             }
             else {
-                this._activateFirstItem();
+                this._activateSelectedOrFirstItem();
                 // Also update _selectedOption so the input reflects the active item.
-                const activeIdx = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+                const activeIdx = this._activeDescendantItem ? items.indexOf(this._activeDescendantItem) : firstIndex;
                 this._selectedOption = items[activeIdx].label;
                 if (this.showImageFlags) {
                     this.handleImagePosition(items, activeIdx);
@@ -499,7 +528,15 @@ class UDExSelectBase extends UDExSearchableListBase {
                 }
                 // Group header: fire header-press (same event the click handler fires) so
                 // handleHeaderPress → onHeaderPress → handleGroupHeaderSelection runs.
-                activeItem.fireDecoratorEvent("header-press", { item: activeItem });
+                // List's legacy intersection type omits SelectAll although it is a
+                // navigable group. Narrow using its explicit discriminator.
+                const selectAllItem = activeItem;
+                if (selectAllItem.isSelectAllHeader) {
+                    selectAllItem.fireDecoratorEvent("select-all", { item: activeItem });
+                }
+                else {
+                    activeItem.fireDecoratorEvent("header-press", { item: activeItem });
+                }
             }
             else {
                 // Leaf item: fire item-press so the list handles selection consistently.
@@ -534,7 +571,7 @@ class UDExSelectBase extends UDExSearchableListBase {
             return;
         }
         // Sync _selectedOption display for the first item (used when popover just opened via click).
-        if (!this._activeDescendantItem && hasItems) {
+        if (popoverOpened && !this._activeDescendantItem && hasItems) {
             this._selectedOption = items[firstIndex].label;
         }
     }
@@ -551,11 +588,10 @@ class UDExSelectBase extends UDExSearchableListBase {
     }
     onSearch(value) {
         super.onSearch(value);
-        // Route search result count into the shared live region so SelectBox
-        // only needs one aria-live span (no separate polite span in the template).
-        if (this._accSearchResultInfo) {
-            this._liveRegionText = this._accSearchResultInfo;
-        }
+        // Filtering may remove the active item. Announce only the result count until
+        // the user navigates to an item in the updated list.
+        this._setActiveDescendant(null);
+        this._liveRegionText = this._accSearchResultInfo ?? "";
     }
     handleDirection() {
         const directionStyles = window.getComputedStyle(this).getPropertyValue("direction");
@@ -572,9 +608,7 @@ class UDExSelectBase extends UDExSearchableListBase {
         this.fireEventDropdownBeforeOpen();
     }
     handleDropdownOpen() {
-        // Clear first so the live-region mutation fires even if text is unchanged.
-        this._liveRegionText = "";
-        // Defer scroll and announcement until rendering settles.
+        // Defer scrolling until rendering settles.
         // Calling _handleDropdownScroll synchronously causes getBoundingClientRect
         // to read mid-transition positions (e.g. the max-height animation on
         // collapsible group headers), producing an incorrect scroll offset.
@@ -584,64 +618,23 @@ class UDExSelectBase extends UDExSearchableListBase {
             this._expandCollapsedGroupsWithSelection();
             return renderFinished();
         }).then(() => {
-            if (!this._activeDescendantItem) {
-                this._activateSelectedOrFirstItem();
+            // The popup may have closed while its opening render was pending.
+            if (!this._open) {
+                return;
+            }
+            if (!this._activeDescendantItem && !this._shouldFilterItems) {
+                const activeItem = this._activateSelectedOrFirstItem();
+                // JAWS can miss the input's native expanded change when opening also
+                // establishes an active descendant. Retain the popup fallback unless an
+                // expanded group already supplies native "open"/"expanded" feedback.
+                // Never repeat the host's hierarchy or state after the native usage hint.
+                this._liveRegionText = activeItem?.getAttribute("aria-expanded") === "true"
+                    ? "" : translate(UDExSelectBase, EXPANDED);
             }
             this._handleDropdownScroll();
-            this._announceCurrentOrFirst();
         }).catch(() => { });
         this.fireEventDropdownOpen();
     }
-    /**
-     * Announces the currently active descendant item (if set), or the first
-     * navigable item as a fallback. Used on open and after state changes.
-     */
-    _announceCurrentOrFirst() {
-        const items = this._list?.getKeyboardNavigationItems();
-        if (!items?.length) {
-            return;
-        }
-        const item = this._activeDescendantItem ?? items.find(i => !i.nonInteractive || i.collapsible) ?? items[0];
-        if (!item) {
-            return;
-        }
-        const label = cleanLabel(item.label ?? "");
-        const stateParts = this._itemStateLabels(item);
-        const posText = this._treePositionText(item);
-        this._liveRegionText = [label, posText, ...stateParts].filter(Boolean).join(", ");
-    }
-    /**
-     * Returns the positional announcement text for an item, tree-aware when the
-     * list has groups. Matches the JAWS reading pattern of FilterMenu:
-     *   group header → "level 0, X of Y"  (Y = total navigable groups)
-     *   group child  → "level 1, X of Y"  (Y = siblings in that group)
-     *   flat item    → "X of Y"           (Y = total items, no level prefix)
-     */
-    _treePositionText(item) {
-        if (!this.isTreeStructure) {
-            const items = this._list?.getKeyboardNavigationItems() ?? [];
-            const pos = items.indexOf(item);
-            return pos >= 0 ? `${pos + 1} of ${items.length}` : "";
-        }
-        if (item.isGroup) {
-            // Position among navigable group headers.
-            const groups = (this._list?.getKeyboardNavigationItems() ?? []).filter(i => i.isGroup);
-            const pos = groups.indexOf(item);
-            return pos >= 0 ? `level 0, ${pos + 1} of ${groups.length}` : "level 0";
-        }
-        // Child item — find parent group and count siblings visible in navigation.
-        const parentGroup = item.parentElement;
-        if (parentGroup?.isGroup) {
-            const navItems = this._list?.getKeyboardNavigationItems() ?? [];
-            const siblings = navItems.filter(i => !i.isGroup && i.parentElement === parentGroup);
-            const pos = siblings.indexOf(item);
-            return pos >= 0 ? `level 1, ${pos + 1} of ${siblings.length}` : "level 1";
-        }
-        // Fallback: flat position.
-        const all = this._list?.getKeyboardNavigationItems() ?? [];
-        const pos = all.indexOf(item);
-        return pos >= 0 ? `${pos + 1} of ${all.length}` : "";
-    }
     fireEventDropdownBeforeOClose() {
         this.fireDecoratorEvent("before-close");
     }
@@ -672,10 +665,21 @@ class UDExSelectBase extends UDExSearchableListBase {
         }
     }
     openDropdown() {
+        if (this._popover.open) {
+            return;
+        }
+        this._pendingSelectionAnnouncement = "";
+        // Typing computes its result count before opening; preserve that status.
+        if (!this._shouldFilterItems) {
+            this._liveRegionText = "";
+        }
         this._popover.opener = this._trigger;
-        this._popover.open = true;
         this._open = true;
-        this._navigating = true;
+        this._navigating = false;
+        // Expose native state immediately. handleDropdownOpen supplements it after
+        // rendering because JAWS may miss this change on the first opening.
+        this._search.setAttribute("aria-expanded", "true");
+        this._popover.open = true;
         this._focused = false;
     }
     closeDropdown() {
@@ -683,6 +687,7 @@ class UDExSelectBase extends UDExSearchableListBase {
             this._open = false;
             this._popover.open = false;
             this._navigating = false;
+            this._search.setAttribute("aria-expanded", "false");
         }
     }
     inputFocusIn() {
@@ -739,16 +744,12 @@ class UDExSelectBase extends UDExSearchableListBase {
             return false;
         }
         // Left only collapses an expanded group; Right only expands a collapsed one.
-        if (collapse && !header.collapsed) {
-            header.collapsed = true;
-            this._list.setCollapsedItems(true, header);
-            renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => { });
-            return true;
-        }
-        if (!collapse && header.collapsed) {
-            header.collapsed = false;
-            this._list.setCollapsedItems(false, header);
-            renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => { });
+        if (header.collapsed !== collapse) {
+            header.collapsed = collapse;
+            this._list.setCollapsedItems(collapse, header);
+            // Synchronize the slotted source header just like a chevron click;
+            // UI5 template listeners subscribe to the prefixed decorator event.
+            header.fireDecoratorEvent("accordion-icon-click", { collapsed: collapse });
             return true;
         }
         // Target is a collapsible header but already in the requested state — still consume
@@ -900,49 +901,26 @@ class UDExSelectBase extends UDExSearchableListBase {
         };
         findAndFocus(this);
     }
-    /**
-     * Builds the state portion of the live region announcement for a navigation item.
-     * Returns an array of state strings (e.g. ["collapsed", "Checked"]) to be joined
-     * with the label and position. Handles:
-     *   - collapsible group headers: expanded / collapsed
-     *   - MultiSelect: Checked / Unchecked / Indeterminate
-     *   - SingleSelect (tree): Selected / Unselected
-     *   - disabled: Disabled
-     */
-    _itemStateLabels(item) {
-        const parts = [];
-        if (item.collapsible) {
-            parts.push(translate(UDExSearchableListBase, item.expanded ? EXPANDED : COLLAPSED));
-        }
-        if (item.disabled) {
-            parts.push(translate(UDExSearchableListBase, DISABLED));
-        }
-        else if (item.modeMultiSelect || (item.isGroup && this.modeMultiSelect)) {
-            if (item.indeterminate) {
-                parts.push(translate(UDExSearchableListBase, INDETERMINATE));
-            }
-            else {
-                parts.push(translate(UDExSearchableListBase, item.selected ? SELECTED : UNSELECTED));
-            }
-        }
-        else if (this.isTreeStructure && item.selected) {
-            // SingleSelect tree: only announce "Selected" when the item is actually selected.
-            parts.push(translate(UDExSearchableListBase, SELECTED));
-        }
-        return parts;
-    }
     get ariaDescribedbyText() {
+        const descriptions = [this.supportingText];
+        // Updating the token-count description while an item is active makes JAWS
+        // reread the input instead of the item whose selection just changed.
+        if (this._navigating) {
+            return descriptions.filter(Boolean).join(" ");
+        }
         if (this.modeSingleSelect) {
-            return this._navigating ? "" : this._selectedOption;
+            descriptions.push(this._selectedOption);
+            return descriptions.filter(Boolean).join(" ");
         }
         const tags = this.selectedItems.filter(item => !item.isGroup);
         // Tokenizer.i18nBundle may not be loaded yet on direct page load.
         // Return empty string until the bundle is available; the component re-renders
         // once i18n is ready and will pick up the correct text.
         if (!Tokenizer.i18nBundle) {
-            return "";
+            return descriptions.filter(Boolean).join(" ");
         }
-        return getTokensCountText(tags.length);
+        descriptions.push(getTokensCountText(tags.length));
+        return descriptions.filter(Boolean).join(" ");
     }
     get trigger() {
         return this.shadowRoot.querySelector(".udex-text-field__wrap");
@@ -975,6 +953,9 @@ class UDExSelectBase extends UDExSearchableListBase {
             "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || translate(UDExSelectBase, COUNTRY_SELECT),
         };
     }
+    get listAccessibleName() {
+        return this.accInfo.ariaLabel;
+    }
     get popoverId() {
         return `${this._id}_${this._dropdownClass}`;
     }
@@ -988,7 +969,11 @@ class UDExSelectBase extends UDExSearchableListBase {
         return true;
     }
     get isTreeStructure() {
-        return this._filteredItems.some(e => e.isGroup);
+        // Options flatten their descendants in the accessibility tree. Action
+        // buttons therefore need treeitems even in an otherwise flat popup, so
+        // their own names, roles and keyboard interaction remain available.
+        return this._filteredItems.some(({ isGroup, item }) => isGroup
+            || !!item.querySelector?.("[slot='firstIcon'], [slot='secondIcon']"));
     }
     get hideDropdownSearch() {
         return true;