feat(ui5-multicombobox): implement ACC support (#937)

Author: ivoplashkov

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

packages/main/src/MultiComboBox.js

@@ -7,13 +7,15 @@ 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";
 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";
@@ -275,6 +277,7 @@ class MultiComboBox extends UI5Element {
 		this._inputLastValue = "";
 		this._deleting = false;
 		this._validationTimeout = null;
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_inputChange() {
@@ -490,6 +493,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;
 	}
@@ -520,6 +527,7 @@ class MultiComboBox extends UI5Element {
 			Popover.define(),
 			List.define(),
 			StandardListItem.define(),
+			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 
 		super.define(...params);

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}}" name="{{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>

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>

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";
@@ -182,6 +183,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 [];

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
 

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;

packages/main/src/themes/Tokenizer.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host {
 	display: inline-block;
 	box-sizing: border-box;