Skip to content

feat(a11y): improve core interaction accessibility and add audit guide#20

Merged
wyf027 merged 21 commits into
mainfrom
codex/improve-accessibility-for-key-components
Jul 1, 2026
Merged

feat(a11y): improve core interaction accessibility and add audit guide#20
wyf027 merged 21 commits into
mainfrom
codex/improve-accessibility-for-key-components

Conversation

@wyf027

@wyf027 wyf027 commented May 16, 2026

Copy link
Copy Markdown
Owner

Motivation

  • 提升关键交互组件(Modal / Dropdown / Menu / Select / 表单接入层)的键盘可用性、焦点管理与语义/ARIA 一致性,并把审计结果与使用注意写入文档以便可追踪审计。

Description

  • Modal: 在打开时记录并恢复先前焦点,打开时将焦点移动到关闭按钮,并通过 aria-labelledby 将标题与 role="dialog" 关联。
  • Dropdown: 为触发器添加 aria-expanded/aria-haspopup/aria-controls,支持 Enter/Space/ArrowDown 打开、ArrowUp/ArrowDown 导航与 Escape 关闭并回焦,同时添加 click-outside 行为和活动项 tabIndex 管理。
  • Menu: 在容器层监听方向键(垂直上下、水平左右)实现箭头遍历,并使用 roving tabIndex(活动项 0 其余 -1)和内部活动 key 状态。
  • FormItem: 为每个字段生成 id 并使 label 使用 htmlFor 绑定控件,出错时向控件注入 aria-invalidaria-describedby 并为错误文案输出 id。
  • Docs: 新增 docs/guide/accessibility.md 包含 a11y 检查清单、组件级审计结果、每个修复点的“问题-改法-验证方式”,并在侧边栏添加“可访问性”入口。
  • 兼容性说明: 变更为向后兼容的行为增强(未修改公开 API),并在文档中列出可能影响自定义 onKeyDown 冒泡逻辑或依赖“打开不夺焦”的场景。

Testing

  • 运行 npm run typecheck:ui; 在最初修改后出现 TypeScript 类型错误并已修复,最终 tsc --noEmit 通过。
  • 运行 npm run lint:ui(内部会触发 typecheck 步骤)且 ESLint 检查通过。

Codex Task

cursoragent and others added 19 commits April 11, 2026 16:13
Co-authored-by: 吴杨帆 <leno23@users.noreply.github.com>
Co-authored-by: 吴杨帆 <leno23@users.noreply.github.com>
Co-authored-by: 吴杨帆 <leno23@users.noreply.github.com>
…ace, Divider, SplitPane)

Co-authored-by: 吴杨帆 <leno23@users.noreply.github.com>
Add VitePress markdown docs with LivePlayground examples and API tables for:
Input, InputNumber, AutoComplete, Select, Checkbox, Radio, Switch,
DatePicker, TimePicker, Slider, Rate, Upload, Form, Calendar,
Transfer, Cascader, TreeSelect, ColorPicker, Segmented, Mentions

Co-authored-by: 吴杨帆 <leno23@users.noreply.github.com>
…avigation)

Co-authored-by: 吴杨帆 <leno23@users.noreply.github.com>
…two-level menu

New components (matching Ant Design API patterns):
- Layout: Flex
- Form: AutoComplete, InputNumber, TimePicker
- Feedback: Alert, Skeleton, Popconfirm, Spin
- Data: List, Carousel, Image
- Navigation: FloatButton

Sidebar changes:
- Restructured from flat category links to two-level collapsible menu
- Each component now has its own dedicated page with demo and API docs
- Removed old single-page-per-category docs
- Updated overview page with complete component listing

Co-authored-by: 吴杨帆 <leno23@users.noreply.github.com>
Add AGENTS.md with Cursor Cloud development instructions
…tion-display

docs: improve component overview with category cards and styles
…-to-table-component

feat(table): add pagination configuration and simple built-in pager
feat(form): support event and value-first onChange values

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: eaa97af5e7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/ui/src/components/navigation/Dropdown/Dropdown.tsx
Comment thread packages/ui/src/components/form/Form.tsx Outdated
@ecc-tools

ecc-tools Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Analyzing 200 commits...

@ecc-tools

ecc-tools Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Analysis Complete

Generated ECC bundle from 20 commits | Confidence: 85%

View Pull Request #21

Repository Profile
Attribute Value
Language TypeScript
Framework Not detected
Commit Convention mixed
Test Directory separate
Changed Files (106)
Metric Value
Files changed 106
Additions 3546
Deletions 361

Top hotspots

Path Status +/-
docs/.vitepress/config.ts modified +112 / -8
docs/components/form.md modified +38 / -82
packages/ui/src/components/form/TimePicker.tsx added +109 / -0
docs/guide/docs-optimization-todo.md added +103 / -0
packages/ui/src/components/form/AutoComplete.tsx added +103 / -0

Top directories

Directory Files Total changes
docs/components 79 2342
packages/ui/src/components/form 5 369
packages/ui/src/components/feedback 6 298
packages/ui/src/components/data 5 282
docs/guide 2 181
Analysis Depth Readiness (commit-history, 14%)

ECC Tools uses this to decide whether recommendations should stay at commit-history/setup guidance or expand into CI, security, harness, reference-set, AI-routing, and team backlog work.

Area Status Evidence / Next Step
Commit history Ready 20 commits sampled
CI/CD signals Missing Add workflow files or CI troubleshooting evidence so ECC Tools can reason about pipeline setup.
Security evidence Missing Add AgentShield, audit, SARIF, SBOM, or security review evidence so recommendations can cover security posture.
Harness configuration Missing Add Claude, Codex, OpenCode, Zed, dmux, MCP, plugin, or cross-harness config evidence for harness-agnostic recommendations.
Reference/eval evidence Missing Add fixtures, golden traces, reference sets, or evaluator benchmarks so deeper recommendations have regression evidence.
AI routing and cost controls Missing Add model-routing, budget, usage, or cost-control files before relying on AI-heavy automation recommendations.
Team handoff and project tracking Missing Add roadmap, runbook, project, Linear, or follow-up tracking docs so generated work can land in a team queue.
Reference Set Readiness (0/7, 0%)
Area Status Evidence / Next Step
Deep analyzer corpus Missing Add analyzer fixture, golden, benchmark, or reference-set files that can catch analyzer regressions.
RAG/evaluator comparison Missing Add retrieval or evaluator reference-set comparison fixtures with expected ranking behavior.
PR salvage/review corpus Missing Add stale-PR, review-thread, reopen-flow, or salvage reference cases for queue cleanup automation.
Discussion triage corpus Missing Add public discussion triage fixtures, golden cases, or reference sets for informational, answered, and no-response classifications.
Harness compatibility Missing Add cross-harness, adapter-compliance, or harness-audit evidence for Claude, Codex, OpenCode, Zed, dmux, and agent surfaces.
Security evidence Missing Attach security evidence such as SBOMs, SARIF, audit reports, or AgentShield evidence packs.
CI failure-mode evidence Missing Add captured CI failure logs, dry-run fixtures, or troubleshooting docs for common workflow failure modes.
Likely Future Issues (2)
Severity Signal Why it may show up
MEDIUM Runtime config changes may ship without example or template updates 1 runtime config paths changed; 0 example or template config files changed
MEDIUM User-facing UI changes may ship without browser coverage 102 user-facing UI paths changed; 0 browser or e2e coverage files changed
  • Runtime config changes may ship without example or template updates: The PR changes runtime config or deployment settings but does not update any obvious example env file or config template.
  • User-facing UI changes may ship without browser coverage: The PR changes components, pages, or other user-facing UI files without touching any obvious browser or end-to-end coverage.
Suggested Follow-up Work (2)
Type Suggested title Targets
PR chore: sync config templates for docs/.vitepress/config.ts docs/.vitepress/config.ts
PR test: add browser coverage for docs/.vitepress/theme/custom.css + docs/components/affix.md docs/.vitepress/theme/custom.css, docs/components/affix.md
  • chore: sync config templates for docs/.vitepress/config.ts: Backfill example env files or config templates before a fresh setup drifts from the shipped runtime surface.
  • test: add browser coverage for docs/.vitepress/theme/custom.css + docs/components/affix.md: Backfill browser coverage before another user-facing UI change lands on the touched surface.

Copy-ready bodies

chore: sync config templates for docs/.vitepress/config.ts

## Summary
- Update the example env files, sample configs, or deployment templates that should mirror the changed runtime configuration surface.

## Why
- Backfill example env files or config templates before a fresh setup drifts from the shipped runtime surface.

## Touched paths
- `docs/.vitepress/config.ts`

## Validation
- Update the repo example env file or config template that should reflect the new runtime settings.
- Run the setup, boot, or deployment validation flow that depends on the changed config surface.

test: add browser coverage for docs/.vitepress/theme/custom.css + docs/components/affix.md

## Summary
- Add browser or end-to-end coverage for the recently changed user-facing surface.

## Why
- Backfill browser coverage before another user-facing UI change lands on the touched surface.

## Touched paths
- `docs/.vitepress/theme/custom.css`
- `docs/components/affix.md`

## Validation
- Add or extend browser / e2e coverage for the changed component, page, or flow.
- Exercise the visible user journey that depends on the touched UI surface.
Review Activity (1 reviews, 2 inline comments, 0 unresolved threads)
Signal Count
Approvals 0
Change requests 0
Comment-only reviews 1
Dismissed reviews 0
Pending reviews 0
Review threads 2
Unresolved threads 0
Outdated threads 1
Latest review Commented
Latest submitted at 2026-05-16T01:17:30Z

Latest reviewer states

Reviewer State Submitted
@chatgpt-codex-connector[bot] Commented 2026-05-16T01:17:30Z
Review Follow-up Signals (2)
Severity Signal Evidence
MEDIUM Re-check outdated review discussions 1 outdated review thread(s) may refer to older code
MEDIUM Get an explicit approval No approving review is recorded for this PR

Recommended next actions

  • Confirm the latest pushed code resolves stale review feedback before relying on old comments.
  • Ask for an approval after requested changes and unresolved discussions are addressed.
Detected Workflows (5)
Workflow Description
feature-development Standard feature implementation workflow
add-or-update-component-documentation Adds or updates documentation pages for UI components, typically in VitePress markdown format, often including API tables and playground examples.
add-new-ui-component Implements a new UI component in the codebase, typically matching Ant Design API patterns, and exposes it via index files.
improve-accessibility-or-a11y Improves accessibility (a11y) for one or more core components, often updating ARIA attributes, keyboard support, and related docs.
feature-or-bugfix-in-component Adds a feature or fixes a bug in an existing component file, often for a specific component (e.g., Form, Table), sometimes followed by a merge.
Generated Instincts (25)
Domain Count
git 3
code-style 9
architecture 1
testing 3
workflow 9

After merging, import with:

/instinct-import .claude/homunculus/instincts/inherited/react-ui-library-instincts.yaml

Files

  • .claude/ecc-tools.json
  • .claude/skills/react-ui-library/SKILL.md
  • .agents/skills/react-ui-library/SKILL.md
  • .agents/skills/react-ui-library/agents/openai.yaml
  • .claude/identity.json
  • .codex/config.toml
  • .codex/AGENTS.md
  • .codex/agents/explorer.toml
  • .codex/agents/reviewer.toml
  • .codex/agents/docs-researcher.toml
  • .claude/homunculus/instincts/inherited/react-ui-library-instincts.yaml
  • .claude/commands/feature-development.md
  • .claude/commands/add-or-update-component-documentation.md
  • .claude/commands/add-new-ui-component.md

ECC Tools | Everything Claude Code

@wyf027 wyf027 merged commit 273d553 into main Jul 1, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants