Skip to content

Commit b64b10d

Browse files
ndeshevndeshev
authored
feat(ui5-ai-textarea) apply UX feedback adjustments (#12819)
* fix(ui5-ai-textarea): add docs and correct samples adjust samples and test pages to reflect the changes made in #12638
1 parent 7bd25a1 commit b64b10d

14 files changed

Lines changed: 227 additions & 135 deletions

File tree

‎packages/ai/cypress/specs/TextArea.cy.tsx‎

Lines changed: 105 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,11 @@ describe("Basic", () => {
111111
/>
112112
);
113113

114+
cy.get("[ui5-ai-textarea]")
115+
.shadow()
116+
.find("textarea")
117+
.focus();
118+
114119
cy.get("[ui5-ai-textarea]")
115120
.shadow()
116121
.find("[ui5-ai-writing-assistant]")
@@ -135,11 +140,17 @@ describe("Basic", () => {
135140
cy.mount(
136141
<TextArea
137142
loading={false}
143+
currentVersion={1}
138144
totalVersions={3}
139145
onVersionChange={onVersionChange}
140146
/>
141147
);
142148

149+
cy.get("[ui5-ai-textarea]")
150+
.shadow()
151+
.find("textarea")
152+
.focus();
153+
143154
cy.get("[ui5-ai-textarea]")
144155
.shadow()
145156
.find("[ui5-ai-writing-assistant]")
@@ -162,6 +173,7 @@ describe("Basic", () => {
162173
cy.mount(
163174
<TextArea
164175
loading={false}
176+
currentVersion={1}
165177
totalVersions={3}
166178
/>
167179
);
@@ -207,7 +219,7 @@ describe("Basic", () => {
207219
<TextArea
208220
value={initialValue}
209221
loading={false}
210-
currentVersion={0}
222+
currentVersion={1}
211223
totalVersions={2}
212224
/>
213225
);
@@ -216,6 +228,11 @@ describe("Basic", () => {
216228
.as("textarea")
217229
.invoke("prop", "value", newValue);
218230

231+
cy.get("@textarea")
232+
.shadow()
233+
.find("textarea")
234+
.focus();
235+
219236
cy.get("@textarea")
220237
.shadow()
221238
.find("[ui5-ai-writing-assistant]")
@@ -262,6 +279,11 @@ describe("Basic", () => {
262279
</TextArea>
263280
);
264281

282+
cy.get("[ui5-ai-textarea]")
283+
.shadow()
284+
.find("textarea")
285+
.focus();
286+
265287
cy.get("[ui5-ai-textarea]")
266288
.shadow()
267289
.find("[ui5-ai-writing-assistant]")
@@ -284,6 +306,11 @@ describe("Basic", () => {
284306
/>
285307
);
286308

309+
cy.get("[ui5-ai-textarea]")
310+
.shadow()
311+
.find("textarea")
312+
.focus();
313+
287314
cy.get("[ui5-ai-textarea]")
288315
.shadow()
289316
.find("[ui5-ai-writing-assistant]")
@@ -516,7 +543,11 @@ describe("Basic", () => {
516543
/>
517544
);
518545

519-
// Verify that the integrated WritingAssistant has translatable attributes
546+
cy.get("[ui5-ai-textarea]")
547+
.shadow()
548+
.find("textarea")
549+
.focus();
550+
520551
cy.get("[ui5-ai-textarea]")
521552
.shadow()
522553
.find("[ui5-ai-writing-assistant]")
@@ -532,15 +563,14 @@ describe("Basic", () => {
532563
.should("have.attr", "accessible-name", TextArea.i18nBundle.getText(WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME))
533564
.should("have.attr", "tooltip", TextArea.i18nBundle.getText(WRITING_ASSISTANT_BUTTON_TOOLTIP));
534565

535-
// Verify versioning tooltips are translatable
536566
cy.get("[ui5-ai-textarea]")
537567
.shadow()
538568
.find("[ui5-ai-writing-assistant]")
539569
.shadow()
540570
.find("[ui5-ai-versioning]")
541571
.shadow()
542572
.find('[data-ui5-versioning-button="previous"]')
543-
.should("have.attr", "tooltip", "Previous Version");
573+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)");
544574

545575
cy.get("[ui5-ai-textarea]")
546576
.shadow()
@@ -549,7 +579,76 @@ describe("Basic", () => {
549579
.find("[ui5-ai-versioning]")
550580
.shadow()
551581
.find('[data-ui5-versioning-button="next"]')
552-
.should("have.attr", "tooltip", "Next Version");
582+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)");
583+
});
584+
});
585+
586+
describe("AI Button Focus Visibility", () => {
587+
it("should show AI button only when textarea, button, or menu has focus", () => {
588+
cy.mount(
589+
<TextArea>
590+
<Menu slot="menu" id="test-menu">
591+
<MenuItem text="Generate text" />
592+
<MenuItem text="Summarize" />
593+
</Menu>
594+
</TextArea>
595+
);
596+
597+
cy.get("[ui5-ai-textarea]")
598+
.shadow()
599+
.find("[ui5-ai-writing-assistant]")
600+
.shadow()
601+
.find("#ai-menu-btn")
602+
.should("not.exist");
603+
604+
cy.get("[ui5-ai-textarea]")
605+
.shadow()
606+
.find("textarea")
607+
.focus();
608+
609+
cy.get("[ui5-ai-textarea]")
610+
.shadow()
611+
.find("[ui5-ai-writing-assistant]")
612+
.shadow()
613+
.find("#ai-menu-btn")
614+
.should("exist")
615+
.should("be.visible");
616+
617+
cy.get("[ui5-ai-textarea]")
618+
.shadow()
619+
.find("[ui5-ai-writing-assistant]")
620+
.shadow()
621+
.find("#ai-menu-btn")
622+
.should("exist")
623+
.should("be.visible");
624+
625+
cy.get("[ui5-ai-textarea]")
626+
.shadow()
627+
.find("[ui5-ai-writing-assistant]")
628+
.shadow()
629+
.find("#ai-menu-btn")
630+
.realClick();
631+
632+
cy.get("[ui5-ai-textarea]")
633+
.find("ui5-menu")
634+
.should("have.prop", "open", true);
635+
636+
cy.get("[ui5-ai-textarea]")
637+
.shadow()
638+
.find("[ui5-ai-writing-assistant]")
639+
.shadow()
640+
.find("#ai-menu-btn")
641+
.should("exist")
642+
.should("be.visible");
643+
644+
cy.get("body").click();
645+
646+
cy.get("[ui5-ai-textarea]")
647+
.shadow()
648+
.find("[ui5-ai-writing-assistant]")
649+
.shadow()
650+
.find("#ai-menu-btn")
651+
.should("not.exist");
553652
});
554653
});
555654

@@ -602,4 +701,4 @@ describe("Basic", () => {
602701
.should("not.exist");
603702
});
604703
});
605-
});
704+
});

‎packages/ai/cypress/specs/Versioning.cy.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -536,7 +536,7 @@ describe("Versioning Component", () => {
536536
cy.get("[ui5-ai-versioning]")
537537
.shadow()
538538
.find('[data-ui5-versioning-button="previous"]')
539-
.should("have.attr", "tooltip", "Previous Version");
539+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)");
540540
});
541541

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

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

557-
// Previous button disabled at first step, but still has tooltip
558557
cy.get("@versioning")
559558
.shadow()
560559
.find('[data-ui5-versioning-button="previous"]')
561-
.should("have.attr", "tooltip", "Previous Version")
560+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
562561
.shadow()
563562
.find("ui5-button")
564563
.should("have.attr", "disabled");
565564

566-
// Next button enabled and has tooltip
567565
cy.get("@versioning")
568566
.shadow()
569567
.find('[data-ui5-versioning-button="next"]')
570-
.should("have.attr", "tooltip", "Next Version")
568+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
571569
.shadow()
572570
.find("ui5-button")
573571
.should("not.have.attr", "disabled");
574572

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

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

587583
cy.get("@versioning")
588584
.shadow()
589585
.find('[data-ui5-versioning-button="next"]')
590-
.should("have.attr", "tooltip", "Next Version")
586+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
591587
.shadow()
592588
.find("ui5-button")
593589
.should("not.have.attr", "disabled");
594590

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

598-
// Previous button enabled and has tooltip
599593
cy.get("@versioning")
600594
.shadow()
601595
.find('[data-ui5-versioning-button="previous"]')
602-
.should("have.attr", "tooltip", "Previous Version")
596+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
603597
.shadow()
604598
.find("ui5-button")
605599
.should("not.have.attr", "disabled");
606600

607-
// Next button disabled at last step, but still has tooltip
608601
cy.get("@versioning")
609602
.shadow()
610603
.find('[data-ui5-versioning-button="next"]')
611-
.should("have.attr", "tooltip", "Next Version")
604+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
612605
.shadow()
613606
.find("ui5-button")
614607
.should("have.attr", "disabled");
615608
});
616609

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

621613
cy.get("[ui5-ai-versioning]")
622614
.shadow()
623615
.find('[data-ui5-versioning-button="previous"]')
624-
.should("have.attr", "tooltip", "Previous Version")
616+
.should("have.attr", "tooltip", "Previous Version (Ctrl + Shift + Z)")
625617
.shadow()
626618
.find("ui5-button")
627619
.should("have.attr", "disabled");
628620

629621
cy.get("[ui5-ai-versioning]")
630622
.shadow()
631623
.find('[data-ui5-versioning-button="next"]')
632-
.should("have.attr", "tooltip", "Next Version")
624+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)")
633625
.shadow()
634626
.find("ui5-button")
635627
.should("have.attr", "disabled");
636628

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

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

645636
cy.get("[ui5-ai-versioning]")
646637
.shadow()
647638
.find('[data-ui5-versioning-button="next"]')
648-
.should("have.attr", "tooltip", "Next Version");
639+
.should("have.attr", "tooltip", "Next Version (Ctrl + Shift + Y)");
649640
});
650641
});
651642
});

0 commit comments

Comments
 (0)