feat(core/tree)- Improve keyboard activation for node selection and expand/collapse for tree-item - #2665
feat(core/tree)- Improve keyboard activation for node selection and expand/collapse for tree-item#26651307-Dev wants to merge 9 commits into
Conversation
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: 89d18c9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughTree items now support keyboard activation, accessible button semantics, and focus-visible styling. Tree refreshes preserve focus on the corresponding chevron or node container after the virtualized list is refreshed. ChangesTree accessibility
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Document
participant Tree
participant Hyperlist
participant TreeItem
Tree->>Document: Inspect activeElement and shadow DOM
Tree->>Hyperlist: Refresh virtualized list
Hyperlist-->>Tree: Return refreshed tree DOM
Tree->>TreeItem: Focus matching icon or node container
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances the tree-item component's accessibility and keyboard navigation by making the chevron icon and tree node container focusable and interactive via Space and Enter keys. The review feedback recommends adding an axe-based accessibility test to comply with the Repository Style Guide, adding outline: none to the chevron icon to prevent double focus outlines, stopping event propagation in the container's keydown handler, and adding role="button" to the tree node container to properly identify it as interactive to assistive technologies.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/tree-item/tree-item.scss`:
- Line 37: Update the focus-visible mixin invocations in the tree-item styles,
including both occurrences near the referenced lines, to use argumentless mixin
syntax without parentheses. Preserve the existing focus-visible styling while
removing only the unnecessary parentheses so Stylelint passes.
In `@packages/core/src/components/tree-item/tree-item.tsx`:
- Around line 89-96: Update the chevron control in the tree-item component to
expose its current expansion state with aria-expanded based on
this.context?.isExpanded, and expose disabled state with aria-disabled based on
isDisabled. Preserve the existing role, label, and tabIndex behavior while
applying these attributes to both referenced control locations.
- Around line 105-131: Add coverage for the ix-tree-item keyboard interaction:
create axe-based component tests covering Enter and Space activation, disabled
behavior, focus-visible states, and focus preservation across refreshes. Update
the applicable framework accessibility tests and Storybook tree stories, and add
a changeset documenting the accessibility/behavior change unless it is
explicitly justified as internal-only.
In `@packages/core/src/components/tree/tree.tsx`:
- Around line 364-369: Update the focus handling around focusInfo.target in the
tree component so that when the requested ix-icon chevron is absent, focus falls
back to the tree-node-container element. Preserve the existing chevron focus
behavior when the icon exists, and keep the current container fallback for
non-chevron targets.
- Around line 361-363: Update the selector construction in the tree refresh
logic around treeItem to escape focusInfo.nodeId with the appropriate CSS
selector escaping mechanism before interpolation, ensuring IDs containing quotes
or other CSS-special characters produce a valid querySelector selector.
- Around line 321-332: Update the tree focus-preservation logic around
getTreeNodeId to begin at this.hostElement.shadowRoot.activeElement, then
recursively descend through nested shadowRoot.activeElement values until
locating the element carrying data-tree-node-id, including inside embedded
ix-test-item components. Preserve the existing shadow icon handling and add a
regression test covering refresh/focus restoration across nested shadow roots.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: be709f47-005e-495c-9acd-bdb4bf7b8fbf
📒 Files selected for processing (3)
packages/core/src/components/tree-item/tree-item.scsspackages/core/src/components/tree-item/tree-item.tsxpackages/core/src/components/tree/tree.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/tree/test/tree.ct.ts`:
- Line 96: Remove the focused-test modifier from the regressionTest declarations
at the “collapsed” case and the additionally identified tests, restoring each to
regressionTest so the full tree test coverage runs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 0e7312ae-a3d3-4eb3-8250-d04ef7e3f649
📒 Files selected for processing (5)
.changeset/keyboard-tree-item-a11y.mdpackages/core/src/components/tree-item/tree-item.scsspackages/core/src/components/tree-item/tree-item.tsxpackages/core/src/components/tree/test/tree.ct.tspackages/core/src/components/tree/tree.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/tree/test/tree.ct.ts`:
- Line 912: Add a regression test alongside the existing tree focus-restoration
tests in regressionTest to focus a node’s chevron, call refreshTree(), and
assert that the same chevron remains focused, covering the separate target ===
'chevron' restoration path in the tree component.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: a511ab3a-c072-4b20-9e61-469930ea8e89
📒 Files selected for processing (1)
packages/core/src/components/tree/test/tree.ct.ts
| } | ||
| ); | ||
|
|
||
| regressionTest( |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Cover chevron focus restoration after refresh.
This regression test verifies focus preservation for .tree-node-container, but packages/core/src/components/tree/tree.tsx has a separate target === 'chevron' restoration path. Add a corresponding test that focuses the chevron, calls refreshTree(), and asserts the chevron remains focused.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/core/src/components/tree/test/tree.ct.ts` at line 912, Add a
regression test alongside the existing tree focus-restoration tests in
regressionTest to focus a node’s chevron, call refreshTree(), and assert that
the same chevron remains focused, covering the separate target === 'chevron'
restoration path in the tree component.
|
1 participant
💡 What is the current behavior?
Pressing Space or Enter while a tree item row or expand/collapse chevron has keyboard focus has no effect.
GitHub Issue Number: #
🆕 What is the new behavior?
tree-node-container now has selection logic
tree's chevron now expands/collapses on enter keydown
focus has been applied to these two.
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)Summary by CodeRabbit