feat(ui5-multicombobox): Implement latest accessibility spec (#1564)

Author: ivoplashkov

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}}"
 		></ui5-icon>
 	{{/unless}}
 </div>

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),

packages/main/src/MultiComboBox.hbs

@@ -1,16 +1,13 @@
 <div class="ui5-multi-combobox-root"
 	@focusin={{rootFocusIn}}
 	@focusout={{rootFocusOut}}
-	role="combobox"
-	aria-haspopup="listbox"
-	aria-expanded="{{open}}"
 >
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{nMoreCountText}}</span>
-	
+
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
-	
+
 	<ui5-tokenizer slot="_beginContent"
 		show-more
 		class="ui5-multi-combobox-tokenizer"
@@ -50,9 +47,12 @@
 		@focusin="{{_focusin}}"
 		@focusout="{{_focusout}}"
 		@click={{_click}}
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-labelledby="{{_id}}-hiddenText-nMore"
-		aria-describedby="{{_id}}-valueStateDesc"
+		aria-describedby="{{valueStateTextId}}"
 	/>
 
 	{{#unless readonly}}
@@ -63,6 +63,7 @@
 			@click={{_showAllItemsPopover}}
 			?pressed="{{_iconPressed}}"
 			dir="{{dir}}"
+			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}
 </div>

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(),

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;
 		}
 	}
 

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;