feat(Tree): add Home and End keyboard support for accessibility #4449
Conversation
- Add Home and End key handlers to onMenuKeyDown function - Implement focusFirstItem and focusLastItem utilities in Tree - Add keyboard event handlers in useFocusTree hook - Add comprehensive test cases for Home/End keys (normal and virtualized modes) - Update documentation for Tree, CheckTree, TreePicker, and CheckPicker components - Complies with WCAG 2.1 and WAI-ARIA TreeView design pattern Fixes #4344
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4449 +/- ##
==========================================
+ Coverage 94.47% 94.49% +0.02%
==========================================
Files 559 560 +1
Lines 13740 13872 +132
Branches 4081 4125 +44
==========================================
+ Hits 12981 13109 +128
- Misses 687 691 +4
Partials 72 72
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds Home and End keyboard support to Tree-based components (Tree, CheckTree, TreePicker, CheckTreePicker) to improve accessibility and comply with WCAG 2.1 and WAI-ARIA TreeView design patterns.
Key Changes:
- Extended
onMenuKeyDownutility to handle Home/End key events with properpreventDefault()calls - Implemented
focusFirstItemandfocusLastItemutilities in the Tree component that navigate to the first/last visible tree nodes - Added comprehensive test coverage for both normal and virtualized modes in CheckTree
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/internals/Picker/utils.ts | Added Home/End key handlers to onMenuKeyDown function with event prevention |
| src/Tree/utils/focusableTree.ts | Implemented focusFirstItem and focusLastItem utilities following existing patterns |
| src/Tree/utils/index.ts | Exported new focus utilities for external use |
| src/Tree/hooks/useFocusTree.ts | Integrated Home/End handlers into tree keyboard navigation |
| src/CheckTree/test/CheckTree.spec.tsx | Added test coverage for Home/End keys in both normal and virtualized modes |
| docs/pages/components/tree/en-US/index.md | Documented Home/End keyboard shortcuts |
| docs/pages/components/tree/zh-CN/index.md | Documented Home/End keyboard shortcuts (Chinese) |
| docs/pages/components/tree-picker/en-US/index.md | Documented Home/End keyboard shortcuts |
| docs/pages/components/tree-picker/zh-CN/index.md | Documented Home/End keyboard shortcuts (Chinese) |
| docs/pages/components/check-tree/en-US/index.md | Documented Home/End keyboard shortcuts |
| docs/pages/components/check-tree/zh-CN/index.md | Documented Home/End keyboard shortcuts (Chinese) |
| docs/pages/components/check-picker/en-US/index.md | Incorrectly documents Home/End support (implementation missing) |
| docs/pages/components/check-picker/zh-CN/index.md | Incorrectly documents Home/End support (implementation missing) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
|
Deployment failed with the following error: |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 14 out of 14 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
1 participant
Fixes #4344