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

package/dist/FileUploaderTemplate.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
-import Input from "./Input.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import Tokenizer from "./Tokenizer.js";
+import Token from "./Token.js";
 import FileUploaderPopoverTemplate from "./FileUploaderPopoverTemplate.js";
 export default function FileUploaderTemplate() {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-file-uploader-root", onMouseOver: this._onmouseover, onMouseOut: this._onmouseout, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onDragOver: this._ondrag, onDrop: this._ondrop, children: [_jsxs("div", { class: "ui5-file-uploader-mask", children: [!this.hideInput &&
-                                _jsx(Input, { value: this.value, valueState: this.valueState, placeholder: this.placeholder, disabled: this.disabled, tabindex: -1, class: "ui5-file-uploader-input" }), _jsx("slot", {})] }), _jsx("input", { type: "file", tabindex: -1, "aria-hidden": "true", multiple: this.multiple, accept: this.accept, title: this.titleText, disabled: this.disabled, onChange: this._onChange })] }), FileUploaderPopoverTemplate.call(this)] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-file-uploader-root", onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onMouseDown: this._onmousedown, onDragOver: this._ondrag, onDrop: this._ondrop, children: [_jsx("form", { class: "ui5-file-uploader-form", onSubmit: this._onFormSubmit, children: _jsx("input", { type: "file", class: "ui5-file-uploader-native-input", name: this.name, multiple: this.multiple, accept: this.accept, disabled: this.disabled, title: this.inputTitle, "aria-roledescription": this.accInfo.ariaRoledescription, "aria-haspopup": this.accInfo.ariaHasPopup, "aria-label": this.accInfo.ariaLabel, "aria-required": this.accInfo.ariaRequired, "aria-invalid": this.accInfo.ariaInvalid, onClick: this._onNativeInputClick, onChange: this._onChange, "data-sap-focus-ref": true }) }), this.hideInput ? (_jsx("slot", {})) : (_jsxs("div", { class: "ui5-file-uploader-display-container", children: [_jsxs("div", { class: "ui5-file-uploader-display-elements", children: [this._selectedFilesNames.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Tokenizer, { class: "ui5-file-uploader-tokenizer", expanded: this._tokenizerExpanded, open: this._tokenizerOpen, popoverMinWidth: this._formWidth, onClick: this._onTokenizerClick, onMouseDown: this._onTokenizerMouseDown, onKeyDown: this._onTokenizerKeyDown, onKeyUp: this._onTokenizerKeyUp, preventInitialFocus: true, readonly: true, children: this._selectedFilesNames.map(fileName => (_jsx(Token, { text: fileName }))) }), _jsx(Icon, { name: decline, class: "ui5-file-uploader-clear-icon inputIcon", onClick: this._onClearIconClick, title: this.clearIconTitle })] })) : (_jsx("input", { class: "ui5-file-uploader-display-input", tabindex: -1, "aria-hidden": "true", title: this.inputTitle, placeholder: this.resolvedPlaceholder, "inner-input": true, readonly: true })), _jsx(Icon, { name: valueHelp, class: "ui5-file-uploader-value-help-icon inputIcon", title: this.valueHelpTitle })] }), _jsx("slot", {})] }))] }), FileUploaderPopoverTemplate.call(this)] }));
 }
 //# sourceMappingURL=FileUploaderTemplate.js.map

package/dist/FileUploaderTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderTemplate.js","sourceRoot":"","sources":["../src/FileUploaderTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,2BAA2B,MAAM,kCAAkC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,8BACC,eACC,KAAK,EAAC,wBAAwB,EAC9B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,OAAO,aAEpB,eAAK,KAAK,EAAC,wBAAwB,aACjC,CAAC,IAAI,CAAC,SAAS;gCACf,KAAC,KAAK,IACL,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAC,yBAAyB,GAC9B,EAEH,gBAAa,IACR,EACN,gBACC,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,GACvB,IACG,EAEJ,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,IACtC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type FileUploader from \"./FileUploader.js\";\nimport Input from \"./Input.js\";\nimport FileUploaderPopoverTemplate from \"./FileUploaderPopoverTemplate.js\";\n\nexport default function FileUploaderTemplate(this: FileUploader) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-file-uploader-root\"\n\t\t\t\tonMouseOver={this._onmouseover}\n\t\t\t\tonMouseOut={this._onmouseout}\n\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonClick={this._onclick}\n\t\t\t\tonDragOver={this._ondrag}\n\t\t\t\tonDrop={this._ondrop}\n\t\t\t>\n\t\t\t\t<div class=\"ui5-file-uploader-mask\">\n\t\t\t\t\t{!this.hideInput &&\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tvalueState={this.valueState}\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tclass=\"ui5-file-uploader-input\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\ttabindex={-1}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\taccept={this.accept}\n\t\t\t\t\ttitle={this.titleText}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tonChange={this._onChange}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{ FileUploaderPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"FileUploaderTemplate.js","sourceRoot":"","sources":["../src/FileUploaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"./Icon.js\";\nimport valueHelp from \"@ui5/webcomponents-icons/dist/value-help.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport Tokenizer from \"./Tokenizer.js\";\nimport Token from \"./Token.js\";\nimport type FileUploader from \"./FileUploader.js\";\nimport FileUploaderPopoverTemplate from \"./FileUploaderPopoverTemplate.js\";\n\nexport default function FileUploaderTemplate(this: FileUploader) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-file-uploader-root\"\n\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonClick={this._onclick}\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\tonDragOver={this._ondrag}\n\t\t\t\tonDrop={this._ondrop}\n\t\t\t>\n\t\t\t\t<form class=\"ui5-file-uploader-form\" onSubmit={this._onFormSubmit}>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tclass=\"ui5-file-uploader-native-input\"\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\t\taccept={this.accept}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\ttitle={this.inputTitle}\n\t\t\t\t\t\taria-roledescription={this.accInfo.ariaRoledescription}\n\t\t\t\t\t\taria-haspopup={this.accInfo.ariaHasPopup}\n\t\t\t\t\t\taria-label={this.accInfo.ariaLabel}\n\t\t\t\t\t\taria-required={this.accInfo.ariaRequired}\n\t\t\t\t\t\taria-invalid={this.accInfo.ariaInvalid}\n\t\t\t\t\t\tonClick={this._onNativeInputClick}\n\t\t\t\t\t\tonChange={this._onChange}\n\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t/>\n\t\t\t\t</form>\n\n\t\t\t\t{this.hideInput ? (\n\t\t\t\t\t<slot></slot>\n\t\t\t\t) : (\n\t\t\t\t\t<div class=\"ui5-file-uploader-display-container\">\n\t\t\t\t\t\t<div class=\"ui5-file-uploader-display-elements\">\n\t\t\t\t\t\t\t{this._selectedFilesNames.length > 0 ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Tokenizer\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-tokenizer\"\n\t\t\t\t\t\t\t\t\t\texpanded={this._tokenizerExpanded}\n\t\t\t\t\t\t\t\t\t\topen={this._tokenizerOpen}\n\t\t\t\t\t\t\t\t\t\tpopoverMinWidth={this._formWidth}\n\t\t\t\t\t\t\t\t\t\tonClick={this._onTokenizerClick}\n\t\t\t\t\t\t\t\t\t\tonMouseDown={this._onTokenizerMouseDown}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this._onTokenizerKeyDown}\n\t\t\t\t\t\t\t\t\t\tonKeyUp={this._onTokenizerKeyUp}\n\t\t\t\t\t\t\t\t\t\tpreventInitialFocus\n\t\t\t\t\t\t\t\t\t\treadonly\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{this._selectedFilesNames.map(fileName => (\n\t\t\t\t\t\t\t\t\t\t\t<Token\n\t\t\t\t\t\t\t\t\t\t\t\ttext={fileName}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Tokenizer>\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-clear-icon inputIcon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._onClearIconClick}\n\t\t\t\t\t\t\t\t\t\ttitle={this.clearIconTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-display-input\"\n\t\t\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\ttitle={this.inputTitle}\n\t\t\t\t\t\t\t\t\tplaceholder={this.resolvedPlaceholder}\n\t\t\t\t\t\t\t\t\tinner-input\n\t\t\t\t\t\t\t\t\treadonly\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tname={valueHelp}\n\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-value-help-icon inputIcon\"\n\t\t\t\t\t\t\t\ttitle={this.valueHelpTitle}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{ FileUploaderPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}

package/dist/Input.d.ts

@@ -86,6 +86,7 @@ type InputSuggestionScrollEventDetail = {
  * - [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.
  * - [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.
  * - [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.
+ * - [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
  *
@@ -281,11 +282,6 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
      */
     hint?: `${InputKeyHint}`;
     valueStateOpen: boolean;
-    /**
-     * Indicates whether the visual focus is on the value state header
-     * @private
-     */
-    _isValueStateFocused: boolean;
     _inputAccInfo: InputAccInfo;
     _nativeInputAttributes: NativeInputAttributes;
     _inputWidth?: number;
@@ -310,6 +306,10 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
      * @private
      */
     Suggestions?: InputSuggestions;
+    /**
+     * @private
+     */
+    _linksListenersArray: Array<(args: any) => void>;
     /**
      * Defines the suggestion items.
      *
@@ -362,7 +362,15 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     _performTextSelection?: boolean;
     _isLatestValueFromSuggestions: boolean;
     _isChangeTriggeredBySuggestion: boolean;
+    _valueStateLinks: Array<HTMLElement>;
     static i18nBundle: I18nBundle;
+    /**
+     * Indicates whether link navigation is being handled.
+     * @default false
+     * @private
+     * @since 2.11.0
+     */
+    _handleLinkNavigation: boolean;
     get formValidityMessage(): string;
     get _effectiveShowSuggestions(): boolean;
     get formValidity(): ValidityStateFlags;
@@ -382,6 +390,9 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     _handleDown(e: KeyboardEvent): void;
     _handleSpace(e: KeyboardEvent): void;
     _handleTab(): void;
+    _handleCtrlAltF8(): void;
+    _addLinksEventListeners(): void;
+    _removeLinksEventListeners(): void;
     _handleEnter(e: KeyboardEvent): void;
     _handlePageUp(e: KeyboardEvent): void;
     _handlePageDown(e: KeyboardEvent): void;
@@ -500,6 +511,9 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     };
     get ariaValueStateHiddenText(): string | undefined;
     get itemSelectionAnnounce(): string;
+    get linksInAriaValueStateHiddenText(): HTMLElement[];
+    get valueStateLinksShortcutsTextAcc(): string;
+    get _valueStateLinksShortcutsTextAccId(): "" | "hiddenText-value-state-link-shortcut";
     get iconsCount(): number;
     get classes(): ClassMap;
     get styles(): {

package/dist/Input.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var Input_1;
+/* eslint-disable spaced-comment */
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
@@ -15,9 +16,11 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 // @ts-expect-error
 import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
-import { isPhone, isAndroid, } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isAndroid, isMac, } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isUp, isDown, isSpace, isEnter, isBackSpace, isDelete, isEscape, isTabNext, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isUp, isDown, isSpace, isEnter, isBackSpace, isDelete, isEscape, isTabNext, 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import { getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, registerUI5Element, deregisterUI5Element, getEffectiveAriaDescriptionText, getAllAccessibleDescriptionRefTexts, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
@@ -27,7 +30,7 @@ import InputType from "./types/InputType.js";
 // Templates
 import InputTemplate from "./InputTemplate.js";
 import { StartsWith } from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, INPUT_AVALIABLE_VALUES, INPUT_SUGGESTIONS_OK_BUTTON, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, 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, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, INPUT_AVALIABLE_VALUES, INPUT_SUGGESTIONS_OK_BUTTON, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import inputStyles from "./generated/themes/Input.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -72,6 +75,7 @@ var INPUT_ACTIONS;
  * - [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.
  * - [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.
  * - [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.
+ * - [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
  *
@@ -215,14 +219,20 @@ let Input = Input_1 = class Input extends UI5Element {
          */
         this.focused = false;
         this.valueStateOpen = false;
-        /**
-         * Indicates whether the visual focus is on the value state header
-         * @private
-         */
-        this._isValueStateFocused = false;
         this._inputAccInfo = {};
         this._nativeInputAttributes = {};
         this._inputIconFocused = false;
+        /**
+         * @private
+         */
+        this._linksListenersArray = [];
+        /**
+         * Indicates whether link navigation is being handled.
+         * @default false
+         * @private
+         * @since 2.11.0
+         */
+        this._handleLinkNavigation = false;
         // Indicates if there is selected suggestionItem.
         this.hasSuggestionItemSelected = false;
         // Represents the value before user moves selection from suggestion item to another
@@ -251,6 +261,7 @@ let Input = Input_1 = class Input extends UI5Element {
         this._handleResizeBound = this._handleResize.bind(this);
         this._keepInnerValue = false;
         this._focusedAfterClear = false;
+        this._valueStateLinks = [];
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
@@ -259,6 +270,7 @@ let Input = Input_1 = class Input extends UI5Element {
     onExitDOM() {
         ResizeHandler.deregister(this, this._handleResizeBound);
         deregisterUI5Element(this);
+        this._removeLinksEventListeners();
     }
     _highlightSuggestionItem(item) {
         item.markupText = this.typedInValue ? this.Suggestions?.hightlightInput((item.text || ""), this.typedInValue) : encodeXML(item.text || "");
@@ -336,6 +348,11 @@ let Input = Input_1 = class Input extends UI5Element {
             this.fireDecoratorEvent("type-ahead");
         }
         this._performTextSelection = false;
+        if (!arraysAreEqual(this._valueStateLinks, this.linksInAriaValueStateHiddenText)) {
+            this._removeLinksEventListeners();
+            this._addLinksEventListeners();
+            this._valueStateLinks = this.linksInAriaValueStateHiddenText;
+        }
     }
     _onkeydown(e) {
         this._isKeyNavigation = true;
@@ -375,6 +392,9 @@ let Input = Input_1 = class Input extends UI5Element {
         if (isEscape(e)) {
             return this._handleEscape();
         }
+        if (isCtrlAltF8(e)) {
+            return this._handleCtrlAltF8();
+        }
         if (this.showSuggestions) {
             this._clearPopoverFocusAndSelection();
         }
@@ -414,6 +434,57 @@ let Input = Input_1 = class Input extends UI5Element {
             this.Suggestions.onTab();
         }
     }
+    _handleCtrlAltF8() {
+        this._handleLinkNavigation = true;
+        const links = this.linksInAriaValueStateHiddenText;
+        if (links.length) {
+            links[0].focus();
+        }
+    }
+    _addLinksEventListeners() {
+        const links = this.linksInAriaValueStateHiddenText;
+        links.forEach((link, index) => {
+            this._linksListenersArray.push((e) => {
+                attachListeners(e, links, index, {
+                    closeValueState: () => {
+                        if (this.Suggestions?.isOpened()) {
+                            this.Suggestions?.close();
+                        }
+                        if (this.valueStateOpen) {
+                            this.closeValueStatePopover();
+                        }
+                    },
+                    focusInput: () => {
+                        this._handleLinkNavigation = false;
+                        this.getInputDOMRef().focus();
+                    },
+                    navigateToItem: () => {
+                        if (this._handleLinkNavigation) {
+                            this._handleLinkNavigation = false;
+                            if (this.Suggestions?.isOpened()) {
+                                this.innerFocusIn();
+                                (this.getInputDOMRef()).focus();
+                                this.Suggestions.onDown(e, this.currentItemIndex);
+                            }
+                        }
+                        else {
+                            this._handleDown(e);
+                        }
+                    },
+                    isPopoverOpen: () => { return (this.Suggestions && this.Suggestions?.isOpened()) || false; },
+                });
+            });
+            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;
+    }
     _handleEnter(e) {
         // if a group item is focused, this is false
         const suggestionItemPressed = !!(this.Suggestions?.onEnter(e));
@@ -489,10 +560,7 @@ let Input = Input_1 = class Input extends UI5Element {
         if (isAutoCompleted) {
             this.value = this.typedInValue;
         }
-        if (this._isValueStateFocused) {
-            this._isValueStateFocused = false;
-            this.focused = true;
-        }
+        this.focused = true;
     }
     _onfocusin(e) {
         this.focused = true; // invalidating property
@@ -535,7 +603,6 @@ let Input = Input_1 = class Input extends UI5Element {
         if (!this.showSuggestions || !this.Suggestions) {
             return;
         }
-        this._isValueStateFocused = false;
         this.hasSuggestionItemSelected = false;
         this.Suggestions?._deselectItems();
         this.Suggestions?._clearItemFocus();
@@ -580,6 +647,7 @@ let Input = Input_1 = class Input extends UI5Element {
             this.value = valueBeforeClear;
             return;
         }
+        this.typedInValue = "";
         if (!this._isPhone) {
             this.fireResetSelectionChange();
             this.focus();
@@ -662,7 +730,6 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         this.fireEventByAction(INPUT_ACTIONS.ACTION_ENTER, e);
         this.hasSuggestionItemSelected = false;
-        this._isValueStateFocused = false;
         if (this.Suggestions) {
             this.Suggestions.updateSelectedItemPosition(-1);
         }
@@ -748,6 +815,7 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _handleValueStatePopoverAfterClose() {
         this.valueStateOpen = false;
+        this._handleLinkNavigation = false;
     }
     _getValueStatePopover() {
         return this.shadowRoot.querySelector("[ui5-popover]");
@@ -978,6 +1046,7 @@ let Input = Input_1 = class Input extends UI5Element {
         return [
             this.suggestionsTextId,
             this.valueStateTextId,
+            this._valueStateLinksShortcutsTextAccId,
             this._inputAccInfo.ariaDescribedBy,
             this._accInfoAriaDescriptionId,
             this.ariaDescriptionTextId,
@@ -1020,6 +1089,36 @@ let Input = Input_1 = class Input extends UI5Element {
     get itemSelectionAnnounce() {
         return this.Suggestions ? this.Suggestions.itemSelectionAnnounce : "";
     }
+    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
+                ? Input_1.i18nBundle.getText(VALUE_STATE_LINK_MAC)
+                : Input_1.i18nBundle.getText(VALUE_STATE_LINKS_MAC);
+        }
+        return links.length === 1
+            ? Input_1.i18nBundle.getText(VALUE_STATE_LINK)
+            : Input_1.i18nBundle.getText(VALUE_STATE_LINKS);
+    }
+    get _valueStateLinksShortcutsTextAccId() {
+        return this.linksInAriaValueStateHiddenText.length > 0 ? `hiddenText-value-state-link-shortcut` : "";
+    }
     get iconsCount() {
         const slottedIconsCount = this.icon ? this.icon.length : 0;
         const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
@@ -1246,9 +1345,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "valueStateOpen", void 0);
-__decorate([
-    property({ type: Boolean })
-], Input.prototype, "_isValueStateFocused", void 0);
 __decorate([
     property({ type: Object })
 ], Input.prototype, "_inputAccInfo", void 0);
@@ -1276,6 +1372,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], Input.prototype, "Suggestions", void 0);
+__decorate([
+    property({ type: Array })
+], Input.prototype, "_linksListenersArray", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true })
 ], Input.prototype, "suggestionItems", void 0);