Repository navigation
feat(core/tree) Improve keyboard activation for node selection and expand/collapse for tree-item - #2665
Conversation
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: c5c65ab The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 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 |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
📝 Walkthrough
Merge Risk: 🔵 Low · up to
|
| Check name | Status | Explanation |
|---|---|---|
| Docstring Coverage |  |
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | |
Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | |
Check skipped because no linked issues were found for this pull request. |
| Description Check | |
Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | |
The title clearly summarizes the main changes: keyboard activation for tree-item node selection and expand/collapse behavior. It is specific and related to the changeset. |
✨ Finishing Touches
-
📝 Generate docstrings
-
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
-
- Create PR with unit tests
- Commit unit tests in branch
ix-4342-tree
-
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 @coderabbitai help to get the list of available commands.
![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
|
Improved keyboard accessibility for tree item interactions, including proper activation via Enter and Space keys, focus preservation, and enhanced navigation features.
|
💡 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