diff --git a/packages/fiori/cypress/specs/Search.cy.tsx b/packages/fiori/cypress/specs/Search.cy.tsx
index 43060949958b..1d42f1e53ffb 100644
--- a/packages/fiori/cypress/specs/Search.cy.tsx
+++ b/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(
+
+
+
+ );
+
+ cy.get("[ui5-search]")
+ .shadow()
+ .find("input")
+ .should("have.attr", "aria-autocomplete", "both");
+ });
+
+ it("should have aria-controls pointing to responsive popover", () => {
+ cy.mount(
+
+
+
+ );
+
+ 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", () => {
diff --git a/packages/fiori/src/SearchFieldTemplate.tsx b/packages/fiori/src/SearchFieldTemplate.tsx
index 8f593f613b9f..56b669bfca6d 100644
--- a/packages/fiori/src/SearchFieldTemplate.tsx
+++ b/packages/fiori/src/SearchFieldTemplate.tsx
@@ -62,6 +62,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
diff --git a/packages/fiori/src/SearchItem.ts b/packages/fiori/src/SearchItem.ts
index a180e5c064c1..7a7335648058 100644
--- a/packages/fiori/src/SearchItem.ts
+++ b/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() {
diff --git a/packages/fiori/src/SearchPopoverTemplate.tsx b/packages/fiori/src/SearchPopoverTemplate.tsx
index 6940b9f517cc..76370f98376d 100644
--- a/packages/fiori/src/SearchPopoverTemplate.tsx
+++ b/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 (