From a35741f502c894fa62d9ef1979012b803db8e76e Mon Sep 17 00:00:00 2001
From: Ivaylo Plashkov <ivaylo.plashkov@sap.com>
Date: Fri, 15 Nov 2019 13:25:01 +0200
Subject: [PATCH 1/2] feat(ui5-multicombobox): implement ACC support

---
 packages/main/src/MultiComboBox.hbs            |  7 ++++++-
 packages/main/src/MultiComboBox.js             |  8 ++++++++
 packages/main/src/Token.hbs                    | 18 ++++++++++++++++--
 packages/main/src/Tokenizer.hbs                | 18 +++++++++++++++---
 packages/main/src/Tokenizer.js                 |  5 +++++
 .../main/src/i18n/messagebundle.properties     |  6 ++++++
 packages/main/src/themes/MultiComboBox.css     |  1 +
 packages/main/src/themes/Tokenizer.css         |  2 ++
 8 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index cd6164f03fe2..7c1e92edff9d 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/packages/main/src/MultiComboBox.hbs
@@ -2,6 +2,8 @@
 	@focusin={{rootFocusIn}}
 	@focusout={{rootFocusOut}}
 	>
+	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{nMoreCountText}}</span>
+
 	<ui5-tokenizer slot="_beginContent"
 		show-more
 		class="ui5-multi-combobox-tokenizer"
@@ -30,7 +32,10 @@
 		@keydown="{{_onkeydown}}"
 		@keyup="{{_onkeyup}}"
 		@focusin="{{_focusin}}"
-		@focusout="{{_focusout}}">
+		@focusout="{{_focusout}}"
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-labelledby="{{_id}}-hiddenText-nMore">
 	</input>
 
 	{{#unless readonly}}
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index d523c8b4175f..631e898d5923 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -7,6 +7,7 @@ import {
 import "./icons/slim-arrow-down.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -14,6 +15,7 @@ import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
+import {TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS} from "../dist/generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/MultiComboBox.css.js";
@@ -254,6 +256,7 @@ class MultiComboBox extends UI5Element {
 		this._inputLastValue = "";
 		this._deleting = false;
 		this._validationTimeout = null;
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_inputChange() {
@@ -462,6 +465,10 @@ class MultiComboBox extends UI5Element {
 		return this.shadowRoot.querySelector("ui5-tokenizer");
 	}
 
+	get nMoreCountText() {
+		return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, this._getSelectedItems().length);
+	}
+
 	rootFocusIn() {
 		this.expandedTokenizer = true;
 	}
@@ -492,6 +499,7 @@ class MultiComboBox extends UI5Element {
 			Popover.define(),
 			List.define(),
 			StandardListItem.define(),
+			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 
 		super.define(...params);
diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs
index 8ea15e323090..b3b556fb90ad 100644
--- a/packages/main/src/Token.hbs
+++ b/packages/main/src/Token.hbs
@@ -1,7 +1,21 @@
-<div tabindex="{{_tabIndex}}" @click="{{_select}}" @keydown="{{_keydown}}" class="ui5-token--wrapper" dir="{{dir}}">
+<div
+	tabindex="{{_tabIndex}}"
+	@click="{{_select}}"
+	@keydown="{{_keydown}}"
+	class="ui5-token--wrapper"
+	dir="{{dir}}"
+	role="option"
+	aria-selected="{{selected}}"
+>
 	<span class="ui5-token--text"><slot></slot></span>
 
 	{{#unless readonly}}
-		<ui5-icon @click="{{_delete}}" src="{{iconURI}}" accessible-name="{{tokenDeletableText}}" show-tooltip="true" class="ui5-token--icon"></ui5-icon>
+		<ui5-icon
+			@click="{{_delete}}"
+			src="{{iconURI}}"
+			accessible-name="{{tokenDeletableText}}"
+			show-tooltip="true"
+			class="ui5-token--icon"
+		></ui5-icon>
 	{{/unless}}
 </div>
diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs
index 7a7051f7a614..98da0ad7a026 100644
--- a/packages/main/src/Tokenizer.hbs
+++ b/packages/main/src/Tokenizer.hbs
@@ -1,11 +1,23 @@
-<div class="{{classes.wrapper}}">
-	<div class="{{classes.content}}" @ui5-delete={{_tokenDelete}}>
+<div
+	class="{{classes.wrapper}}"
+>
+	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
+	
+	<div
+		class="{{classes.content}}"
+		@ui5-delete="{{_tokenDelete}}"
+		role="listbox"
+		aria-labelledby="{{_id}}-hiddenText"
+	>
 		{{#each tokens}}
 			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	</div>
 
 	{{#if showNMore}}
-		<span @click="{{_openOverflowPopover}}" class="ui5-tokenizer-more-text">{{_nMoreText}}</span>
+		<span
+			@click="{{_openOverflowPopover}}"
+			class="ui5-tokenizer-more-text"
+		>{{_nMoreText}}</span>
 	{{/if}}
 </div>
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
index b2a26269781f..21d366d1fb88 100644
--- a/packages/main/src/Tokenizer.js
+++ b/packages/main/src/Tokenizer.js
@@ -5,6 +5,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TokenizerTemplate from "./generated/templates/TokenizerTemplate.lit.js";
 import { MULTIINPUT_SHOW_MORE_TOKENS } from "./generated/i18n/i18n-defaults.js";
+import {TOKENIZER_ARIA_LABEL} from "../dist/generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/Tokenizer.css.js";
@@ -185,6 +186,10 @@ class Tokenizer extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-tokenizer--content");
 	}
 
+	get tokenizerLabel () {
+		return this.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
+	}
+
 	get overflownTokens() {
 		if (!this.contentDom) {
 			return [];
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 29f343b711b6..b68ab76a30c1 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -253,6 +253,12 @@ TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 #XACT: ARIA announcement for token deletable
 TOKEN_ARIA_DELETABLE=Deletable
 
+#XACT: ARIA announcement for tokenizer with n tokens
+TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS=Contains {0} tokens
+
+#XACT: ARIA announcement for tokenizer label
+TOKENIZER_ARIA_LABEL=Tokenizer
+
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to have an error
 VALUE_STATE_ERROR=Invalid entry
 
diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css
index a4879170e1d2..8c225f77d0de 100644
--- a/packages/main/src/themes/MultiComboBox.css
+++ b/packages/main/src/themes/MultiComboBox.css
@@ -1,5 +1,6 @@
 @import "./Input.css";
 @import "./InputIcon.css";
+@import "./InvisibleTextStyles.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css
index 92122e473687..f70980f42c8c 100644
--- a/packages/main/src/themes/Tokenizer.css
+++ b/packages/main/src/themes/Tokenizer.css
@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host {
 	display: inline-block;
 	box-sizing: border-box;

From 6aad649dc602d297b971fe86f40cc3385cc225eb Mon Sep 17 00:00:00 2001
From: Ivaylo Plashkov <ivaylo.plashkov@sap.com>
Date: Fri, 15 Nov 2019 13:25:01 +0200
Subject: [PATCH 2/2] feat(ui5-multicombobox): implement ACC support

---
 packages/main/src/MultiComboBox.hbs            |  7 ++++++-
 packages/main/src/MultiComboBox.js             |  8 ++++++++
 packages/main/src/Token.hbs                    | 18 ++++++++++++++++--
 packages/main/src/Tokenizer.hbs                | 18 +++++++++++++++---
 packages/main/src/Tokenizer.js                 |  5 +++++
 .../main/src/i18n/messagebundle.properties     |  6 ++++++
 packages/main/src/themes/MultiComboBox.css     |  1 +
 packages/main/src/themes/Tokenizer.css         |  2 ++
 8 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index cd6164f03fe2..7c1e92edff9d 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/packages/main/src/MultiComboBox.hbs
@@ -2,6 +2,8 @@
 	@focusin={{rootFocusIn}}
 	@focusout={{rootFocusOut}}
 	>
+	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{nMoreCountText}}</span>
+
 	<ui5-tokenizer slot="_beginContent"
 		show-more
 		class="ui5-multi-combobox-tokenizer"
@@ -30,7 +32,10 @@
 		@keydown="{{_onkeydown}}"
 		@keyup="{{_onkeyup}}"
 		@focusin="{{_focusin}}"
-		@focusout="{{_focusout}}">
+		@focusout="{{_focusout}}"
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-labelledby="{{_id}}-hiddenText-nMore">
 	</input>
 
 	{{#unless readonly}}
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index d523c8b4175f..631e898d5923 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -7,6 +7,7 @@ import {
 import "./icons/slim-arrow-down.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -14,6 +15,7 @@ import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
+import {TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS} from "../dist/generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/MultiComboBox.css.js";
@@ -254,6 +256,7 @@ class MultiComboBox extends UI5Element {
 		this._inputLastValue = "";
 		this._deleting = false;
 		this._validationTimeout = null;
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_inputChange() {
@@ -462,6 +465,10 @@ class MultiComboBox extends UI5Element {
 		return this.shadowRoot.querySelector("ui5-tokenizer");
 	}
 
+	get nMoreCountText() {
+		return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, this._getSelectedItems().length);
+	}
+
 	rootFocusIn() {
 		this.expandedTokenizer = true;
 	}
@@ -492,6 +499,7 @@ class MultiComboBox extends UI5Element {
 			Popover.define(),
 			List.define(),
 			StandardListItem.define(),
+			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 
 		super.define(...params);
diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs
index 8ea15e323090..6be1498390f4 100644
--- a/packages/main/src/Token.hbs
+++ b/packages/main/src/Token.hbs
@@ -1,7 +1,21 @@
-<div tabindex="{{_tabIndex}}" @click="{{_select}}" @keydown="{{_keydown}}" class="ui5-token--wrapper" dir="{{dir}}">
+<div
+	tabindex="{{_tabIndex}}"
+	@click="{{_select}}"
+	@keydown="{{_keydown}}"
+	class="ui5-token--wrapper"
+	dir="{{dir}}"
+	role="option"
+	aria-selected="{{selected}}"
+>
 	<span class="ui5-token--text"><slot></slot></span>
 
 	{{#unless readonly}}
-		<ui5-icon @click="{{_delete}}" src="{{iconURI}}" accessible-name="{{tokenDeletableText}}" show-tooltip="true" class="ui5-token--icon"></ui5-icon>
+		<ui5-icon
+			@click="{{_delete}}"
+			src="{{iconURI}}"
+			accessible-name="{{tokenDeletableText}}"
+			show-tooltip
+			class="ui5-token--icon"
+		></ui5-icon>
 	{{/unless}}
 </div>
diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs
index 7a7051f7a614..98da0ad7a026 100644
--- a/packages/main/src/Tokenizer.hbs
+++ b/packages/main/src/Tokenizer.hbs
@@ -1,11 +1,23 @@
-<div class="{{classes.wrapper}}">
-	<div class="{{classes.content}}" @ui5-delete={{_tokenDelete}}>
+<div
+	class="{{classes.wrapper}}"
+>
+	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
+	
+	<div
+		class="{{classes.content}}"
+		@ui5-delete="{{_tokenDelete}}"
+		role="listbox"
+		aria-labelledby="{{_id}}-hiddenText"
+	>
 		{{#each tokens}}
 			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	</div>
 
 	{{#if showNMore}}
-		<span @click="{{_openOverflowPopover}}" class="ui5-tokenizer-more-text">{{_nMoreText}}</span>
+		<span
+			@click="{{_openOverflowPopover}}"
+			class="ui5-tokenizer-more-text"
+		>{{_nMoreText}}</span>
 	{{/if}}
 </div>
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
index b2a26269781f..21d366d1fb88 100644
--- a/packages/main/src/Tokenizer.js
+++ b/packages/main/src/Tokenizer.js
@@ -5,6 +5,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TokenizerTemplate from "./generated/templates/TokenizerTemplate.lit.js";
 import { MULTIINPUT_SHOW_MORE_TOKENS } from "./generated/i18n/i18n-defaults.js";
+import {TOKENIZER_ARIA_LABEL} from "../dist/generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/Tokenizer.css.js";
@@ -185,6 +186,10 @@ class Tokenizer extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-tokenizer--content");
 	}
 
+	get tokenizerLabel () {
+		return this.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
+	}
+
 	get overflownTokens() {
 		if (!this.contentDom) {
 			return [];
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 29f343b711b6..b68ab76a30c1 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -253,6 +253,12 @@ TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 #XACT: ARIA announcement for token deletable
 TOKEN_ARIA_DELETABLE=Deletable
 
+#XACT: ARIA announcement for tokenizer with n tokens
+TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS=Contains {0} tokens
+
+#XACT: ARIA announcement for tokenizer label
+TOKENIZER_ARIA_LABEL=Tokenizer
+
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to have an error
 VALUE_STATE_ERROR=Invalid entry
 
diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css
index a4879170e1d2..8c225f77d0de 100644
--- a/packages/main/src/themes/MultiComboBox.css
+++ b/packages/main/src/themes/MultiComboBox.css
@@ -1,5 +1,6 @@
 @import "./Input.css";
 @import "./InputIcon.css";
+@import "./InvisibleTextStyles.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css
index 92122e473687..f70980f42c8c 100644
--- a/packages/main/src/themes/Tokenizer.css
+++ b/packages/main/src/themes/Tokenizer.css
@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host {
 	display: inline-block;
 	box-sizing: border-box;