Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Accessibility: audit findings needing design or product decisions

未关闭
#156 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
25/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
typescript

调研方向

先阅读列出的 TypeScript/TSX 文件和所引用的 app-shell 规范,然后针对每个视觉、内容或产品问题获取 maintainer 的决定。只处理已有一致方向的发现;完成意味着选定的 WCAG 问题已得到解决,并且所有注明的规范变更都已更新。

由索引模型根据 Issue 内容生成。

描述

A full accessibility pass over apps/web (every source file read; WCAG 2.1 AA + ARIA APG) produced 62 findings. The ARIA-correctness layer is already addressed in PR #154 and PR #155, and a follow-up PR covers the mechanical remainder. This issue holds the findings that are real WCAG failures but carry a visual, content, or product dimension that shouldn't be decided unilaterally by a volunteer — each needs a maintainer call (and, per the specops workflow, a spec touch where noted).


1. Green Volunteer CTA fails contrast — Serious (WCAG 1.4.3)

White on green-600 (#16a34a) ≈ 3.05:1; normal-size text needs 4.5:1. It's the site's primary CTA in three places. green-700 is borderline (≈ 4.5:1); green-800 passes comfortably. A one-class change — but it's the brand green, and there's no success button variant or green token, so this magic color is also a design-system gap.
AppHeader.tsx · Home.tsx:92 · Volunteer.tsx:37

2. Links distinguished by color alone, and the colors are nearly identical — Serious (WCAG 1.4.1)

--primary and --foreground are both near-black neutrals (≈ 1.4:1 against each other vs the 3:1 required when color is the only differentiator). Some screens add underline, many don't. Either underline inline links by default or give --primary a real hue — a theme decision.
index.css:53,58 · ~20 screens

3. Every route shares one document title — Serious (WCAG 2.4.2)

Nothing sets document.title per route; every page is "Code for Philly" to screen readers and tab-switchers. Needs a small per-route title convention (and a spec touch, since screens are spec-governed).
index.html:8 · App.tsx

4. Hero slideshow auto-advances with no pause control — Serious (WCAG 2.2.2)

aria-hidden hides it from AT, but the criterion is about motion in the viewport: auto-advancing (8s crossfades) needs a visible pause/stop affordance.
HeroSlideshow.tsx

5. Whole pages have no headings because CardTitle is a <div> — Serious (WCAG 1.3.1 / 2.4.6)

All account-claim and password-reset pages are built from cards only, so they render zero headings and no <h1>. Fix is per-page heading placement (or a heading-level prop pattern), not necessarily changing the shadcn primitive.
ui/card.tsx:36 · pages/AccountClaim*.tsx · PasswordReset*.tsx

6. Blog/buzz images are unconditionally alt=\"\" — Serious (WCAG 1.1.1)

Authors have no way to supply alt text for featured images. Needs a content-model decision: an alt field on posts/updates, or an explicit editorial policy that featured images are decorative.
BlogDetail.tsx:36 · BlogIndex.tsx:124 · ActivityCard.tsx:80

7. Client-side navigation never moves focus or announces the new page — Moderate (WCAG 2.4.3)

<main tabIndex={-1}> exists but nothing focuses it on route change. A small router-level focus/announce hook — worth pairing with the document-title work (item 3).
AppShell.tsx:24 · App.tsx

8. Filter/search result updates are silent — Moderate (WCAG 4.1.3)

Index screens re-render their lists after the debounce with no status announcement. A shared "N results" role=\"status\" line would cover them; copy and placement are design calls.
ProjectsIndex · PeopleIndex · HelpWantedIndex · TagsNamespace

9. Reduced-motion honored only by the hero's Ken Burns pan — Moderate

Spinners, sheet/dialog transitions, and scrollTo({behavior:'smooth'}) run regardless of prefers-reduced-motion. The usePrefersReducedMotion hook exists and is under-applied; a global @media (prefers-reduced-motion: reduce) block is the usual fix.
index.css · 5 screens' scrollTo · HeroSlideshow.tsx:70

10. Network-error banner says "Retry" but only dismisses — Moderate (spec↔code contradiction)

The spec (specs/behaviors/app-shell.md:162) prescribes [Retry], and the button's handler only calls clearError(). Surfaced during the ARIA pass and recorded in plans/aria-correctness.md follow-ups. Either the button should refetch or the spec's label should change — both need a spec edit first, so it's parked here rather than patched.
NetworkErrorBanner.tsx · specs/behaviors/app-shell.md:162


Happy to implement any of these once there's a direction — most are small once the decision is made.

🤖 Generated with Claude Code

主要语言
TypeScript
星标
1
派生
1
平均合并
11 分钟
30 天内合并 PR
22

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

CodeForPhilly/codeforphilly-ng 的其他 Issue

查看 CodeForPhilly/codeforphilly-ng 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。