fix(ui5-multi-combobox, ui5-combobox, ui5-input): improve popup annou…

…ncement (#9513) Co-authored-by: Elena Stoyanova <[email protected]>
SAP · Jul 19, 2024 · 8dc5e51 · 8dc5e51
1 parent 4adcb2d
commit 8dc5e51
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 0 deletions.
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -49,6 +49,7 @@ import {
 	VALUE_STATE_TYPE_ERROR,
 	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
+	COMBOBOX_AVAILABLE_OPTIONS,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
 	LIST_ITEM_GROUP_HEADER,
@@ -1236,6 +1237,10 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		return ComboBox.i18nBundle.getText(SELECT_OPTIONS);
 	}
 
+	get _popupLabel() {
+		return ComboBox.i18nBundle.getText(COMBOBOX_AVAILABLE_OPTIONS);
+	}
+
 	get inner(): HTMLInputElement {
 		return (isPhone() && this.open)
 			? this._getPickerInput().shadowRoot!.querySelector("input")!

diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -12,6 +12,7 @@
 	@ui5-close={{_afterClosePopover}}
 	@keydown={{_handlePopoverKeydown}}
 	@focusout={{_handlePopoverFocusout}}
+	accessible-name="{{_popupLabel}}"
 	.open={{open}}
 	.opener={{this}}
 >

diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -77,6 +77,7 @@ import {
 	INPUT_SUGGESTIONS_MORE_HITS,
 	INPUT_SUGGESTIONS_NO_HIT,
 	INPUT_CLEAR_ICON_ACC_NAME,
+	INPUT_AVALIABLE_VALUES,
 	FORM_TEXTFIELD_REQUIRED,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -1414,6 +1415,10 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		return Input.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
 	}
 
+	get _popupLabel() {
+		return Input.i18nBundle.getText(INPUT_AVALIABLE_VALUES);
+	}
+
 	get inputType() {
 		return this.type.toLowerCase();
 	}

diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
@@ -13,6 +13,7 @@
 		@ui5-scroll="{{_scroll}}"
 		.open={{open}}
 		.opener={{this}}
+		accessible-name="{{_popupLabel}}"
 	>
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header">

diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -84,6 +84,7 @@ import {
 	SELECT_OPTIONS,
 	SHOW_SELECTED_BUTTON,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
+	COMBOBOX_AVAILABLE_OPTIONS,
 	VALUE_STATE_ERROR_ALREADY_SELECTED,
 	MCB_SELECTED_ITEMS,
 	INPUT_CLEAR_ICON_ACC_NAME,
@@ -1990,6 +1991,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		return MultiComboBox.i18nBundle.getText(MCB_SELECTED_ITEMS, selected.length, items.length);
 	}
 
+	get _popupLabel() {
+		return MultiComboBox.i18nBundle.getText(COMBOBOX_AVAILABLE_OPTIONS);
+	}
+
 	get classes(): ClassMap {
 		return {
 			popover: {

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -11,6 +11,7 @@
 	@ui5-before-close={{_beforeClose}}
 	@ui5-open={{_afterOpen}}
 	@focusout={{_onPopoverFocusOut}}
+	accessible-name="{{_popupLabel}}"
 	.open={{_open}}
 	.opener={{this}}
 >

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -259,6 +259,12 @@ MESSAGE_STRIP_CUSTOM=Custom Information Bar
 #XFLD: MultiComboBox dialog button
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+#XACT: ARIA announcement for Combo Box and Multi Combo Box available options
+COMBOBOX_AVAILABLE_OPTIONS=Available Options
+
+#XACT: ARIA announcement for suggestions popup
+INPUT_AVALIABLE_VALUES=Available Values
+
 #XMSG: Text used for value state error message when an item is already selected
 VALUE_STATE_ERROR_ALREADY_SELECTED=This value is already selected.