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 (