fix(ui5-input): Announce selected item (#1578)

Author: ivoplashkov

packages/main/src/Input.hbs

@@ -40,6 +40,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>
 		{{/if}}
 
 		{{#if accInfo.input.ariaDescription}}

packages/main/src/Input.js

@@ -623,6 +623,8 @@ class Input extends UI5Element {
 	}
 
 	_afterClosePopover() {
+		this._announceSelectedItem();
+
 		// close device's keyboard and prevent further typing
 		if (isPhone()) {
 			this.blur();
@@ -707,6 +709,7 @@ class Input extends UI5Element {
 	previewSuggestion(item) {
 		this.valueBeforeItemSelection = this.value;
 		this.value = item.group ? "" : item.textContent;
+		this._announceSelectedItem();
 	}
 
 	async fireEventByAction(action) {
@@ -798,6 +801,16 @@ class Input extends UI5Element {
 		};
 	}
 
+	_announceSelectedItem() {
+		const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);
+
+		if (this.Suggestions && this.Suggestions._isItemOnTarget()) {
+			invisibleText.textContent = this.itemSelectionAnnounce;
+		} else {
+			invisibleText.textContent = "";
+		}
+	}
+
 	get _readonly() {
 		return this.readonly && !this.disabled;
 	}
@@ -837,6 +850,10 @@ class Input extends UI5Element {
 		};
 	}
 
+	get itemSelectionAnnounce() {
+		return this.Suggestions ? this.Suggestions.itemSelectionAnnounce : undefined;
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {

packages/main/src/features/InputSuggestions.js

@@ -1,9 +1,14 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import "../SuggestionItem.js";
 
+import {
+	LIST_ITEM_POSITION,
+	LIST_ITEM_SELECTED,
+} from "../generated/i18n/i18n-defaults.js";
 /**
  * A class to manage the <code>Input</code suggestion items.
  *
@@ -29,6 +34,10 @@ class Suggestions {
 		// An integer value to store the currently selected item position,
 		// that changes due to user interaction.
 		this.selectedItemIndex = null;
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+
+		this.accInfo = {};
 	}
 
 	/* Public methods */
@@ -115,6 +124,12 @@ class Suggestions {
 
 		this.selectedItemIndex = this._getItems().indexOf(item);
 
+		this.accInfo = {
+			currentPos: this.selectedItemIndex + 1,
+			listSize: this._getItems().length,
+			itemText: item.textContent,
+		};
+
 		this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
 		item.selected = false;
 		this.close();
@@ -220,6 +235,12 @@ class Suggestions {
 		const currentItem = items[nextIdx];
 		const previousItem = items[previousIdx];
 
+		this.accInfo = {
+			currentPos: nextIdx + 1,
+			listSize: items.length,
+			itemText: currentItem.textContent,
+		};
+
 		if (previousItem) {
 			previousItem.selected = false;
 		}
@@ -292,6 +313,14 @@ class Suggestions {
 		this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover");
 		return this.responsivePopover;
 	}
+
+	get itemSelectionAnnounce() {
+		const i18nBundle = this.i18nBundle,
+			itemPositionText = i18nBundle.getText(LIST_ITEM_POSITION, [this.accInfo.currentPos], [this.accInfo.listSize]),
+			itemSelectionText = i18nBundle.getText(LIST_ITEM_SELECTED);
+
+		return `${itemPositionText} ${this.accInfo.itemText} ${itemSelectionText}`;
+	}
 }
 
 Suggestions.SCROLL_STEP = 48;

packages/main/src/i18n/messagebundle.properties

@@ -247,6 +247,12 @@ LINK_SUBTLE=Subtle
 #XFLD: Emphasized link description label
 LINK_EMPHASIZED=Emphasized
 
+#XACT: ARIA announcement for the position of the list items in an entire list
+LIST_ITEM_POSITION=List item {0} of {1}
+
+#XACT: ARIA announcement for the list item selection.
+LIST_ITEM_SELECTED=Is Selected
+
 #XTOL: Tooltip of messgae strip close button
 MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close