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;