feat(ui5-search): enhance accessibility support (#12717)

* feat(ui5-search): enhance accessibility support

add aria-controls attribute to the ui5-search-field

Author: ndeshev

packages/fiori/cypress/specs/Search.cy.tsx

@@ -1746,6 +1746,38 @@ describe("Accessibility", () => {
 		cy.get("[ui5-search]")
 			.should("be.focused");
 	});
+
+	it("should have aria-autocomplete='both' on the input element", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="Item 1" icon={history} />
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-autocomplete", "both");
+	});
+
+	it("should have aria-controls pointing to responsive popover", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="Item 1" icon={history} />
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.invoke("attr", "aria-controls")
+			.then((ariaControlsId) => {
+				cy.get("[ui5-search]")
+					.shadow()
+					.find("[ui5-responsive-popover]")
+					.should("have.attr", "id", ariaControlsId);
+			});
+	});
 });
 
 describe("Lazy loaded items and autocomplete", () => {

packages/fiori/src/SearchFieldTemplate.tsx

@@ -64,6 +64,8 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
 						role="searchbox"
 						aria-description={this.accessibleDescription}
 						aria-label={this.accessibleName || this._translations.searchFieldAriaLabel}
+						aria-autocomplete="both"
+						aria-controls="ui5-search-list"
 						value={this.value}
 						placeholder={this.placeholder}
 						data-sap-focus-ref

packages/fiori/src/SearchItem.ts

@@ -7,7 +7,10 @@ import SearchItemCss from "./generated/themes/SearchItem.css.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import { SEARCH_ITEM_DELETE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import {
+	SEARCH_ITEM_DELETE_BUTTON_TOOLTIP,
+} from "./generated/i18n/i18n-defaults.js";
+
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
@@ -259,7 +262,7 @@ class SearchItem extends ListItemBase {
 	}
 
 	get _deleteButtonTooltip() {
-		return SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON);
+		return SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON_TOOLTIP);
 	}
 
 	get hasActions() {

packages/fiori/src/SearchPopoverTemplate.tsx

@@ -17,6 +17,7 @@ import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
 export default function SearchPopoverTemplate(this: Search, headerTemplate?: JsxTemplate) {
 	return (
 		<ResponsivePopover
+			id="ui5-search-list"
 			hideArrow={true}
 			preventFocusRestore={true}
 			preventInitialFocus={!isPhone()}

packages/fiori/src/i18n/messagebundle.properties

@@ -197,8 +197,8 @@ SHELLBAR_IMAGE_BTN = User Menu
 #XACT: ARIA announcement for the search button
 SHELLBAR_SEARCH_BTN_OPEN = Open Search
 
-#XACT: ARIA announcement for the search item delete button
-SEARCH_ITEM_DELETE_BUTTON=Remove Suggestion
+#XACT: ARIA announcement for the search item delete button tooltip
+SEARCH_ITEM_DELETE_BUTTON_TOOLTIP=Remove Suggestion
 
 #XACT: ARIA announcement for the more button
 SHELLBAR_OVERFLOW = More