feat: 新增统一的飞书标签选择组件 - #799
Merged
Merged
Conversation
deepcoldy
reviewed
Aug 9, 2026
deepcoldy
left a comment
Owner
There was a problem hiding this comment.
审查结论
结论:COMMENT;disabled 问题本身不需要升级为阻断。
- 当前实现已经包含
aria-disabled与onClick(...preventDefault())。Chromium 实测 disabled summary 聚焦后按 Enter / Space,details.open均保持false;因此“键盘仍可展开”的判断不成立。 - 实际存在的 disabled 回归是 summary 仍为
tabIndex=0,会留下一个无效 Tab 停靠点。建议补齐tabIndex={disabled ? -1 : undefined};为组件健壮性可同时补上 disabled 切换时关闭已展开菜单。 - 还有两个从原生
select迁移后更值得修的 a11y 细节:aria-label="飞书标签"覆盖了 summary 的可见文本,读屏聚焦控件时不再像原生 select 那样暴露当前值;建议把当前label纳入可访问名称。- 键盘激活某个标签按钮后,菜单关闭且焦点落到
body;建议关闭后把焦点还给 summary。
- 布局边界:60 字符无空格标签在 360px 视口实测,summary 宽 248px、
scrollWidth=582px,文字会穿过箭头并溢出控件。建议给 summary 文本和选项文本增加min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap。 - 长列表边界:20 个已有标签时弹层实测高约 889px,
max-height: none; overflow-y: visible,最后选项落在 600px 视口之外,只能依赖外层 modal 滚动。建议给弹层设置视口相关max-height与overflow-y: auto。
这些问题均有 workaround,未达到“核心流程不可用、无绕行”的阻断级别;但修复成本很低,建议在合并前一并收口。
验证:
pnpm build:通过pnpm exec vitest run --project unit test/dashboard-feed-groups.test.ts test/dashboard-create-session.test.ts test/dashboard-sessions-ui.test.ts test/dashboard-groups-command.test.ts:4 files / 84 tests 通过- Chromium 键盘与 360×640、800×600 布局实测:结果如上
流程项:PR 标题/描述目前为英文,且 UI 改动未附截图;按仓库规范应改为中文说明并补实际界面截图。
Contributor
Author
|
已按审核意见逐项修改:禁用时移出 Tab 顺序并关闭已展开菜单;无障碍名称包含当前值;键盘选择后焦点返回入口;超长标签显示省略号;长列表限制高度并支持滚动。PR 标题和说明已改为中文,并补充真实界面截图。相关单测与构建均通过,请复审。 |
deepcoldy
approved these changes
Aug 9, 2026
deepcoldy
left a comment
Owner
There was a problem hiding this comment.
审查通过
head e3b2d716f 已逐项收口此前反馈:disabled Tab 顺序与状态切换、可访问名称当前值、选项选择后的焦点归还、长文本省略、长列表内部滚动,以及中文说明和界面截图均已核对。
验证:
- 与最新
master@574603c9d合并树无冲突 pnpm build通过- 相关单测 4 files / 84 tests 通过
git diff --check通过- 改动范围为 4 个 Dashboard 前端文件 + 1 张截图,无夹带
两个非阻断残留:
- 弹层输入框内按 Esc 会关闭 details,但 Chromium 实测焦点落到
body;后续可让 Escape 路径也归还 summary。 - PR 标题仍缺仓库约定的 scope,建议合并前改为
feat(dashboard): 新增统一的飞书标签选择组件。两个 commit message 也未带 scope;如采用 squash merge,至少确保最终标题/提交信息符合规范。
以上不影响本次代码批准;未执行合并。
|
🚀 Released in v3.12.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
变更内容
界面截图
验证
git diff --checkpnpm exec vitest run --project unit test/dashboard-feed-groups.test.ts test/dashboard-create-session.test.ts test/dashboard-sessions-ui.test.ts test/dashboard-groups-command.test.tspnpm build以上检查均通过。