OrgTJWater/next-tjwater-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine agent composer focus feedback

Browse Source
This commit is contained in:
jiang
2026-10-30 17:09:13 +08:00
parent 185bf31446
commit ddd03dbff6
2 changed files with 38 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/browser/form-focus.e2e.ts
+23 -12
View File
@@ -10,22 +10,29 @@ test.beforeEach(async ({ page }) => {
await page.goto("/", { waitUntil: "domcontentloaded" });
});
test("Agent composer keeps one thin focus boundary without an outer blue ring", async ({ page }) => {
test("Agent composer uses a neutral shadow instead of a blue focus border", async ({ page }) => {
await page.emulateMedia({ reducedMotion: "no-preference" });
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
const form = page.locator("form.agent-panel-control");
const textarea = page.getByPlaceholder(/输入调度问题/);
const textarea = page.getByRole("textbox", { name: "询问供水问题，或描述需要处理的任务" });
const restingShadow = await form.evaluate((element) => getComputedStyle(element).boxShadow);
const restingBorder = await form.evaluate((element) => getComputedStyle(element).borderColor);
expect(restingShadow).not.toBe("none");
const restingBox = await form.boundingBox();
await textarea.click();
await expectThemeColor(form, "border-color", "--action-blue-hover");
await expect(form).toHaveCSS("border-color", restingBorder);
await expect(form).toHaveCSS("border-width", "1px");
await expect(form).toHaveCSS("box-shadow", restingShadow);
await expect(form).not.toHaveCSS("box-shadow", restingShadow);
await expect(form).toHaveCSS("transform", "matrix(1, 0, 0, 1, 0, -2)");
await expect(textarea).toHaveCSS("outline-style", "none");
expect(await form.boundingBox()).toEqual(restingBox);
const liftedBox = await form.boundingBox();
expect(liftedBox?.x).toBeCloseTo(restingBox!.x, 1);
expect(liftedBox?.y).toBeCloseTo(restingBox!.y - 2, 1);
expect(liftedBox?.width).toBeCloseTo(restingBox!.width, 1);
expect(liftedBox?.height).toBeCloseTo(restingBox!.height, 1);
await page.keyboard.press("Tab");
await textarea.focus();
await expectThemeColor(form, "border-color", "--action-blue-hover");
await expect(form).toHaveCSS("border-color", restingBorder);
const focusedBox = await form.boundingBox();
await page.screenshot({
path: "test-results/form-focus/agent-focused.png",
@@ -89,16 +96,20 @@ test("borderless selects and choice controls keep one theme keyboard focus indic
});
for (const width of [320, 375]) {
test(`mobile composer owns a single inset focus stroke at ${width}px`, async ({ page }) => {
test(`mobile composer keeps a neutral focus treatment at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 844 });
await page.getByRole("button", { name: "打开 Agent 面板" }).click();
const textarea = page.getByPlaceholder(/输入调度问题/);
const textarea = page.getByRole("textbox", { name: "询问供水问题，或描述需要处理的任务" });
const material = page.locator("form.agent-panel-input-form");
const restingBorder = await material.evaluate((element) => getComputedStyle(element).borderColor);
const restingShadow = await material.evaluate((element) => getComputedStyle(element).boxShadow);
const restingBox = await material.boundingBox();
await textarea.click();
const material = page.locator(".agent-panel-composer");
await expect(material).toHaveCSS("outline-width", "1px");
await expect(material).toHaveCSS("outline-offset", "-1px");
await expectThemeColor(material, "outline-color", "--action-blue-hover");
await expect(material).toHaveCSS("border-width", "1px");
await expect(material).toHaveCSS("border-color", restingBorder);
await expect(material).not.toHaveCSS("box-shadow", restingShadow);
await expect(textarea).toHaveCSS("outline-style", "none");
expect(await material.boundingBox()).toEqual(restingBox);
await page.screenshot({ path: `test-results/form-focus/mobile-${width}.png` });
});
}