Skip to content

feat(ui5-search) add actions to search items #12405

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
merged 12 commits into from
Oct 28, 2025
Merged

feat(ui5-search) add actions to search items #12405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fb90610
feat(ui5-search): add actions to search items
ndeshev Oct 1, 2025
3e7e64f
Merge branch 'main' into search-item-icon
ndeshev Oct 8, 2025
99c1e7a
feat(ui5-search) add actions to search items
ndeshev Oct 8, 2025
38f8ba7
Merge branch 'main' into search-item-icon
ndeshev Oct 8, 2025
e23e26d
Merge branch 'main' into search-item-icon
ndeshev Oct 27, 2025
d7b1964
Merge branch 'search-item-icon' of https://github.com/SAP/ui5-webcomp…
ndeshev Oct 27, 2025
b1d8a9e
feat(ui5-search): add actions to search items
ndeshev Oct 27, 2025
03a07ea
feat(ui5-search): add actions to search items
ndeshev Oct 27, 2025
00939cd
Merge branch 'main' into search-item-icon
ndeshev Oct 27, 2025
71d97ac
feat(ui5-search): add actions to search items
ndeshev Oct 28, 2025
fc1a6fc
Merge branch 'search-item-icon' of https://github.com/SAP/ui5-webcomp…
ndeshev Oct 28, 2025
1a7c007
Merge branch 'main' into search-item-icon
ndeshev Oct 28, 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
295 changes: 295 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 @@ -13,6 +13,10 @@ import Avatar from "@ui5/webcomponents/dist/Avatar.js";
import AvatarSize from "@ui5/webcomponents/dist/types/AvatarSize.js";
import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
import { SEARCH_ITEM_SHOW_MORE_COUNT, SEARCH_ITEM_SHOW_MORE_NO_COUNT } from "../../src/generated/i18n/i18n-defaults.js";
import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
import edit from "@ui5/webcomponents-icons/dist/edit.js";
import share from "@ui5/webcomponents-icons/dist/share.js";
import copy from "@ui5/webcomponents-icons/dist/copy.js";

describe("Properties", () => {
it("items slot with groups", () => {
Expand Down Expand Up @@ -509,6 +513,297 @@ describe("Properties", () => {
.find(".ui5-search-item-selected-delete")
.should("not.exist");
});

it("tab navigation between action buttons works correctly", () => {
cy.mount(
<Search>
<SearchItem text="Item 1" deletable>
<Button design={ButtonDesign.Transparent} icon={favorite} slot="actions"/>
<Button design={ButtonDesign.Transparent} icon={edit} slot="actions"/>
</SearchItem>
</Search>
);

cy.get("[ui5-search]")
.shadow()
.find("input")
.realClick();

cy.realPress("I");
cy.realPress("ArrowDown");

cy.realPress("F2");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='edit']")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.shadow()
.find(".ui5-search-item-selected-delete")
.should("be.focused");
});

it("shift+tab navigation between action buttons works correctly", () => {
cy.mount(
<Search>
<SearchItem text="Item 1" deletable>
<Button design={ButtonDesign.Transparent} icon={favorite} slot="actions"/>
<Button design={ButtonDesign.Transparent} icon={edit} slot="actions"/>
</SearchItem>
</Search>
);

cy.get("[ui5-search]")
.shadow()
.find("input")
.realClick();

cy.realPress("I");
cy.realPress("ArrowDown");

cy.realPress("F2");

cy.get("[ui5-search-item]")
.eq(0)
.shadow()
.find(".ui5-search-item-selected-delete")
.realClick();

cy.realPress(["Shift", "Tab"]);

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='edit']")
.should("be.focused");

cy.realPress(["Shift", "Tab"]);

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");
});

it("action button clicks work correctly", () => {
cy.mount(
<Search>
<SearchItem text="Item 1">
<Button design={ButtonDesign.Transparent} icon={favorite} slot="actions" onClick={cy.spy().as("favoriteClick")}/>
<Button design={ButtonDesign.Transparent} icon={share} slot="actions" onClick={cy.spy().as("shareClick")}/>
</SearchItem>
</Search>
);

cy.get("[ui5-search]")
.shadow()
.find("input")
.realClick();

cy.realPress("I");
cy.realPress("ArrowDown");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.realClick();

cy.get("@favoriteClick").should("have.been.calledOnce");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='share']")
.realClick();

cy.get("@shareClick").should("have.been.calledOnce");
});

it("tab navigation loops back to first action when at last action button", () => {
cy.mount(
<Search>
<SearchItem text="Item 1">
<Button design={ButtonDesign.Transparent} icon={favorite} slot="actions"/>
<Button design={ButtonDesign.Transparent} icon={edit} slot="actions"/>
</SearchItem>
</Search>
);

cy.get("[ui5-search]")
.shadow()
.find("input")
.realClick();

cy.realPress("I");
cy.realPress("ArrowDown");

cy.realPress("F2");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='edit']")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");
});

it("tab navigation loops with actions and delete button", () => {
cy.mount(
<Search>
<SearchItem text="Item 1" deletable>
<Button design={ButtonDesign.Transparent} icon={favorite} slot="actions"/>
<Button design={ButtonDesign.Transparent} icon={edit} slot="actions"/>
</SearchItem>
</Search>
);

cy.get("[ui5-search]")
.shadow()
.find("input")
.realClick();

cy.realPress("I");
cy.realPress("ArrowDown");

cy.realPress("F2");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='edit']")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.shadow()
.find(".ui5-search-item-selected-delete")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");
});

it("shift+tab navigation loops with actions and delete button", () => {
cy.mount(
<Search>
<SearchItem text="Item 1" deletable>
<Button design={ButtonDesign.Transparent} icon={favorite} slot="actions"/>
<Button design={ButtonDesign.Transparent} icon={edit} slot="actions"/>
</SearchItem>
</Search>
);

cy.get("[ui5-search]")
.shadow()
.find("input")
.realClick();

cy.realPress("I");
cy.realPress("ArrowDown");

cy.realPress("F2");

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");

cy.realPress(["Shift", "Tab"]);

cy.get("[ui5-search-item]")
.eq(0)
.shadow()
.find(".ui5-search-item-selected-delete")
.should("be.focused");

cy.realPress(["Shift", "Tab"]);

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='edit']")
.should("be.focused");

cy.realPress(["Shift", "Tab"]);

cy.get("[ui5-search-item]")
.eq(0)
.find("[ui5-button][icon='favorite']")
.should("be.focused");
});

it("focus looping works with only delete button (no actions)", () => {
cy.mount(
<Search>
<SearchItem text="Item 1" deletable />
</Search>
);

cy.get("[ui5-search]")
.shadow()
.find("input")
.realClick();

cy.realPress("I");
cy.realPress("ArrowDown");

cy.realPress("F2");

cy.get("[ui5-search-item]")
.eq(0)
.shadow()
.find(".ui5-search-item-selected-delete")
.should("be.focused");

cy.realPress("Tab");

cy.get("[ui5-search-item]")
.eq(0)
.shadow()
.find(".ui5-search-item-selected-delete")
.should("be.focused");

cy.realPress(["Shift", "Tab"]);

cy.get("[ui5-search-item]")
.eq(0)
.shadow()
.find(".ui5-search-item-selected-delete")
.should("be.focused");
});
});

describe("Events", () => {
Expand Down
Loading
Loading