codeant-ai-for-open-source[bot] commented on code in PR #42009:
URL: https://github.com/apache/superset/pull/42009#discussion_r3573561912
##########
superset-frontend/src/SqlLab/components/TableExploreTree/TreeNodeRenderer.tsx:
##########
@@ -215,6 +217,13 @@ const TreeNodeRenderer: React.FC<TreeNodeRendererProps> =
({
node.toggle();
}
}}
+ onKeyDown={handleKeyboardActivation(() => {
+ if (node.isLeaf) {
+ node.select();
+ } else {
+ node.toggle();
+ }
+ })}
Review Comment:
**Suggestion:** The new keyboard activation handler is attached to a plain
`div` that is not keyboard-focusable, so users cannot actually reach this
`onKeyDown` path via Tab and the node still cannot be activated with
Enter/Space. Add focusability/semantics (`tabIndex` + appropriate role) on this
same clickable container, or move the handler to the actual focusable tree item
element provided by the tree library. [incomplete implementation]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ SQL Lab table tree nodes lack Enter/Space activation.
- ⚠️ Keyboard-only users cannot expand/collapse schemas and tables.
- ⚠️ A11y keyboard operability goal not fully achieved here.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open SQL Lab and render the left sidebar tree, which mounts
`TableExploreTree` from
`superset-frontend/src/SqlLab/components/TableExploreTree/index.tsx`
(component definition
starts around lines 166–174 and returns the <Tree> at lines 238–251).
2. The <Tree> from `react-arborist` is configured to use `renderNode` (lines
133–172 in
`index.tsx`), which in turn renders `TreeNodeRenderer` from
`TreeNodeRenderer.tsx` as the
visual row for each schema/table/column node.
3. For non-column nodes, `TreeNodeRenderer` returns a plain <div
className="tree-node">
container at lines 207–227 in `TreeNodeRenderer.tsx`, with `onClick` wired to
`node.select()`/`node.toggle()` and the new
`onKeyDown={handleKeyboardActivation(...)}` at
lines 220–226, but this container does not have any `tabIndex` or ARIA role
applied
(confirmed by searching the file for `tabIndex` and `role="button"` and
finding no
matches).
4. Because the `tree-node` <div> itself is not focusable, users navigating
the tree via
keyboard cannot focus this element via Tab, so pressing Enter or Space does
not fire the
`onKeyDown` handler at lines 220–226; the new keyboard activation path never
executes,
leaving schema/table nodes operable by mouse click only despite the added
handler.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=34e198bbf07b437aac5bcb2a6f5c450a&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=34e198bbf07b437aac5bcb2a6f5c450a&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/SqlLab/components/TableExploreTree/TreeNodeRenderer.tsx
**Line:** 220:226
**Comment:**
*Incomplete Implementation: The new keyboard activation handler is
attached to a plain `div` that is not keyboard-focusable, so users cannot
actually reach this `onKeyDown` path via Tab and the node still cannot be
activated with Enter/Space. Add focusability/semantics (`tabIndex` +
appropriate role) on this same clickable container, or move the handler to the
actual focusable tree item element provided by the tree library.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42009&comment_hash=92cc12c320534870af071db079bab822afa87b2309294c7ac4802c10e5717126&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42009&comment_hash=92cc12c320534870af071db079bab822afa87b2309294c7ac4802c10e5717126&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
