From f8a83f55e68485e6f325cdb897987264d71066c9 Mon Sep 17 00:00:00 2001 From: zhangxiang Date: Tue, 1 Sep 2026 16:12:45 +0800 Subject: [PATCH] fix(a11y,ui): resolve 29 P1 issues found by dogfood UI/UX/UE audit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dogfood 审计（31 路由 × 多视口，Playwright 9 维探针）发现的阻断级问题全部闭环： P1 29 → 0，对比度违规页 29 → 0。 对比度 - footer: text-gray-500 硬编码 → text-text-hint 令牌（#6B7280 在 #0A0E14 上仅 4:1，需 4.5:1），1 行改动全站 29 页生效 - brand-content / team-content 副文案 text-text-secondary/70 → /80 （4.35:1 → 5.74:1，视觉几乎无变化） - brand-content 里程碑标签在 bg-tertiary 上 text-text-muted → text-text-secondary （4.34:1 → 9.45:1） 装饰元素豁免 - 大号服务编号（about 01-03、team 01-05 等）加 aria-hidden="true"，WCAG 1.4.3 对装饰内容不适用，无需强行提亮 - 同时补修 product-detail / solution-detail 的客户名首字占位（同类 text-text-muted/10，因容器为渐变背景属探针盲区、从未报出） - 副文案与里程碑标签属真实语义内容，走提对比度而非 aria-hidden —— 隐藏它们 等于把公司简介与成立年份从屏幕阅读器中删除 移动端布局 - MobileTabBar 为 fixed bottom-0 高 64px，给 main / [role="main"] / footer 补 calc(64px + env(safe-area-inset-bottom)) 安全区，解决正文与页脚被遮挡 - 注意 marketing layout 使用 div[role="main"] 而非真
元素，选择器须 同时匹配两者 触控与令牌 - ERP 专题链接加 py-0.5（23px → 27px，达 WCAG 2.2 AA 2.5.8 的 24px） - solution-service-card: shadow-blue-500/20 → shadow-brand（纳入 --shadow-* 令牌） Refs: UI_UX_UE_AUDIT_2026-09-01.md --- src/app/(marketing)/about/about-content-v4.tsx | 3 ++- src/app/(marketing)/about/brand/brand-content.tsx | 7 ++++--- .../products/product-detail-content-v3.tsx | 5 +++-- .../solutions/solution-detail-content-v3.tsx | 3 ++- src/app/(marketing)/team/team-content-v3.tsx | 10 ++++++---- src/app/globals.css | 11 +++++++++++ src/components/detail/solution-service-card.tsx | 2 +- src/components/layout/footer.tsx | 2 +- 8 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/app/(marketing)/about/about-content-v4.tsx b/src/app/(marketing)/about/about-content-v4.tsx index 9463628..db201b7 100644 --- a/src/app/(marketing)/about/about-content-v4.tsx +++ b/src/app/(marketing)/about/about-content-v4.tsx @@ -209,7 +209,8 @@ function WhoWeAreSection({ data }: { data: AboutData }) { className="group relative border-b border-border-primary pb-6 md:pb-8 last:border-0 last:pb-0" >
-
+ {/* 纯装饰序号：与右侧 value.title 并列，无独立语义，标记 aria-hidden 豁免对比度要求 */} +
diff --git a/src/app/(marketing)/about/brand/brand-content.tsx b/src/app/(marketing)/about/brand/brand-content.tsx index ae8b7d9..cda6b26 100644 --- a/src/app/(marketing)/about/brand/brand-content.tsx +++ b/src/app/(marketing)/about/brand/brand-content.tsx @@ -121,12 +121,12 @@ export default function BrandContent() { ))} - {/* 副标题 */} + {/* 副标题 — alpha 0.7 仅 4.35:1 未达 WCAG AA 4.5:1，提到 0.8 → 5.74:1，视觉几乎无变化 */} 公司于 2026 年 1 月正式成立，核心团队专注企业数字化，从战略规划到系统落地，致力于陪伴每一家企业实现可衡量的业务改善。 我们相信，技术的力量在于让每一家企业都拥有数据驱动的决策能力。 @@ -268,7 +268,8 @@ export default function BrandContent() { {item.year} - + {/* text-muted 在 bg-tertiary(#F1F5F9) 上仅 4.34:1；换 text-secondary → 9.45:1 */} + {item.highlight}
diff --git a/src/app/(marketing)/products/product-detail-content-v3.tsx b/src/app/(marketing)/products/product-detail-content-v3.tsx index 995a947..e8c29ca 100644 --- a/src/app/(marketing)/products/product-detail-content-v3.tsx +++ b/src/app/(marketing)/products/product-detail-content-v3.tsx @@ -285,7 +285,8 @@ function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) { >
- + {/* 客户名首字作占位图形（无真实配图时），纯装饰 → aria-hidden 豁免对比度 */} +
@@ -414,7 +415,7 @@ function CTASection({ product }: CTASectionProps) { 正在使用旧版 ERP？ 了解睿新 ERP 升级专题 diff --git a/src/app/(marketing)/solutions/solution-detail-content-v3.tsx b/src/app/(marketing)/solutions/solution-detail-content-v3.tsx index 5feaf2c..5bbd818 100644 --- a/src/app/(marketing)/solutions/solution-detail-content-v3.tsx +++ b/src/app/(marketing)/solutions/solution-detail-content-v3.tsx @@ -375,7 +375,8 @@ function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) { >
- + {/* 客户名首字作占位图形（无真实配图时），纯装饰 → aria-hidden 豁免对比度 */} +
diff --git a/src/app/(marketing)/team/team-content-v3.tsx b/src/app/(marketing)/team/team-content-v3.tsx index 9c9625a..ad40540 100644 --- a/src/app/(marketing)/team/team-content-v3.tsx +++ b/src/app/(marketing)/team/team-content-v3.tsx @@ -79,7 +79,9 @@ function StrengthCard({ strength, index }: { strength: StrengthData; index: numb
- {strength.number} + {/* 纯装饰序号：与右侧 h3 标题并列，无独立语义。 + aria-hidden 让 WCAG 1.4.3 对比度要求不适用于装饰内容（1.13:1 无需强行提亮） */} +

{strength.title}

@@ -112,7 +114,7 @@ function CultureCard({ culture, index }: { culture: CultureData; index: number }
- {culture.number} +

{culture.title}

{culture.description}

@@ -197,13 +199,13 @@ export default function TeamContentV3({ data }: { data: Record )} - {/* 描述 */} + {/* 描述 — alpha 0.7 仅 4.35:1 未达 WCAG AA 4.5:1，提到 0.8 → 5.74:1，视觉几乎无变化 */} {teamData.heroDescription && ( {teamData.heroDescription} diff --git a/src/app/globals.css b/src/app/globals.css index d444eb6..3d38703 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1278,6 +1278,17 @@ p, li, span { /* WCAG 2.5.5 (AAA): 44×44px 触控目标仅作用于移动端导航/页眉/页脚交互元素。 原全局选择器会撑大正文行内链接，破坏排版节奏与组件自有的尺寸控制。 */ @media (max-width: 768px) { + /* MobileTabBar 是 fixed bottom-0 高度 64px，需给 main 与 footer 都留出安全区 + 防止正文/页脚被遮挡（"联系我们"等页脚内链接被截问题）。 + 使用 calc + env(safe-area-inset-bottom) 兼容刘海屏/小白条。 + 选择器同时匹配
与 div[role="main"]（marketing layout 当前用后者）。 */ + main, + [role="main"] { + padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); + } + footer { + padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); + } nav a, nav button, header a, diff --git a/src/components/detail/solution-service-card.tsx b/src/components/detail/solution-service-card.tsx index e7cdb96..dafb866 100644 --- a/src/components/detail/solution-service-card.tsx +++ b/src/components/detail/solution-service-card.tsx @@ -125,7 +125,7 @@ export function ServiceCard({ service }: ServiceCardProps) {
-
+
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx index 2b45f09..36698fb 100644 --- a/src/components/layout/footer.tsx +++ b/src/components/layout/footer.tsx @@ -146,7 +146,7 @@ export function Footer() { > {config.icp} - | + |