Skip to content

fix(a11y): restore dark-theme contrast on group tabs and stabilize F06 e2e - #74

Merged
Jerry-CodeHub merged 1 commit into
masterfrom
fix/top-nav-e2e-regressions
Oct 19, 2026
Merged

Jerry-CodeHub merged 1 commit into
masterfrom
fix/top-nav-e2e-regressions

Conversation

@parker-super

Copy link
Copy Markdown
Collaborator

背景

#71(顶部导航改版,合并提交 9a0827a)在 e2e 失败的状态下合入了 master。CI 运行 39210930382 中有 13 条用例失败,之后每个 PR 的 e2e 都会卡在同样的位置。本 PR 修复这 13 条失败。

1. 暗色主题 axe color-contrast(12 条,属于 #71 引入的回归)

根因:在本地对 /system/users [realDark] 跑 axe 并读取逐节点报告,命中的元素是

.ant-menu-item-selected > .ant-menu-title-content   (例:「用户管理」)
foreground #1668dc / background #141414 → 3.55:1(要求 4.5:1)

报错的是 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 已为暗色链接文字选定这个值);
  • 颜色取自运行时 token、不写死色值,所以冷启动和顶栏热切换两条路径都跟随当前主题,不会碰到 setAntdConfig 深合并残留浅色值的问题;
  • antd 6 中这个 token 同时控制底部指示条的颜色,指示条跟着一起改成 colorLink。

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 两条规则在所有路由上清零。
  • F06 修复后,在 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 全部通过。

…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
@coderabbitai

coderabbitai Bot commented Oct 19, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You'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.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 987e8b22-4867-4a7f-8c24-b5307358305f
📥 Commits

Reviewing files that changed from the base of the PR and between 9a0827a and d706010.

📒 Files selected for processing: 4
  • e2e/remediation-flows.spec.ts
  • src/components/GroupNav/index.test.tsx
  • src/components/GroupNav/index.tsx
  • tailwind.css
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying umi-react-admin with  Cloudflare Pages  Cloudflare Pages

Latest commit: d706010
Status:🚫  Build failed.

View logs

@Jerry-CodeHub Jerry-CodeHub left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

三处根因的分析都成立:选中页签在暗色下用 colorPrimary(#1668dc 压在 #141414 上只有 3.55:1),改用 colorLink 后是 6.18:1;ProLayout 的 fixedHeader 占位 <header> 造成了重复的横幅地标;F06 是虚拟列表加上演示数据按本地自然日生成,CI 跑在 UTC 时目标工单常排到第 10 项之后。改动范围也收得很小。

  1. 【阻塞 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 调用是主要耗时。
  2. 【低】 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 也加进断言,或者至少在注释里注明升级时要复核。
  3. 【nit】 F06 用滚轮逐屏翻虚拟列表可以过,但根因是演示数据随本地自然日和时区变化,排序不固定。更稳的做法是在 e2e 里固定时区(Playwright 的 timezoneId)或固定时钟,免得以后同类用例又随运行时刻抖动。
  4. 【nit】 GroupNav 每次渲染都新建一个 theme 对象传给嵌套的 ConfigProvider,可以用 useMemo(只在 token.colorLink 变化时重建),避免 cssinjs 重复计算。

@Jerry-CodeHub Jerry-CodeHub left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

批准。capabilityModel 用例超时后续单独修。

@Jerry-CodeHub
Jerry-CodeHub merged commit d8cb902 into master Oct 19, 2026
5 of 8 checks passed
@parker-super
parker-super deleted the fix/top-nav-e2e-regressions branch October 19, 2026 07:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants