From d88e2474053116ab66eca19aabe2db2eed0dea9c Mon Sep 17 00:00:00 2001
From: Ivaylo Plashkov <ivaylo.plashkov@sap.com>
Date: Wed, 29 Apr 2020 11:22:34 +0300
Subject: [PATCH 1/3] feat(ui5-multicombobox): Implement latest accessibility
 spec

---
 packages/main/src/ComboBox.hbs      |  2 +-
 packages/main/src/MultiComboBox.hbs | 11 ++++++-----
 packages/main/src/MultiComboBox.js  |  5 +++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
index d814563d7a17..96e8df56ddfc 100644
--- a/packages/main/src/ComboBox.hbs
+++ b/packages/main/src/ComboBox.hbs
@@ -33,7 +33,7 @@
 			?pressed="{{_iconPressed}}"
 			@click="{{_arrowClick}}"
 			dir="{{dir}}"
-			accessibleName="{{_iconAccessibleNameText}}"
+			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}
 </div>
\ No newline at end of file
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index 85a585ffce7e..08aa7328ff87 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/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,6 +47,9 @@
 		@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"
@@ -63,6 +63,7 @@
 			@click={{_showAllItemsPopover}}
 			?pressed="{{_iconPressed}}"
 			dir="{{dir}}"
+			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}
 </div>
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 7255c39de947..bda494ecd23d 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
@@ -695,6 +696,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(),

From c872f87f530735d154db69dd3627604ed4fec00c Mon Sep 17 00:00:00 2001
From: Ivaylo Plashkov <ivaylo.plashkov@sap.com>
Date: Wed, 29 Apr 2020 14:05:16 +0300
Subject: [PATCH 2/3] fix token selection

---
 packages/main/src/Token.js         | 2 ++
 packages/main/src/themes/Token.css | 4 ++++
 2 files changed, 6 insertions(+)

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;

From 62b543e1706c3ef5d585f5d0d67a53bd0fe03f48 Mon Sep 17 00:00:00 2001
From: Ivaylo Plashkov <ivaylo.plashkov@sap.com>
Date: Thu, 30 Apr 2020 11:05:20 +0300
Subject: [PATCH 3/3] fix aria-describedby

---
 packages/main/src/ComboBox.hbs      | 2 +-
 packages/main/src/ComboBox.js       | 4 ++++
 packages/main/src/MultiComboBox.hbs | 2 +-
 packages/main/src/MultiComboBox.js  | 4 ++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
index 96e8df56ddfc..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}}
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 08aa7328ff87..a6a073e1c508 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/packages/main/src/MultiComboBox.hbs
@@ -52,7 +52,7 @@
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-labelledby="{{_id}}-hiddenText-nMore"
-		aria-describedby="{{_id}}-valueStateDesc"
+		aria-describedby="{{valueStateTextId}}"
 	/>
 
 	{{#unless readonly}}
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index bda494ecd23d..7405b4e13726 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -680,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) {