Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ndeshev merged 13 commits into from
Dec 17, 2025
+42 −4
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
12515b9
feat(ui5-search): enhance accessibility support
ndeshev Nov 25, 2025
c556efd
Merge branch 'main' into search-acc
ndeshev Dec 4, 2025
b9aa712
feat(ui5-search): enhance accessibility support
ndeshev Dec 5, 2025
5d789fc
Merge branch 'main' into search-acc
ndeshev Dec 5, 2025
2698dce
Merge branch 'main' into search-acc
ndeshev Dec 5, 2025
c01cff0
feat(ui5-search): enhance accessibility support
ndeshev Dec 5, 2025
e19a76b
Merge branch 'search-acc' of https://github.com/SAP/ui5-webcomponents…
ndeshev Dec 5, 2025
e049073
feat(ui5-search): enhance accessibility support
ndeshev Dec 5, 2025
31a49dc
Merge branch 'main' into search-acc
ndeshev Dec 5, 2025
33f6c4e
feat(ui5-search): enhance accessibility support
ndeshev Dec 5, 2025
29cfb6b
Merge branch 'search-acc' of https://github.com/SAP/ui5-webcomponents…
ndeshev Dec 5, 2025
a56de7b
feat(ui5-search): enhance accessibility support
ndeshev Dec 9, 2025
f7d68ae
Merge branch 'main' into search-acc
ndeshev Dec 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions packages/fiori/cypress/specs/Search.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down
2 changes: 2 additions & 0 deletions packages/fiori/src/SearchFieldTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 5 additions & 2 deletions packages/fiori/src/SearchItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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() {
Expand Down
1 change: 1 addition & 0 deletions packages/fiori/src/SearchPopoverTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down
4 changes: 2 additions & 2 deletions packages/fiori/src/i18n/messagebundle.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading