Skip to content

feat(ui5-ai-textarea) apply UX feedback adjustments #12819

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 11 commits into from
Dec 29, 2025
Merged

feat(ui5-ai-textarea) apply UX feedback adjustments #12819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
08e1dde
fix(ui5-ai-textarea): add docs and correct samples
ndeshev Dec 5, 2025
0034d49
Merge branch 'main' into ai-textarea-sample
ndeshev Dec 17, 2025
203d9e6
docs(ui5-ai-textarea): add docs and correct samples
ndeshev Dec 17, 2025
00f36ad
feat(ai-textarea): apply UX feedback adjustments
ndeshev Dec 17, 2025
adc9a49
Merge branch 'main' into ai-textarea-adjustments
ndeshev Dec 17, 2025
ce4e648
feat(ui5-ai-textarea): apply UX feedback adjustments
ndeshev Dec 22, 2025
f5426a9
feat(ui5-ai-textarea): apply UX feedback adjustments
ndeshev Dec 22, 2025
a11db90
Merge branch 'main' into ai-textarea-adjustments
ndeshev Dec 22, 2025
82548b5
feat(ui5-ai-textarea): apply UX feedback adjustments
ndeshev Dec 23, 2025
9601100
Merge branch 'ai-textarea-adjustments' of https://github.com/SAP/ui5-…
ndeshev Dec 23, 2025
2f173e2
Merge branch 'main' into ai-textarea-adjustments
ndeshev Dec 23, 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
111 changes: 105 additions & 6 deletions packages/ai/cypress/specs/TextArea.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ describe("Basic", () => {
/>
);

cy.get("[ui5-ai-textarea]")
.shadow()
.find("textarea")
.focus();

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
Expand All @@ -135,11 +140,17 @@ describe("Basic", () => {
cy.mount(
<TextArea
loading={false}
currentVersion={1}
totalVersions={3}
onVersionChange={onVersionChange}
/>
);

cy.get("[ui5-ai-textarea]")
.shadow()
.find("textarea")
.focus();

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
Expand All @@ -162,6 +173,7 @@ describe("Basic", () => {
cy.mount(
<TextArea
loading={false}
currentVersion={1}
totalVersions={3}
/>
);
Expand Down Expand Up @@ -207,7 +219,7 @@ describe("Basic", () => {
<TextArea
value={initialValue}
loading={false}
currentVersion={0}
currentVersion={1}
totalVersions={2}
/>
);
Expand All @@ -216,6 +228,11 @@ describe("Basic", () => {
.as("textarea")
.invoke("prop", "value", newValue);

cy.get("@textarea")
.shadow()
.find("textarea")
.focus();

cy.get("@textarea")
.shadow()
.find("[ui5-ai-writing-assistant]")
Expand Down Expand Up @@ -262,6 +279,11 @@ describe("Basic", () => {
</TextArea>
);

cy.get("[ui5-ai-textarea]")
.shadow()
.find("textarea")
.focus();

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
Expand All @@ -284,6 +306,11 @@ describe("Basic", () => {
/>
);

cy.get("[ui5-ai-textarea]")
.shadow()
.find("textarea")
.focus();

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
Expand Down Expand Up @@ -516,7 +543,11 @@ describe("Basic", () => {
/>
);

// Verify that the integrated WritingAssistant has translatable attributes
cy.get("[ui5-ai-textarea]")
.shadow()
.find("textarea")
.focus();

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
Expand All @@ -532,15 +563,14 @@ describe("Basic", () => {
.should("have.attr", "accessible-name", TextArea.i18nBundle.getText(WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME))
.should("have.attr", "tooltip", TextArea.i18nBundle.getText(WRITING_ASSISTANT_BUTTON_TOOLTIP));

// Verify versioning tooltips are translatable
cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
.shadow()
.find("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="previous"]')
.should("have.attr", "tooltip", "Previous Version");
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)");

cy.get("[ui5-ai-textarea]")
.shadow()
Expand All @@ -549,7 +579,76 @@ describe("Basic", () => {
.find("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="next"]')
.should("have.attr", "tooltip", "Next Version");
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)");
});
});

describe("AI Button Focus Visibility", () => {
it("should show AI button only when textarea, button, or menu has focus", () => {
cy.mount(
<TextArea>
<Menu slot="menu" id="test-menu">
<MenuItem text="Generate text" />
<MenuItem text="Summarize" />
</Menu>
</TextArea>
);

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
.shadow()
.find("#ai-menu-btn")
.should("not.exist");

cy.get("[ui5-ai-textarea]")
.shadow()
.find("textarea")
.focus();

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
.shadow()
.find("#ai-menu-btn")
.should("exist")
.should("be.visible");

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
.shadow()
.find("#ai-menu-btn")
.should("exist")
.should("be.visible");

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
.shadow()
.find("#ai-menu-btn")
.realClick();

cy.get("[ui5-ai-textarea]")
.find("ui5-menu")
.should("have.prop", "open", true);

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
.shadow()
.find("#ai-menu-btn")
.should("exist")
.should("be.visible");

cy.get("body").click();

cy.get("[ui5-ai-textarea]")
.shadow()
.find("[ui5-ai-writing-assistant]")
.shadow()
.find("#ai-menu-btn")
.should("not.exist");
});
});

Expand Down Expand Up @@ -602,4 +701,4 @@ describe("Basic", () => {
.should("not.exist");
});
});
});
});
33 changes: 12 additions & 21 deletions packages/ai/cypress/specs/Versioning.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -536,7 +536,7 @@ describe("Versioning Component", () => {
cy.get("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="previous"]')
.should("have.attr", "tooltip", "Previous Version");
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)");
});

it("should have translatable next button tooltip", () => {
Expand All @@ -545,7 +545,7 @@ describe("Versioning Component", () => {
cy.get("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="next"]')
.should("have.attr", "tooltip", "Next Version");
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)");
});

it("should maintain tooltips when button states change", () => {
Expand All @@ -554,98 +554,89 @@ describe("Versioning Component", () => {
cy.get("[ui5-ai-versioning]")
.as("versioning");

// Previous button disabled at first step, but still has tooltip
cy.get("@versioning")
.shadow()
.find('[data-ui5-versioning-button="previous"]')
.should("have.attr", "tooltip", "Previous Version")
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
.shadow()
.find("ui5-button")
.should("have.attr", "disabled");

// Next button enabled and has tooltip
cy.get("@versioning")
.shadow()
.find('[data-ui5-versioning-button="next"]')
.should("have.attr", "tooltip", "Next Version")
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
.shadow()
.find("ui5-button")
.should("not.have.attr", "disabled");

// Move to middle step
cy.get("@versioning").invoke("prop", "currentStep", 2);

// Both buttons enabled and have tooltips
cy.get("@versioning")
.shadow()
.find('[data-ui5-versioning-button="previous"]')
.should("have.attr", "tooltip", "Previous Version")
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
.shadow()
.find("ui5-button")
.should("not.have.attr", "disabled");

cy.get("@versioning")
.shadow()
.find('[data-ui5-versioning-button="next"]')
.should("have.attr", "tooltip", "Next Version")
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
.shadow()
.find("ui5-button")
.should("not.have.attr", "disabled");

// Move to last step
cy.get("@versioning").invoke("prop", "currentStep", 3);

// Previous button enabled and has tooltip
cy.get("@versioning")
.shadow()
.find('[data-ui5-versioning-button="previous"]')
.should("have.attr", "tooltip", "Previous Version")
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
.shadow()
.find("ui5-button")
.should("not.have.attr", "disabled");

// Next button disabled at last step, but still has tooltip
cy.get("@versioning")
.shadow()
.find('[data-ui5-versioning-button="next"]')
.should("have.attr", "tooltip", "Next Version")
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
.shadow()
.find("ui5-button")
.should("have.attr", "disabled");
});

it("should maintain tooltips with edge cases", () => {
// Single step case
cy.mount(<Versioning currentStep={1} totalSteps={1} />);

cy.get("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="previous"]')
.should("have.attr", "tooltip", "Previous Version")
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
.shadow()
.find("ui5-button")
.should("have.attr", "disabled");

cy.get("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="next"]')
.should("have.attr", "tooltip", "Next Version")
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
.shadow()
.find("ui5-button")
.should("have.attr", "disabled");

// Zero steps case
cy.mount(<Versioning currentStep={0} totalSteps={0} />);

cy.get("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="previous"]')
.should("have.attr", "tooltip", "Previous Version");
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)");

cy.get("[ui5-ai-versioning]")
.shadow()
.find('[data-ui5-versioning-button="next"]')
.should("have.attr", "tooltip", "Next Version");
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)");
});
});
});
Expand Down
Loading
Loading