diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index b27227d1bced..a7586c71d4b4 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -110,6 +110,8 @@ interface IInputSuggestionItem extends UI5Element { focused: boolean; additionalText?: string; items?: IInputSuggestionItem[]; + accessibleDescription?: string; + accessibleDescriptionRef?: string; } interface IInputSuggestionItemSelectable extends IInputSuggestionItem { @@ -1616,6 +1618,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement onItemSelect(item: IInputSuggestionItem) { this.valueBeforeItemSelection = this.value; this.updateValueOnSelect(item); + this.announceSelectedItemAccDescription(); this.announceSelectedItem(); this.fireSelectionChange(item, true); @@ -1657,6 +1660,14 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } } + announceSelectedItemAccDescription() { + const invisibleText = this.shadowRoot!.querySelector(`#selectionAccDescription`)!; + + if (invisibleText) { + invisibleText.textContent = this.suggestionAdditionalAccText; + } + } + fireSelectionChange(item: IInputSuggestionItem | null, isValueFromSuggestions: boolean) { if (this.Suggestions) { this.fireDecoratorEvent(INPUT_EVENTS.SELECTION_CHANGE, { item }); @@ -1897,6 +1908,23 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement return Input.i18nBundle.getText(INPUT_SUGGESTIONS); } + get suggestionAdditionalAccText() { + if (!this.Suggestions || !this.Suggestions?._getItems().length) return ""; + + const selectedItem = this.Suggestions?._getItems()[this.Suggestions?.selectedItemIndex]; + + if (!selectedItem) { + return ""; + } + + if (!selectedItem.accessibleDescriptionRef) { + return selectedItem.accessibleDescription ? selectedItem.accessibleDescription : ""; + } + + const text = selectedItem.querySelector(`#${selectedItem.accessibleDescriptionRef}`); + return text ? text.textContent || "" : ""; + } + get availableSuggestionsCount() { if (this.showSuggestions && (this.value || this.Suggestions?.isOpened())) { const nonGroupItems = this._selectableItems; diff --git a/packages/main/src/InputTemplate.tsx b/packages/main/src/InputTemplate.tsx index a5e3c75f98b2..c2bd4deb2b42 100644 --- a/packages/main/src/InputTemplate.tsx +++ b/packages/main/src/InputTemplate.tsx @@ -94,6 +94,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat {this._effectiveShowSuggestions && <> + {this.suggestionsText} {this.availableSuggestionsCount} diff --git a/packages/main/src/SuggestionItemCustom.ts b/packages/main/src/SuggestionItemCustom.ts index ea3228fae127..476e7a182310 100644 --- a/packages/main/src/SuggestionItemCustom.ts +++ b/packages/main/src/SuggestionItemCustom.ts @@ -43,6 +43,22 @@ class SuggestionItemCustom extends ListItemBase implements IInputSuggestionItemS @property() text?: string; + /** + * Defines the accessible description of the component. + * @default undefined + * @public + */ + @property() + accessibleDescription?: string; + + /** + * Defines the IDs of the elements that describe the component. + * @default undefined + * @public + */ + @property() + accessibleDescriptionRef?: string; + /** * Defines the content of the component. * diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html index cfbd08f60c7c..662c229f6afc 100644 --- a/packages/main/test/pages/MultiInput.html +++ b/packages/main/test/pages/MultiInput.html @@ -402,17 +402,29 @@