feat(ui5-input): announce suggestions count (#1975)

SAP · Jul 23, 2020 · 8dfa088 · 8dfa088
1 parent 48a89a4
commit 8dfa088
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -42,6 +42,7 @@
 		{{#if showSuggestions}}
 			<span id="{{_id}}-suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
 			<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
+			<span id="{{_id}}-suggestionsCount" class="ui5-hidden-text" aria-live="polite">{{availableSuggestionsCount}}</span>
 		{{/if}}
 
 		{{#if accInfo.input.ariaDescription}}

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -28,6 +28,9 @@ import {
 	VALUE_STATE_WARNING,
 	INPUT_SUGGESTIONS,
 	INPUT_SUGGESTIONS_TITLE,
+	INPUT_SUGGESTIONS_ONE_HIT,
+	INPUT_SUGGESTIONS_MORE_HITS,
+	INPUT_SUGGESTIONS_NO_HIT,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -992,11 +995,13 @@ class Input extends UI5Element {
 	get accInfo() {
 		const ariaHasPopupDefault = this.showSuggestions ? "true" : undefined;
 		const ariaAutoCompleteDefault = this.showSuggestions ? "list" : undefined;
+		const ariaDescribedBy = this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this._id}-suggestionsCount ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId} ${this._id}-suggestionsCount`.trim();
+
 		return {
 			"wrapper": {
 			},
 			"input": {
-				"ariaDescribedBy": this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId}`.trim(),
+				"ariaDescribedBy": ariaDescribedBy,
 				"ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
 				"ariaHasPopup": this._inputAccInfo.ariaHasPopup ? this._inputAccInfo.ariaHasPopup : ariaHasPopupDefault,
 				"ariaAutoComplete": this._inputAccInfo.ariaAutoComplete ? this._inputAccInfo.ariaAutoComplete : ariaAutoCompleteDefault,
@@ -1072,6 +1077,23 @@ class Input extends UI5Element {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS);
 	}
 
+	get availableSuggestionsCount() {
+		if (this.showSuggestions) {
+			switch (this.suggestionsTexts.length) {
+			case 0:
+				return this.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT);
+
+			case 1:
+				return this.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT);
+
+			default:
+				return this.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, this.suggestionsTexts.length);
+			}
+		}
+
+		return undefined;
+	}
+
 	get step() {
 		return this.type === InputType.Number ? "any" : undefined;
 	}

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -241,6 +241,15 @@ INPUT_SUGGESTIONS=Suggestions available
 #XBUT: Default title text for mobile
 INPUT_SUGGESTIONS_TITLE=Select
 
+#XACT: ARIA announcement for the Input suggestion result if one hit
+INPUT_SUGGESTIONS_ONE_HIT=1 result available
+
+#XACT: ARIA announcement for the Input suggestion result if more than one hit ({0} is the number of hits)
+INPUT_SUGGESTIONS_MORE_HITS={0} results are available
+
+#XACT: ARIA announcement for the Input suggestion result if no hit
+INPUT_SUGGESTIONS_NO_HIT=No results
+
 #XFLD: Subtle link description label
 LINK_SUBTLE=Subtle