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

package/dist/CheckBox.d.ts

@@ -3,6 +3,15 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type WrappingType from "./types/WrappingType.js";
+import type { AriaRole, AriaChecked, AriaDisabled, AriaReadonly } from "@ui5/webcomponents-base/dist/types.js";
+type CheckBoxAccInfo = {
+    role?: AriaRole;
+    ariaChecked?: AriaChecked;
+    ariaReadonly?: AriaReadonly;
+    ariaDisabled?: AriaDisabled;
+    ariaRequired?: boolean;
+    tabindex?: number | undefined;
+};
 /**
  * @class
  *
@@ -177,6 +186,11 @@ declare class CheckBox extends UI5Element implements IFormInputElement {
      * @private
      */
     active: boolean;
+    /**
+     * Defines custom aria implementation object.
+     * @private
+     */
+    _accInfo?: CheckBoxAccInfo;
     static i18nBundle: I18nBundle;
     _deactivate: () => void;
     get formValidityMessage(): string;
@@ -215,5 +229,13 @@ declare class CheckBox extends UI5Element implements IFormInputElement {
     get tabbable(): boolean;
     get isCompletelyChecked(): boolean;
     get isDisplayOnly(): boolean;
+    get accInfo(): {
+        role: import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.AriaRole | undefined;
+        ariaChecked: import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.Signalish<import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").Booleanish | "mixed" | undefined>;
+        ariaReadonly: import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.Signalish<import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").Booleanish | undefined>;
+        ariaDisabled: import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.Signalish<import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").Booleanish | undefined>;
+        ariaRequired: boolean | undefined;
+        tabindex: number | undefined;
+    };
 }
 export default CheckBox;

package/dist/CheckBox.js

@@ -13,7 +13,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, FORM_CHECKABLE_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
@@ -261,7 +261,7 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
         };
     }
     get ariaLabelText() {
-        return getEffectiveAriaLabelText(this);
+        return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
     }
     get classes() {
         return {
@@ -311,6 +311,16 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
     get isDisplayOnly() {
         return this.displayOnly && !this.disabled;
     }
+    get accInfo() {
+        return {
+            "role": this._accInfo ? this._accInfo.role : "checkbox",
+            "ariaChecked": this._accInfo ? this._accInfo.ariaChecked : this.effectiveAriaChecked,
+            "ariaReadonly": this._accInfo ? this._accInfo.ariaReadonly : this.ariaReadonly,
+            "ariaDisabled": this._accInfo ? this._accInfo.ariaDisabled : this.effectiveAriaDisabled,
+            "ariaRequired": this._accInfo ? this._accInfo.ariaRequired : this.required,
+            "tabindex": this._accInfo ? this._accInfo.tabindex : this.effectiveTabIndex,
+        };
+    }
 };
 __decorate([
     property()
@@ -354,6 +364,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CheckBox.prototype, "active", void 0);
+__decorate([
+    property({ type: Object })
+], CheckBox.prototype, "_accInfo", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], CheckBox, "i18nBundle", void 0);

package/dist/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../src/CheckBox.ts"],"names":[],"mappings":"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","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport {\n\tVALUE_STATE_ERROR,\n\tVALUE_STATE_WARNING,\n\tVALUE_STATE_SUCCESS,\n\tFORM_CHECKABLE_REQUIRED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport checkboxCss from \"./generated/themes/CheckBox.css.js\";\n\n// Template\nimport CheckBoxTemplate from \"./CheckBoxTemplate.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeCb: CheckBox;\n\n/**\n * @class\n *\n * ### Overview\n *\n * Allows the user to set a binary value, such as true/false or yes/no for an item.\n *\n * The `ui5-checkbox` component consists of a box and a label that describes its purpose.\n * If it's checked, an indicator is displayed inside the box.\n * To check/uncheck the `ui5-checkbox`, the user has to click or tap the square\n * box or its label.\n *\n * The `ui5-checkbox` component only has 2 states - checked and unchecked.\n * Clicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.\n *\n * ### Usage\n *\n * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.\n * In case you prefer text to truncate, set the `wrappingType` property to \"None\".\n * The touchable area for toggling the `ui5-checkbox` ends where the text ends.\n *\n * You can disable the `ui5-checkbox` by setting the `disabled` property to\n * `true`,\n * or use the `ui5-checkbox` in read-only mode by setting the `readonly`\n * property to `true`.\n *\n * ### Keyboard Handling\n *\n * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.\n *\n * - [Space],[Enter] - Toggles between different states: checked, not checked.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/CheckBox.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @csspart root - Used to style the outermost wrapper of the `ui5-checkbox`\n * @csspart label - Used to style the label of the `ui5-checkbox`\n * @csspart icon - Used to style the icon of the `ui5-checkbox`\n */\n@customElement({\n\ttag: \"ui5-checkbox\",\n\tlanguageAware: true,\n\tformAssociated: true,\n\trenderer: jsxRenderer,\n\ttemplate: CheckBoxTemplate,\n\tstyles: checkboxCss,\n})\n/**\n * Fired when the component checked state changes.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n/**\n * Fired to make Angular two way data binding work properly.\n * @private\n */\n@event(\"value-changed\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass CheckBox extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\t\"change\": void,\n\t\t\"value-changed\": void,\n\t};\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component\n\t * @default undefined\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Determines whether the `ui5-checkbox` is in display only state.\n\t *\n\t * When set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\n\t * and not in the tab chain. This setting is used for forms in review mode.\n\t *\n\t * **Note:** When the property `disabled` is set to `true` this property has no effect.\n\t * @since 1.22.0\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tdisplayOnly = false;\n\n\t/**\n\t * Defines whether the component is required.\n\t *\n\t * **Note:** We advise against using the text property of the checkbox when there is a\n\t * label associated with it to avoid having two required asterisks.\n\t * @default false\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property({ type: Boolean })\n\trequired = false;\n\n\t/**\n\t* Defines whether the component is displayed as partially checked.\n\t*\n\t* **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\n\t* interaction and the resulting visual state depends on the values of the `indeterminate`\n\t* and `checked` properties:\n\t*\n\t* -  If the component is checked and indeterminate, it will be displayed as partially checked\n\t* -  If the component is checked and it is not indeterminate, it will be displayed as checked\n\t* -  If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute\n\t* @default false\n\t* @public\n\t* @since 1.0.0-rc.15\n\t*/\n\t@property({ type: Boolean })\n\tindeterminate = false;\n\n\t/**\n\t * Defines if the component is checked.\n\t *\n\t * **Note:** The property can be changed with user interaction,\n\t * either by cliking/tapping on the component, or by\n\t * pressing the Enter or Space key.\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked = false;\n\n\t/**\n\t * Defines the text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines whether the component text wraps when there is not enough space.\n\t *\n\t * **Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n\t * **Note:** for option \"None\" the text will be truncated with an ellipsis.\n\t * @default \"Normal\"\n\t * @public\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"Normal\";\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the form value of the component that is submitted when the checkbox is checked.\n\t *\n\t * When a form containing `ui5-checkbox` elements is submitted, only the values of the\n\t * **checked** checkboxes are included in the form data sent to the server. Unchecked\n\t * checkboxes do not contribute any data to the form submission.\n\t *\n\t * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.\n\t *\n\t * @default \"on\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"on\";\n\n\t/**\n\t * Defines the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tactive = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_deactivate: () => void;\n\n\tget formValidityMessage() {\n\t\treturn CheckBox.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\treturn { valueMissing: this.required && !this.checked };\n\t}\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\treturn this.checked ? this.value : null;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeCb) {\n\t\t\t\tactiveCb.active = false;\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\n\t}\n\n\t_onmousedown() {\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.active = true;\n\t\tactiveCb = this; // eslint-disable-line\n\t}\n\n\t_onmouseup() {\n\t\tthis.active = false;\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = true;\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = false;\n\t}\n\n\ttoggle() {\n\t\tif (this.canToggle()) {\n\t\t\tconst lastState = {\n\t\t\t\tchecked: this.checked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t};\n\t\t\tif (this.indeterminate) {\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = true;\n\t\t\t} else {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\n\t\t\tconst changePrevented = !this.fireDecoratorEvent(\"change\");\n\t\t\t// Angular two way data binding\n\t\t\tconst valueChangePrevented = !this.fireDecoratorEvent(\"value-changed\");\n\n\t\t\tif (changePrevented || valueChangePrevented) {\n\t\t\t\tthis.checked = lastState.checked;\n\t\t\t\tthis.indeterminate = lastState.indeterminate;\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\tcanToggle() {\n\t\treturn !(this.disabled || this.readonly || this.displayOnly);\n\t}\n\n\tvalueStateTextMappings() {\n\t\treturn {\n\t\t\t\"Negative\": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Critical\": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),\n\t\t\t\"Positive\": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t};\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget ariaReadonly() {\n\t\treturn this.readonly || this.displayOnly ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaChecked() {\n\t\treturn this.indeterminate && this.checked ? \"mixed\" : this.checked;\n\t}\n\n\tget ariaLabelledBy() {\n\t\tif (!this.ariaLabelText) {\n\t\t\treturn this.text ? `${this._id}-label` : undefined;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget ariaDescribedBy() {\n\t\treturn this.hasValueState ? `${this._id}-descr` : undefined;\n\t}\n\n\tget hasValueState() {\n\t\treturn this.valueState !== ValueState.None;\n\t}\n\n\tget valueStateText() {\n\t\tif (this.valueState !== ValueState.None && this.valueState !== ValueState.Information) {\n\t\t\treturn this.valueStateTextMappings()[this.valueState];\n\t\t}\n\t}\n\n\tget effectiveTabIndex() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\n\t\tif (this.tabbable) {\n\t\t\treturn tabindex ? parseInt(tabindex) : 0;\n\t\t}\n\t}\n\n\tget tabbable() {\n\t\treturn !this.disabled && !this.displayOnly;\n\t}\n\n\tget isCompletelyChecked() {\n\t\treturn this.checked && !this.indeterminate;\n\t}\n\n\tget isDisplayOnly() {\n\t\treturn this.displayOnly && !this.disabled;\n\t}\n}\n\nCheckBox.define();\n\nexport default CheckBox;\n"]}
+{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../src/CheckBox.ts"],"names":[],"mappings":"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","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport type {\n\tAriaRole,\n\tAriaChecked,\n\tAriaDisabled,\n\tAriaReadonly,\n} from \"@ui5/webcomponents-base/dist/types.js\";\nimport {\n\tVALUE_STATE_ERROR,\n\tVALUE_STATE_WARNING,\n\tVALUE_STATE_SUCCESS,\n\tFORM_CHECKABLE_REQUIRED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport checkboxCss from \"./generated/themes/CheckBox.css.js\";\n\n// Template\nimport CheckBoxTemplate from \"./CheckBoxTemplate.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeCb: CheckBox;\n\ntype CheckBoxAccInfo = {\n\trole?: AriaRole,\n\tariaChecked?: AriaChecked,\n\tariaReadonly?: AriaReadonly,\n\tariaDisabled?: AriaDisabled,\n\tariaRequired?: boolean,\n\ttabindex?: number | undefined,\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * Allows the user to set a binary value, such as true/false or yes/no for an item.\n *\n * The `ui5-checkbox` component consists of a box and a label that describes its purpose.\n * If it's checked, an indicator is displayed inside the box.\n * To check/uncheck the `ui5-checkbox`, the user has to click or tap the square\n * box or its label.\n *\n * The `ui5-checkbox` component only has 2 states - checked and unchecked.\n * Clicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.\n *\n * ### Usage\n *\n * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.\n * In case you prefer text to truncate, set the `wrappingType` property to \"None\".\n * The touchable area for toggling the `ui5-checkbox` ends where the text ends.\n *\n * You can disable the `ui5-checkbox` by setting the `disabled` property to\n * `true`,\n * or use the `ui5-checkbox` in read-only mode by setting the `readonly`\n * property to `true`.\n *\n * ### Keyboard Handling\n *\n * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.\n *\n * - [Space],[Enter] - Toggles between different states: checked, not checked.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/CheckBox.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @csspart root - Used to style the outermost wrapper of the `ui5-checkbox`\n * @csspart label - Used to style the label of the `ui5-checkbox`\n * @csspart icon - Used to style the icon of the `ui5-checkbox`\n */\n@customElement({\n\ttag: \"ui5-checkbox\",\n\tlanguageAware: true,\n\tformAssociated: true,\n\trenderer: jsxRenderer,\n\ttemplate: CheckBoxTemplate,\n\tstyles: checkboxCss,\n})\n/**\n * Fired when the component checked state changes.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n/**\n * Fired to make Angular two way data binding work properly.\n * @private\n */\n@event(\"value-changed\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass CheckBox extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\t\"change\": void,\n\t\t\"value-changed\": void,\n\t};\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component\n\t * @default undefined\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Determines whether the `ui5-checkbox` is in display only state.\n\t *\n\t * When set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\n\t * and not in the tab chain. This setting is used for forms in review mode.\n\t *\n\t * **Note:** When the property `disabled` is set to `true` this property has no effect.\n\t * @since 1.22.0\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tdisplayOnly = false;\n\n\t/**\n\t * Defines whether the component is required.\n\t *\n\t * **Note:** We advise against using the text property of the checkbox when there is a\n\t * label associated with it to avoid having two required asterisks.\n\t * @default false\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property({ type: Boolean })\n\trequired = false;\n\n\t/**\n\t* Defines whether the component is displayed as partially checked.\n\t*\n\t* **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\n\t* interaction and the resulting visual state depends on the values of the `indeterminate`\n\t* and `checked` properties:\n\t*\n\t* -  If the component is checked and indeterminate, it will be displayed as partially checked\n\t* -  If the component is checked and it is not indeterminate, it will be displayed as checked\n\t* -  If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute\n\t* @default false\n\t* @public\n\t* @since 1.0.0-rc.15\n\t*/\n\t@property({ type: Boolean })\n\tindeterminate = false;\n\n\t/**\n\t * Defines if the component is checked.\n\t *\n\t * **Note:** The property can be changed with user interaction,\n\t * either by cliking/tapping on the component, or by\n\t * pressing the Enter or Space key.\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked = false;\n\n\t/**\n\t * Defines the text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines whether the component text wraps when there is not enough space.\n\t *\n\t * **Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n\t * **Note:** for option \"None\" the text will be truncated with an ellipsis.\n\t * @default \"Normal\"\n\t * @public\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"Normal\";\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the form value of the component that is submitted when the checkbox is checked.\n\t *\n\t * When a form containing `ui5-checkbox` elements is submitted, only the values of the\n\t * **checked** checkboxes are included in the form data sent to the server. Unchecked\n\t * checkboxes do not contribute any data to the form submission.\n\t *\n\t * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.\n\t *\n\t * @default \"on\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"on\";\n\n\t/**\n\t * Defines the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tactive = false;\n\n\t/**\n\t * Defines custom aria implementation object.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_accInfo?: CheckBoxAccInfo;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_deactivate: () => void;\n\n\tget formValidityMessage() {\n\t\treturn CheckBox.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\treturn { valueMissing: this.required && !this.checked };\n\t}\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\treturn this.checked ? this.value : null;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeCb) {\n\t\t\t\tactiveCb.active = false;\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\n\t}\n\n\t_onmousedown() {\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.active = true;\n\t\tactiveCb = this; // eslint-disable-line\n\t}\n\n\t_onmouseup() {\n\t\tthis.active = false;\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = true;\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = false;\n\t}\n\n\ttoggle() {\n\t\tif (this.canToggle()) {\n\t\t\tconst lastState = {\n\t\t\t\tchecked: this.checked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t};\n\t\t\tif (this.indeterminate) {\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = true;\n\t\t\t} else {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\n\t\t\tconst changePrevented = !this.fireDecoratorEvent(\"change\");\n\t\t\t// Angular two way data binding\n\t\t\tconst valueChangePrevented = !this.fireDecoratorEvent(\"value-changed\");\n\n\t\t\tif (changePrevented || valueChangePrevented) {\n\t\t\t\tthis.checked = lastState.checked;\n\t\t\t\tthis.indeterminate = lastState.indeterminate;\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\tcanToggle() {\n\t\treturn !(this.disabled || this.readonly || this.displayOnly);\n\t}\n\n\tvalueStateTextMappings() {\n\t\treturn {\n\t\t\t\"Negative\": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Critical\": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),\n\t\t\t\"Positive\": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t};\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget ariaReadonly() {\n\t\treturn this.readonly || this.displayOnly ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaChecked() {\n\t\treturn this.indeterminate && this.checked ? \"mixed\" : this.checked;\n\t}\n\n\tget ariaLabelledBy() {\n\t\tif (!this.ariaLabelText) {\n\t\t\treturn this.text ? `${this._id}-label` : undefined;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget ariaDescribedBy() {\n\t\treturn this.hasValueState ? `${this._id}-descr` : undefined;\n\t}\n\n\tget hasValueState() {\n\t\treturn this.valueState !== ValueState.None;\n\t}\n\n\tget valueStateText() {\n\t\tif (this.valueState !== ValueState.None && this.valueState !== ValueState.Information) {\n\t\t\treturn this.valueStateTextMappings()[this.valueState];\n\t\t}\n\t}\n\n\tget effectiveTabIndex() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\n\t\tif (this.tabbable) {\n\t\t\treturn tabindex ? parseInt(tabindex) : 0;\n\t\t}\n\t}\n\n\tget tabbable() {\n\t\treturn !this.disabled && !this.displayOnly;\n\t}\n\n\tget isCompletelyChecked() {\n\t\treturn this.checked && !this.indeterminate;\n\t}\n\n\tget isDisplayOnly() {\n\t\treturn this.displayOnly && !this.disabled;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"role\": this._accInfo ? this._accInfo.role : \"checkbox\" as AriaRole,\n\t\t\t\"ariaChecked\": this._accInfo ? this._accInfo.ariaChecked : this.effectiveAriaChecked as AriaChecked,\n\t\t\t\"ariaReadonly\": this._accInfo ? this._accInfo.ariaReadonly : this.ariaReadonly as AriaReadonly,\n\t\t\t\"ariaDisabled\": this._accInfo ? this._accInfo.ariaDisabled : this.effectiveAriaDisabled as AriaDisabled,\n\t\t\t\"ariaRequired\": this._accInfo ? this._accInfo.ariaRequired : this.required,\n\t\t\t\"tabindex\": this._accInfo ? this._accInfo.tabindex : this.effectiveTabIndex,\n\t\t};\n\t}\n}\n\nCheckBox.define();\n\nexport default CheckBox;\n"]}

package/dist/CheckBoxTemplate.js

@@ -10,11 +10,12 @@ export default function CheckBoxTemplate() {
     return (_jsxs("div", { class: {
             "ui5-checkbox-root": true,
             "ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
-        }, role: "checkbox", part: "root", "aria-checked": this.effectiveAriaChecked, "aria-readonly": this.ariaReadonly, "aria-disabled": this.effectiveAriaDisabled, "aria-label": this.ariaLabelText, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-required": this.required, tabindex: this.effectiveTabIndex, onMouseDown: this._onmousedown, onMouseUp: this._onmouseup, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusOut: this._onfocusout, children: [this.isDisplayOnly ?
+        }, role: this.accInfo.role, part: "root", "aria-checked": this.accInfo.ariaChecked, "aria-readonly": this.accInfo.ariaReadonly, "aria-disabled": this.accInfo.ariaDisabled, "aria-label": this.ariaLabelText, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-required": this.accInfo.ariaRequired, tabindex: this.accInfo.tabindex, onMouseDown: this._onmousedown, onMouseUp: this._onmouseup, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusOut: this._onfocusout, children: [this.isDisplayOnly ?
                 _jsx("div", { class: "ui5-checkbox-display-only-icon-inner", children: _jsx(Icon, { "aria-hidden": "true", name: displayOnlyIcon.call(this), class: "ui5-checkbox-display-only-icon", part: "icon" }) })
                 :
                     _jsx("div", { id: `${this._id}-CbBg`, class: "ui5-checkbox-inner", children: this.isCompletelyChecked &&
-                            _jsx(Icon, { "aria-hidden": "true", name: accept, class: "ui5-checkbox-icon", part: "icon" }) }), _jsx("input", { id: `${this._id}-CB`, type: "checkbox", checked: this.checked, value: this.value, readonly: this.readonly, disabled: this.disabled, tabindex: -1, "aria-hidden": "true", "data-sap-no-tab-ref": true }), this.text &&
+                            _jsx(Icon, { "aria-hidden": "true", name: accept, class: "ui5-checkbox-icon", part: "icon" }) }), this.accInfo.role === "checkbox" &&
+                _jsx("input", { id: `${this._id}-CB`, type: "checkbox", checked: this.checked, value: this.value, readonly: this.readonly, disabled: this.disabled, tabindex: -1, "aria-hidden": "true", "data-sap-no-tab-ref": true }), this.text &&
                 _jsx(Label, { id: `${this._id}-label`, part: "label", class: "ui5-checkbox-label", wrappingType: this.wrappingType, required: this.required, children: this.text }), this.hasValueState &&
                 _jsx("span", { id: `${this._id}-descr`, class: "ui5-hidden-text", children: this.valueStateText })] }));
 }

package/dist/CheckBoxTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxTemplate.js","sourceRoot":"","sources":["../src/CheckBoxTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAGnE,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,eACC,KAAK,EAAE;YACN,mBAAmB,EAAE,IAAI;YACzB,yBAAyB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;SAC1E,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,oBAAoB,mBACxB,IAAI,CAAC,YAAY,mBACjB,IAAI,CAAC,qBAAqB,gBAC7B,IAAI,CAAC,aAAa,qBACb,IAAI,CAAC,cAAc,sBAClB,IAAI,CAAC,eAAe,mBACvB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,WAAW,aAG3B,IAAI,CAAC,aAAa,CAAC,CAAC;gBACpB,cAAK,KAAK,EAAC,sCAAsC,YAChD,KAAC,IAAI,mBAAa,MAAM,EAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,GAAE,GAC1G;gBACN,CAAC;oBACD,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,KAAK,EAAC,oBAAoB,YACrD,IAAI,CAAC,mBAAmB;4BACzB,KAAC,IAAI,mBAAa,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,GAAE,GAEzE,EAGP,gBACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,KAAK,EACpB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,gCAEjB,EAED,IAAI,CAAC,IAAI;gBACV,KAAC,KAAK,IACL,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,oBAAoB,EAC1B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEtB,IAAI,CAAC,IAAI,GACH,EAGP,IAAI,CAAC,aAAa;gBACnB,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,cAAc,GAAQ,IAE9E,CACN,CAAC;AACH,CAAC;AAED,SAAS,eAAe;IACvB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC9B,OAAO,QAAQ,CAAC;IACjB,CAAC;IACD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;QACxC,OAAO,QAAQ,CAAC;IACjB,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport type CheckBox from \"./CheckBox.js\";\nimport Label from \"./Label.js\";\nimport Icon from \"./Icon.js\";\nimport accept from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport complete from \"@ui5/webcomponents-icons/dist/complete.js\";\nimport border from \"@ui5/webcomponents-icons/dist/border.js\";\nimport triState from \"@ui5/webcomponents-icons/dist/tri-state.js\";\n\nexport default function CheckBoxTemplate(this: CheckBox) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-checkbox-root\": true,\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t}}\n\t\t\trole=\"checkbox\"\n\t\t\tpart=\"root\"\n\t\t\taria-checked={this.effectiveAriaChecked}\n\t\t\taria-readonly={this.ariaReadonly}\n\t\t\taria-disabled={this.effectiveAriaDisabled}\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\taria-describedby={this.ariaDescribedBy}\n\t\t\taria-required={this.required}\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonMouseUp={this._onmouseup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._onclick}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t>\n\n\t\t\t{this.isDisplayOnly ?\n\t\t\t\t<div class=\"ui5-checkbox-display-only-icon-inner\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={displayOnlyIcon.call(this)} class=\"ui5-checkbox-display-only-icon\" part=\"icon\"/>\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\t<div id={`${this._id}-CbBg`} class=\"ui5-checkbox-inner\">\n\t\t\t\t\t{this.isCompletelyChecked &&\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={accept} class=\"ui5-checkbox-icon\" part=\"icon\"/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<input\n\t\t\t\tid={`${this._id}-CB`}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={this.checked}\n\t\t\t\tvalue={this.value}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttabindex={-1}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-sap-no-tab-ref\n\t\t\t/>\n\n\t\t\t{this.text &&\n\t\t\t<Label\n\t\t\t\tid={`${this._id}-label`}\n\t\t\t\tpart=\"label\"\n\t\t\t\tclass=\"ui5-checkbox-label\"\n\t\t\t\twrappingType={this.wrappingType}\n\t\t\t\trequired={this.required}\n\t\t\t>\n\t\t\t\t{this.text}\n\t\t\t</Label>\n\t\t\t}\n\n\t\t\t{this.hasValueState &&\n\t\t\t<span id={`${this._id}-descr`} class=\"ui5-hidden-text\">{this.valueStateText}</span>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction displayOnlyIcon(this: CheckBox) {\n\tif (this.isCompletelyChecked) {\n\t\treturn complete;\n\t}\n\tif (this.checked && this.indeterminate) {\n\t\treturn triState;\n\t}\n\treturn border;\n}\n"]}
+{"version":3,"file":"CheckBoxTemplate.js","sourceRoot":"","sources":["../src/CheckBoxTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAGnE,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,eACC,KAAK,EAAE;YACN,mBAAmB,EAAE,IAAI;YACzB,yBAAyB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;SAC1E,EACD,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACvB,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,OAAO,CAAC,WAAW,mBACvB,IAAI,CAAC,OAAO,CAAC,YAAY,mBACzB,IAAI,CAAC,OAAO,CAAC,YAAY,gBAC5B,IAAI,CAAC,aAAa,qBACb,IAAI,CAAC,cAAc,sBAClB,IAAI,CAAC,eAAe,mBACvB,IAAI,CAAC,OAAO,CAAC,YAAY,EACxC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,WAAW,aAG3B,IAAI,CAAC,aAAa,CAAC,CAAC;gBACpB,cAAK,KAAK,EAAC,sCAAsC,YAChD,KAAC,IAAI,mBAAa,MAAM,EAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,GAAE,GAC1G;gBACN,CAAC;oBACD,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,KAAK,EAAC,oBAAoB,YACrD,IAAI,CAAC,mBAAmB;4BACzB,KAAC,IAAI,mBAAa,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,GAAE,GAEzE,EAGN,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,UAAU;gBACjC,gBACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,KAAK,EACpB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,gCAEjB,EAGD,IAAI,CAAC,IAAI;gBACV,KAAC,KAAK,IACL,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,oBAAoB,EAC1B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEtB,IAAI,CAAC,IAAI,GACH,EAGP,IAAI,CAAC,aAAa;gBACnB,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,cAAc,GAAQ,IAE9E,CACN,CAAC;AACH,CAAC;AAED,SAAS,eAAe;IACvB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC9B,OAAO,QAAQ,CAAC;IACjB,CAAC;IACD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;QACxC,OAAO,QAAQ,CAAC;IACjB,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport type CheckBox from \"./CheckBox.js\";\nimport Label from \"./Label.js\";\nimport Icon from \"./Icon.js\";\nimport accept from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport complete from \"@ui5/webcomponents-icons/dist/complete.js\";\nimport border from \"@ui5/webcomponents-icons/dist/border.js\";\nimport triState from \"@ui5/webcomponents-icons/dist/tri-state.js\";\n\nexport default function CheckBoxTemplate(this: CheckBox) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-checkbox-root\": true,\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t}}\n\t\t\trole={this.accInfo.role}\n\t\t\tpart=\"root\"\n\t\t\taria-checked={this.accInfo.ariaChecked}\n\t\t\taria-readonly={this.accInfo.ariaReadonly}\n\t\t\taria-disabled={this.accInfo.ariaDisabled}\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\taria-describedby={this.ariaDescribedBy}\n\t\t\taria-required={this.accInfo.ariaRequired}\n\t\t\ttabindex={this.accInfo.tabindex}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonMouseUp={this._onmouseup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._onclick}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t>\n\n\t\t\t{this.isDisplayOnly ?\n\t\t\t\t<div class=\"ui5-checkbox-display-only-icon-inner\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={displayOnlyIcon.call(this)} class=\"ui5-checkbox-display-only-icon\" part=\"icon\"/>\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\t<div id={`${this._id}-CbBg`} class=\"ui5-checkbox-inner\">\n\t\t\t\t\t{this.isCompletelyChecked &&\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={accept} class=\"ui5-checkbox-icon\" part=\"icon\"/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{this.accInfo.role === \"checkbox\" &&\n\t\t\t<input\n\t\t\t\tid={`${this._id}-CB`}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={this.checked}\n\t\t\t\tvalue={this.value}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttabindex={-1}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-sap-no-tab-ref\n\t\t\t/>\n\t\t\t}\n\n\t\t\t{this.text &&\n\t\t\t<Label\n\t\t\t\tid={`${this._id}-label`}\n\t\t\t\tpart=\"label\"\n\t\t\t\tclass=\"ui5-checkbox-label\"\n\t\t\t\twrappingType={this.wrappingType}\n\t\t\t\trequired={this.required}\n\t\t\t>\n\t\t\t\t{this.text}\n\t\t\t</Label>\n\t\t\t}\n\n\t\t\t{this.hasValueState &&\n\t\t\t<span id={`${this._id}-descr`} class=\"ui5-hidden-text\">{this.valueStateText}</span>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction displayOnlyIcon(this: CheckBox) {\n\tif (this.isCompletelyChecked) {\n\t\treturn complete;\n\t}\n\tif (this.checked && this.indeterminate) {\n\t\treturn triState;\n\t}\n\treturn border;\n}\n"]}

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,