feat(a11y): improve core interaction accessibility and add audit guide#20
feat(a11y): improve core interaction accessibility and add audit guide#20leno23 wants to merge 19 commits into
Conversation
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[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 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".
| const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => { | ||
| if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') { | ||
| event.preventDefault() | ||
| setOpen(true) | ||
| } |
There was a problem hiding this comment.
When the trigger is opened via Enter/Space/ArrowDown, the handler only calls setOpen(true) and leaves DOM focus on the trigger button. Because arrow-key navigation is wired on the <ul> (onKeyDown={handleMenuKeyDown}), subsequent arrow presses do not reach the menu unless the user tabs manually first, so the advertised keyboard flow (open then navigate with arrows) does not work for keyboard-only users.
Useful? React with 👍 / 👎.
| const fieldId = `field-${name}` | ||
| const errorId = `${fieldId}-error` |
There was a problem hiding this comment.
Deriving fieldId purely from name makes IDs collide whenever multiple forms or repeated sections reuse the same field name (for example two email items on one page). That creates duplicate id/htmlFor/aria-describedby targets, which can cause labels and error text to resolve to the wrong control and breaks valid accessibility wiring introduced by this change.
Useful? React with 👍 / 👎.
2 participants
Motivation
Description
aria-labelledby将标题与role="dialog"关联。aria-expanded/aria-haspopup/aria-controls，支持Enter/Space/ArrowDown打开、ArrowUp/ArrowDown导航与Escape关闭并回焦，同时添加 click-outside 行为和活动项tabIndex管理。tabIndex（活动项0其余-1）和内部活动 key 状态。label使用htmlFor绑定控件，出错时向控件注入aria-invalid与aria-describedby并为错误文案输出 id。docs/guide/accessibility.md包含 a11y 检查清单、组件级审计结果、每个修复点的“问题-改法-验证方式”，并在侧边栏添加“可访问性”入口。onKeyDown冒泡逻辑或依赖“打开不夺焦”的场景。Testing
npm run typecheck:ui; 在最初修改后出现 TypeScript 类型错误并已修复，最终tsc --noEmit通过。npm run lint:ui（内部会触发 typecheck 步骤）且 ESLint 检查通过。Codex Task