diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
index d814563d7a17..54116a6ef5e2 100644
--- a/packages/main/src/ComboBox.hbs
+++ b/packages/main/src/ComboBox.hbs
@@ -21,7 +21,7 @@
role="combobox"
aria-haspopup="listbox"
aria-autocomplete="both"
- aria-describedby="{{_id}}-valueStateDesc"
+ aria-describedby="{{valueStateTextId}}"
/>
{{#unless readonly}}
@@ -33,7 +33,7 @@
?pressed="{{_iconPressed}}"
@click="{{_arrowClick}}"
dir="{{dir}}"
- accessibleName="{{_iconAccessibleNameText}}"
+ accessible-name="{{_iconAccessibleNameText}}"
>
{{/unless}}
\ No newline at end of file
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
index 418a9a5af0a4..1ba2c71e7cd5 100644
--- a/packages/main/src/ComboBox.js
+++ b/packages/main/src/ComboBox.js
@@ -506,6 +506,10 @@ class ComboBox extends UI5Element {
return this.valueStateTextMappings[this.valueState];
}
+ get valueStateTextId() {
+ return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
+ }
+
get valueStateTextMappings() {
return {
"Success": this.i18nBundle.getText(VALUE_STATE_SUCCESS),
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index 85a585ffce7e..a6a073e1c508 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/packages/main/src/MultiComboBox.hbs
@@ -1,16 +1,13 @@
{{nMoreCountText}}
-
+
{{#if hasValueState}}
{{valueStateText}}
{{/if}}
-
+
{{#unless readonly}}
@@ -63,6 +63,7 @@
@click={{_showAllItemsPopover}}
?pressed="{{_iconPressed}}"
dir="{{dir}}"
+ accessible-name="{{_iconAccessibleNameText}}"
>
{{/unless}}
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 7255c39de947..7405b4e13726 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -26,6 +26,7 @@ import {
TOKENIZER_ARIA_CONTAIN_ONE_TOKEN,
TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS,
INPUT_SUGGESTIONS_TITLE,
+ ICON_ACCESSIBLE_NAME,
} from "./generated/i18n/i18n-defaults.js";
// Templates
@@ -679,6 +680,10 @@ class MultiComboBox extends UI5Element {
return this.valueStateTextMappings[this.valueState];
}
+ get valueStateTextId() {
+ return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
+ }
+
get _innerInput() {
if (isPhone()) {
if (this.allItemsPopover.opened) {
@@ -695,6 +700,10 @@ class MultiComboBox extends UI5Element {
return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
}
+ get _iconAccessibleNameText() {
+ return this.i18nBundle.getText(ICON_ACCESSIBLE_NAME);
+ }
+
static async onDefine() {
await Promise.all([
MultiComboBoxItem.define(),
diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js
index 3756adf92f4e..527b2a2e403f 100644
--- a/packages/main/src/Token.js
+++ b/packages/main/src/Token.js
@@ -131,6 +131,7 @@ class Token extends UI5Element {
_select() {
this.fireEvent("select");
+ this.selected = true;
}
_delete() {
@@ -152,6 +153,7 @@ class Token extends UI5Element {
if (isEnter(event) || isSpace(event)) {
this.fireEvent("select", {});
+ this.selected = true;
}
}
diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css
index 531a968aaa0e..40bd3d836bf7 100644
--- a/packages/main/src/themes/Token.css
+++ b/packages/main/src/themes/Token.css
@@ -66,6 +66,10 @@
white-space: nowrap;
}
+:host([selected]) .ui5-token--icon {
+ color: var(--sapButton_Selected_TextColor);
+}
+
.ui5-token--icon {
color: inherit;
cursor: pointer;