boardx / boardx/workspacex

v2 composer:输入框不自动增高,且 <textarea> 没有可及名(aria-label)

Open Beginner friendly
#3,022 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
0
Forks
0
Avg merge
1h 7m
Merged PRs (30d)
969

Description

## 现象(两条,同一个 composer)

### ① 输入框不会自动增高

v2 的 composer 是一个写死 `rows={3}` 的 ``(`apps/web/components/chat/copilotkit-v2-panel-body.tsx:1815-1818`),全文件没有任何按 `scrollHeight` 回写高度的逻辑:

```
$ grep -n "scrollHeight" apps/web/components/chat/copilotkit-v2-panel-body.tsx
908/914/917/928/930 # 三处都在语音镜像层的滚动同步里,与高度无关
```

旧屏 `chat-live-message-panel.tsx` 有真实的自增高 + 200px 封顶(由 `chat-read.spec.ts` 的 V7 用例钉住)。用户在 v2 里粘一段多行文本,输入框不长高,只能在三行的窗口里滚——写长指令时看不到自己写了什么。

### ② `<textarea>` 没有可及名(a11y)

旧屏:
```
apps/web/components/chat/chat-live-message-panel.tsx:1685 data-testid="chat-message-input"
apps/web/components/chat/chat-live-message-panel.tsx:1686 aria-label="消息内容"
```
v2(`copilotkit-v2-panel-body.tsx:1815` 起):**没有 `aria-label`,也没有关联的 `<label>`**。可及名只能回落到 `placeholder`,而那个 placeholder 会随状态在三句话之间变(归档 / 运行中 / 常态)——屏幕阅读器读到的控件名会跟着变。

这同时是 `chat-read` 24 红里 9 条的直接触发点:`getByRole("textbox", { name: "消息内容" })` 在 v2 上匹配不到任何元素。

## 影响

- ① 长指令输入体验退化(`03-keyboard-accessibility` / `uiux-standards` 关心的可用性面)。
- ② 违反"交互控件必须有稳定可及名"这条基本无障碍要求;`placeholder` 充当 label 是公认反模式,且这里的 placeholder 还不稳定。

## 建议修法

- ①:给 `composerInputRef` 加一个 `useLayoutEffect`,按 `scrollHeight` 回写高度并封顶(数值直接沿用旧屏的 200px,不新造一个)。
- ②:加 `aria-label="消息内容"`——与旧屏逐字同名,迁移过来的 e2e 断言可以直接用回 `getByRole`,不需要在测试里迁就实现。

## 相关

issue #2997。V7 用例(自增高)的断言原文保留在
`apps/web/e2e/chat-read.spec.ts` 的 `test.fixme("V7(PROP-CHAT-10ITER-001)composer auto-grows…")` 里,未删、未放宽。

## 真栈实测(2026-09-08,SHA `94f6dda03`)

```
PROBE_COMPOSER {"ariaLabel":null,"placeholder":"输入任务目标,Shift+Enter 换行,Enter 发送","id":"","rows":3}
PROBE_ROLE_TEXTBOX_消息内容=0
```

`rows:3` 且无任何高度回写逻辑;`ariaLabel:null`;`getByRole("textbox", { name: "消息内容" })` 在真实页面上匹配 **0** 个元素。

## 顺带实测到的第三件:Tab 走查到不了输入框

同一次探针:从会话卡出发按 Tab,**60 步之内没有到达 `copilotkit-v2-input`**。走查路径被逐条消息的三个常驻按钮占满(`copilot-user-copy-button` / `chat-message-copy` / `chat-land-artifact-open-<id>`),夹具线程有 51 条消息 ⇒ 至少 150+ 次 Tab 才可能走到编制区。

⚠ **诚实边界**:旧屏的逐条复制按钮用的是 `opacity-0 group-hover`(不是 `visibility:hidden`),同样可聚焦,所以这一条**大概率不是 v2 引入的退化**,而是两屏共有的、此前没有被任何断言覆盖到的 a11y 问题。放在这里是因为它和上面两条同属"v2 composer 的键盘可达性",请一并裁决要不要修(常见修法:给消息区一个跳过链接,或让逐条操作条只在消息获得焦点时进入 Tab 序)。

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in apps/web/components/chat/copilotkit-v2-panel-body.tsx around lines 1815-1818, then compare the existing behavior in chat-live-message-panel.tsx. Run apps/web/e2e/chat-read.spec.ts, including the preserved V7 auto-grow case, and consider the textbox name assertions. Done means the v2 textarea has a stable “消息内容” accessible name and grows up to 200px; the broader Tab-order concern is separately identified in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend, testing
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.