Repository navigation
fix(a11y): restore dark-theme contrast on group tabs and stabilize F06 e2e - #74
Conversation
…6 e2e - GroupNav: the selected horizontal tab used colorPrimary (#1668dc on #141414, 3.55:1 in dark); use the runtime colorLink token instead (unchanged #0958d9 in light, #5c99dc 6.18:1 in dark), fixing the 12 realDark axe color-contrast failures introduced by #71 - hide ProLayout's empty fixed-header placeholder <header> from the accessibility tree (visibility: hidden keeps its 56px box), clearing landmark-no-duplicate-banner / landmark-unique on every route - F06 e2e: the signature ticket select is a virtual list (~10 rows) and the reworked ticket's rank depends on time of day and timezone (UTC in CI), so wheel-scroll the dropdown until the option renders
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 6 minutes. View limit details
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Jerry-CodeHub
left a comment
There was a problem hiding this comment.
三处根因的分析都成立:选中页签在暗色下用 colorPrimary(#1668dc 压在 #141414 上只有 3.55:1),改用 colorLink 后是 6.18:1;ProLayout 的 fixedHeader 占位 <header> 造成了重复的横幅地标;F06 是虚拟列表加上演示数据按本地自然日生成,CI 跑在 UTC 时目标工单常排到第 10 项之后。改动范围也收得很小。
- 【阻塞 CI】check 失败不是偶发:Coverage gate 里
src/pages/Map/Cesium/capabilityModel.test.ts两次都超过了 5 秒上限(5197ms、5274ms)。这条用例在 master 上本来就贴着阈值(不开覆盖率时约 4.5s)。不处理的话,#74 和之后的 PR 都只能用--admin合并。建议给这条用例单独放宽超时(例如it(..., 20_000)),或者把逐点expect改成先收集结果、最后断言一次:现在大约是 857 步 × 3 种能力 × 72 个点 × 3 次expect,覆盖率插桩下,expect调用是主要耗时。 - 【低】
header.ant-layout-header:has(+ header[data-testid='pro-layout-header'])依赖 ProLayout 的内部 DOM 结构:占位 header 必须紧挨着真实 header,且真实 header 带data-testid。pro-components 升级改了结构的话,这个选择器会悄悄失效,地标问题会回来;而 a11y 门禁只拦 serious 级别,不会报警。建议在 a11y e2e 里把landmark-no-duplicate-banner也加进断言,或者至少在注释里注明升级时要复核。 - 【nit】 F06 用滚轮逐屏翻虚拟列表可以过,但根因是演示数据随本地自然日和时区变化,排序不固定。更稳的做法是在 e2e 里固定时区(Playwright 的
timezoneId)或固定时钟,免得以后同类用例又随运行时刻抖动。 - 【nit】
GroupNav每次渲染都新建一个theme对象传给嵌套的ConfigProvider,可以用useMemo(只在token.colorLink变化时重建),避免 cssinjs 重复计算。
Jerry-CodeHub
left a comment
There was a problem hiding this comment.
批准。capabilityModel 用例超时后续单独修。
背景
#71(顶部导航改版,合并提交 9a0827a)在 e2e 失败的状态下合入了 master。CI 运行 39210930382 中有 13 条用例失败,之后每个 PR 的 e2e 都会卡在同样的位置。本 PR 修复这 13 条失败。
1. 暗色主题 axe
color-contrast(12 条,属于 #71 引入的回归)根因:在本地对
/system/users [realDark]跑 axe 并读取逐节点报告,命中的元素是报错的是 GroupNav 里 antd 横向 Menu 的选中页签文字,不是尾部的组名小字(组名小字是
colorTextTertiary#a6a6a6,在 #141414 上 7.57:1,达标)。antd 的horizontalItemSelectedColor默认取colorPrimary,暗色算法把它派生成 #1668dc。Dashboard 没有组内导航条,所以没有报错。修复:在
src/components/GroupNav/index.tsx里用 ConfigProvider 把该 Menu 的horizontalItemSelectedColor设为运行时的token.colorLink:colorLink与colorPrimary都是 #0958d9,视觉不变;colorLink是 #5c99dc,在 #141414 上 6.18:1(styles/themeTokens.ts已为暗色链接文字选定这个值);setAntdConfig深合并残留浅色值的问题;2.
landmark-no-duplicate-banner/landmark-unique(moderate,不在门禁内,顺手一起消掉)根因:ProLayout 在
fixedHeader || layout === 'mix'时,会在真正的顶栏前插入一个空的透明<header>占位(高 56px),读屏器的地标列表里因此多出一个空的「横幅」。Dashboard 上同样存在。旧的 mix 布局也会渲染这个占位,所以这个问题早于 #71。修复:在
tailwind.css里给该占位加visibility: hidden(选择器header.ant-layout-header:has(+ header[data-testid='pro-layout-header']))。这样它被移出无障碍树,但盒子高度照旧占位;它本来就是透明的空元素,视觉上没有变化。ProLayout 没有给这个占位传属性的入口,所以只能用样式处理。3. F06「已验收工单返工」超时(1 条,不是 #71 引入的回归,而是测试本身依赖当天时刻和时区)
根因:签名页的工单 Select 是 antd 虚拟列表,只渲染可视范围内约 10 项(antd 6 中每项 32px、列表高 256px)。候选按
createdAt倒序排列,WO-SCN-REWORK 的创建时间固定为「现在 − 26h」,而演示数据按本地自然日生成工单,所以排在它前面的近期工单数量会随当天时刻和时区变化。CI runner 用的是 UTC,06:47Z 时它落在第 10 项之后,没有被渲染进 DOM,.ant-select-item-option一直等不到,最终 90 秒超时。为什么判定不是 #71 的回归:
TZ=Asia/Shanghai下通过,TZ=UTC下必然失败;唯一变量是时区;git diff 0d6a577 9a0827a没有触及src/demo、签名页、src/services、请求层和 hooks。修复(只改测试,不改产品代码):
e2e/remediation-flows.spec.ts打开下拉后,用鼠标滚轮逐屏翻页,直到目标项被渲染出来再点击(expect.toPass,15s 上限)。这样测试不再依赖它排在前 10 项之内。验证(本地,
build:github:demo产物)TZ=UTC playwright test e2e/a11y.spec.ts e2e/remediation-flows.spec.ts --workers=2:30 passed。a11y 全部 27 条用例 critical=0、serious=0;landmark 两条规则在所有路由上清零。TZ=UTC和TZ=Asia/Shanghai下均通过(修复前 UTC 下 100% 失败)。vitest run src/components/GroupNav/index.test.tsx:5 passed(测试里的 antd mock 补了 ConfigProvider 透传)。剩余的非门禁项(都早于 #71,本 PR 不处理):日历页 FullCalendar 的
empty-table-header(minor) /heading-order(moderate);暗色「切换」路径上 body 下一个游离 div 的region(moderate),Dashboard 上同样存在。eslint --max-warnings=0、stylelint、prettier --check全部通过。