@ui5/webcomponents 2.13.0-rc.0 → 2.13.0-rc.1

package/dist/ComboBox.d.ts

@@ -67,6 +67,7 @@ type ComboBoxSelectionChangeEventDetail = {
  * - [Page Up] - Moves selection up by page size (10 items by default).
  * - [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
  * - [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
+ * - [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.
  *
  * ### ES6 Module Import
  *
@@ -174,15 +175,10 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
      */
     showClearIcon: boolean;
     /**
-     * Indicates whether the input is focssed
+     * Indicates whether the input is focused
      * @private
      */
     focused: boolean;
-    /**
-     * Indicates whether the visual focus is on the value state header
-     * @private
-     */
-    _isValueStateFocused: boolean;
     /**
      * Defines the accessible ARIA name of the component.
      * @default undefined
@@ -213,6 +209,17 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
      * @since 2.9.0
      */
     open: boolean;
+    /**
+     * Indicates whether link navigation is being handled.
+     * @default false
+     * @since 2.11.0
+     * @private
+     */
+    _handleLinkNavigation: boolean;
+    /**
+     * @private
+     */
+    _linksListenersArray: Array<(args: any) => void>;
     /**
      * Defines the component items.
      * @public
@@ -244,6 +251,7 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
     _lastValue: string;
     _selectedItemText: string;
     _userTypedValue: string;
+    _valueStateLinks: Array<HTMLElement>;
     static i18nBundle: I18nBundle;
     get formValidityMessage(): string;
     get formValidity(): ValidityStateFlags;
@@ -253,6 +261,7 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
     onBeforeRendering(): void;
     get iconsCount(): number;
     onAfterRendering(): void;
+    onExitDOM(): void;
     _focusin(e: FocusEvent): void;
     _focusout(e: FocusEvent): void;
     _beforeOpenPopover(): void;
@@ -285,6 +294,9 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
     _handleEnd(e: KeyboardEvent): void;
     _keyup(): void;
     _keydown(e: KeyboardEvent): void;
+    _addLinksEventListeners(): void;
+    _removeLinksEventListeners(): void;
+    _handleCtrlALtF8(): void;
     _handlePopoverKeydown(e: KeyboardEvent): void;
     _handlePopoverFocusout(): void;
     _click(): void;
@@ -325,6 +337,11 @@ declare class ComboBox extends UI5Element implements IFormInputElement {
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageIcon(): string;
+    get linksInAriaValueStateHiddenText(): HTMLElement[];
+    get valueStateLinksShortcutsTextAcc(): string;
+    get ariaDescribedByText(): string;
+    get _valueStateLinksShortcutsTextAccId(): "" | "hiddenText-value-state-link-shortcut";
+    get valueStateTextId(): "" | "value-state-description";
     get _isPhone(): boolean;
     get itemTabIndex(): undefined;
     get ariaLabelText(): string | undefined;

package/dist/ComboBox.js

@@ -12,7 +12,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isPhone, isAndroid } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isAndroid, isMac } from "@ui5/webcomponents-base/dist/Device.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
@@ -25,9 +25,11 @@ import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, isCtrlAltF8, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { attachListeners } from "@ui5/webcomponents-base/dist/util/valueStateNavigation.js";
+import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
 import * as Filters from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, COMBOBOX_AVAILABLE_OPTIONS, COMBOBOX_DIALOG_OK_BUTTON, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS_TITLE, COMBOBOX_AVAILABLE_OPTIONS, COMBOBOX_DIALOG_OK_BUTTON, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import ComboBoxTemplate from "./ComboBoxTemplate.js";
 // Styles
@@ -79,6 +81,7 @@ var ValueStateIconMapping;
  * - [Page Up] - Moves selection up by page size (10 items by default).
  * - [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
  * - [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
+ * - [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.
  *
  * ### ES6 Module Import
  *
@@ -177,15 +180,10 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
          */
         this.showClearIcon = false;
         /**
-         * Indicates whether the input is focssed
+         * Indicates whether the input is focused
          * @private
          */
         this.focused = false;
-        /**
-         * Indicates whether the visual focus is on the value state header
-         * @private
-         */
-        this._isValueStateFocused = false;
         this._iconPressed = false;
         this._filteredItems = [];
         this._effectiveShowClearIcon = false;
@@ -201,6 +199,17 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
          * @since 2.9.0
          */
         this.open = false;
+        /**
+         * Indicates whether link navigation is being handled.
+         * @default false
+         * @since 2.11.0
+         * @private
+         */
+        this._handleLinkNavigation = false;
+        /**
+         * @private
+         */
+        this._linksListenersArray = [];
         this._initialRendering = true;
         this._itemFocused = false;
         // used only for Safari fix (check onAfterRendering)
@@ -209,6 +218,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._selectionPerformed = false;
         this._selectedItemText = "";
         this._userTypedValue = "";
+        this._valueStateLinks = [];
         // when an initial value is set it should be considered as a _lastValue
         this._lastValue = this.getAttribute("value") || "";
     }
@@ -248,6 +258,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this.value = this.inner.value;
         }
         this.storeResponsivePopoverWidth();
+        if (!arraysAreEqual(this._valueStateLinks, this.linksInAriaValueStateHiddenText)) {
+            this._removeLinksEventListeners();
+            this._addLinksEventListeners();
+            this._valueStateLinks = this.linksInAriaValueStateHiddenText;
+        }
+    }
+    onExitDOM() {
+        this._removeLinksEventListeners();
     }
     _focusin(e) {
         this.focused = true;
@@ -267,7 +285,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._fireChangeEvent();
         const focusedOutToItemsPicker = this.open && this._getPicker().contains(toBeFocused);
         const focusedOutToValueState = this.valueStateOpen && this.contains(toBeFocused);
-        if (focusedOutToItemsPicker || focusedOutToValueState) {
+        if (focusedOutToItemsPicker || focusedOutToValueState || this._handleLinkNavigation) {
             e.stopImmediatePropagation();
             return;
         }
@@ -315,7 +333,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
     }
     _handleValueStatePopoverFocusout() {
-        this.focused = false;
+        if (!this._handleLinkNavigation) {
+            this.focused = false;
+        }
     }
     _handleValueStatePopoverAfterClose() {
         this.valueStateOpen = false;
@@ -371,7 +391,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             // stop the native event, as the semantic "input" would be fired.
             e.stopImmediatePropagation();
             this.focused = true;
-            this._isValueStateFocused = false;
         }
         this._filteredItems = this._filterItems(value);
         this.value = value;
@@ -483,7 +502,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this.value = isGroupItem ? nextItem.text : currentItem.text;
             currentItem.focused = false;
         }
-        this._isValueStateFocused = false;
         this._announceSelectedItem(indexOfItem);
         this._scrollToItem(indexOfItem);
         if (isGroupItem && this.open) {
@@ -507,39 +525,23 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _handleArrowDown(e, indexOfItem) {
         const isOpen = this.open;
-        if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) {
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
+        if (this.focused && indexOfItem === -1 && isOpen) {
             this.focused = false;
-            return;
         }
-        indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
         this._handleItemNavigation(e, ++indexOfItem, true /* isForward */);
     }
     _handleArrowUp(e, indexOfItem) {
         const isOpen = this.open;
-        if (indexOfItem === 0 && !this.hasValueStateText) {
+        if (indexOfItem === 0) {
             this._clearFocus();
-            this.focused = true;
             this._itemFocused = false;
-            return;
-        }
-        if (indexOfItem === 0 && this.hasValueStateText && isOpen && !this._isValueStateFocused) {
-            this._clearFocus();
-            this._itemFocused = false;
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
-            this._filteredItems[0].selected = false;
-            this.value = this._userTypedValue;
-            return;
-        }
-        if (this._isValueStateFocused) {
             this.focused = true;
-            this._isValueStateFocused = false;
-            this.value = this._userTypedValue;
+            if (this.hasValueStateText && isOpen) {
+                this._filteredItems[0].selected = false;
+                this.value = this._userTypedValue;
+            }
             return;
         }
-        indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
         this._handleItemNavigation(e, --indexOfItem, false /* isForward */);
     }
     _handlePageUp(e, indexOfItem) {
@@ -547,13 +549,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         const isProposedIndexValid = indexOfItem - SKIP_ITEMS_SIZE > -1;
         indexOfItem = isProposedIndexValid ? indexOfItem - SKIP_ITEMS_SIZE : 0;
         const shouldMoveForward = isInstanceOfComboBoxItemGroup(allItems[indexOfItem]) && !this.open;
-        if (!isProposedIndexValid && this.hasValueStateText && this.open) {
-            this._clearFocus();
-            this._itemFocused = false;
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
-            return;
-        }
         this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
     }
     _handlePageDown(e, indexOfItem) {
@@ -566,13 +561,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _handleHome(e) {
         const shouldMoveForward = isInstanceOfComboBoxItemGroup(this._filteredItems[0]) && !this.open;
-        if (this.hasValueStateText && this.open) {
-            this._clearFocus();
-            this._itemFocused = false;
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
-            return;
-        }
         this._handleItemNavigation(e, 0, shouldMoveForward);
     }
     _handleEnd(e) {
@@ -612,7 +600,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (isEscape(e)) {
             this.focused = true;
             this.value = !this.open ? this._lastValue : this.value;
-            this._isValueStateFocused = false;
         }
         if ((isTabNext(e) || isTabPrevious(e)) && this.open) {
             this._closeRespPopover();
@@ -638,6 +625,55 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 this.focused = true;
             }
         }
+        if (isCtrlAltF8(e)) {
+            return this._handleCtrlALtF8();
+        }
+    }
+    _addLinksEventListeners() {
+        const links = this.linksInAriaValueStateHiddenText;
+        links.forEach((link, index) => {
+            this._linksListenersArray.push((e) => {
+                attachListeners(e, links, index, {
+                    closeValueState: () => {
+                        if (this.open) {
+                            this._closeRespPopover();
+                        }
+                        if (this.valueStateOpen) {
+                            this.valueStateOpen = false;
+                        }
+                    },
+                    navigateToItem: () => {
+                        this._handleLinkNavigation = false;
+                        if (this.open) {
+                            this.inner.focus();
+                            this.handleNavKeyPress(e);
+                        }
+                    },
+                    focusInput: () => {
+                        this._handleLinkNavigation = false;
+                        this.inner.focus();
+                    },
+                    isPopoverOpen: () => this.open,
+                });
+            });
+            link.addEventListener("keydown", this._linksListenersArray[index]);
+        });
+    }
+    _removeLinksEventListeners() {
+        const links = this.linksInAriaValueStateHiddenText;
+        links.forEach((link, index) => {
+            link.removeEventListener("keydown", this._linksListenersArray[index]);
+        });
+        this._linksListenersArray = [];
+        this._handleLinkNavigation = false;
+    }
+    _handleCtrlALtF8() {
+        const links = this.linksInAriaValueStateHiddenText;
+        if (links.length > 0) {
+            this._clearFocus();
+            links[0].focus();
+        }
+        this._handleLinkNavigation = true;
     }
     _handlePopoverKeydown(e) {
         if (isTabNext(e)) {
@@ -666,7 +702,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (isPhone()) {
             this._fireChangeEvent();
         }
-        this._isValueStateFocused = false;
         this._clearFocus();
         this.open = false;
         this.valueStateOpen = false;
@@ -919,6 +954,42 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get _valueStateMessageIcon() {
         return this.valueState !== ValueState.None ? ValueStateIconMapping[this.valueState] : "";
     }
+    get linksInAriaValueStateHiddenText() {
+        const links = [];
+        if (this.valueStateMessage) {
+            this.valueStateMessage.forEach(element => {
+                if (element.children.length) {
+                    element.querySelectorAll("ui5-link").forEach(link => {
+                        links.push(link);
+                    });
+                }
+            });
+        }
+        return links;
+    }
+    get valueStateLinksShortcutsTextAcc() {
+        const links = this.linksInAriaValueStateHiddenText;
+        if (!links.length) {
+            return "";
+        }
+        if (isMac()) {
+            return links.length === 1
+                ? ComboBox_1.i18nBundle.getText(VALUE_STATE_LINK_MAC)
+                : ComboBox_1.i18nBundle.getText(VALUE_STATE_LINKS_MAC);
+        }
+        return links.length === 1
+            ? ComboBox_1.i18nBundle.getText(VALUE_STATE_LINK)
+            : ComboBox_1.i18nBundle.getText(VALUE_STATE_LINKS);
+    }
+    get ariaDescribedByText() {
+        return `${this.valueStateTextId} ${this._valueStateLinksShortcutsTextAccId}`.trim();
+    }
+    get _valueStateLinksShortcutsTextAccId() {
+        return this.linksInAriaValueStateHiddenText.length > 0 ? `hiddenText-value-state-link-shortcut` : "";
+    }
+    get valueStateTextId() {
+        return this.hasValueState ? `value-state-description` : "";
+    }
     get _isPhone() {
         return isPhone();
     }
@@ -1008,9 +1079,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "focused", void 0);
-__decorate([
-    property({ type: Boolean })
-], ComboBox.prototype, "_isValueStateFocused", void 0);
 __decorate([
     property()
 ], ComboBox.prototype, "accessibleName", void 0);
@@ -1035,6 +1103,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], ComboBox.prototype, "_handleLinkNavigation", void 0);
+__decorate([
+    property({ type: Array })
+], ComboBox.prototype, "_linksListenersArray", void 0);
 __decorate([
     slot({
         type: HTMLElement,