fix(desktop): resolve nested button hydration error in WorkspaceListItem by Kitenite · Pull Request #669 · superset-sh/superset

Kitenite · 2026-01-08T20:45:52Z

Summary

Fix HTML validation error where <button> elements were nested inside another <button> in WorkspaceListItem
Changed outer container from <button> to <div role="button"> with proper accessibility attributes
Added keyboard handler (Enter/Space) to maintain accessibility

Test plan

Verify hydration error no longer appears in console
Test workspace list item click behavior works correctly
Test keyboard navigation (Tab, Enter, Space) on workspace items
Verify drag-and-drop reordering still works

🤖 Generated with Claude Code

Summary by CodeRabbit

Accessibility
- Workspace sidebar items now support keyboard activation (Enter/Space), improving navigation for keyboard-only users.
Bug Fixes
- Interaction behavior preserved for mouse, double-click, and drag/drop operations to ensure consistent usability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-08T20:46:05Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Replaces outer <button> elements with div role="button" tabIndex={0} in the WorkspaceListItem component, preserves drag-and-drop refs and click/double-click handlers, and adds onKeyDown to activate the item on Enter or Space.

Changes

Cohort / File(s)	Summary
WorkspaceListItem accessibility `apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx`	Replaced native `<button>` wrappers with `<div role="button" tabIndex={0}>`, added `onKeyDown` to invoke click on Enter/Space, retained drag/drop refs, `onClick`, `onMouseEnter`, and `onDoubleClick`; updated closing tags and added biome-ignore lint comment.

Sequence Diagram(s)

(omitted — change is an accessibility/markup update without multi-component control-flow requiring a sequence diagram)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

fix(desktop): resolve nested button hydration error in WorkspaceListItem #669: Same code-level change in WorkspaceListItem.tsx replacing an outer <button> with a <div role="button" tabIndex={0}>, preserving drag/drop refs and adding onKeyDown.

Poem

🐰
I swapped a button for a gentle div,
Gave keys their voice — Enter and Space now live.
Drag stays steady, clicks still land,
Small change, big hop — accessibility at hand.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing a nested button hydration error in WorkspaceListItem. It is concise and directly related to the changeset.
Description check	✅ Passed	The PR description covers the key aspects of the change including summary, test plan, and implementation details. However, it deviates from the provided template by using a custom summary format instead of the required template sections.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4956baf and a62a690.

📒 Files selected for processing (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx (1)
437-451: Wrap the close button's onClick handler with e.stopPropagation() to prevent event bubbling to the parent div.

Clicking the close button will currently bubble up to the parent div's onClick={handleClick} (line ~302), causing the workspace to activate when the user only intends to delete it. The Input component in the same file demonstrates this pattern correctly at lines 382-383. The BranchSwitcher component already handles this correctly, so no changes are needed there.
Suggested fix
 <Button
   type="button"
   variant="ghost"
   size="icon"
-  onClick={handleDeleteClick}
+  onClick={(e) => {
+    e.stopPropagation();
+    handleDeleteClick();
+  }}
   className={cn(
     "size-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity rounded-sm",
     "hover:bg-muted-foreground/10",
     isActive && "opacity-60",
   )}
   aria-label="Close or delete workspace"
 >

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f02bff8 and 4956baf.

📒 Files selected for processing (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx

🧰 Additional context used

📓 Path-based instructions (6)

apps/desktop/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

apps/desktop/**/*.{ts,tsx}: For Electron interprocess communication, ALWAYS use tRPC as defined in src/lib/trpc
Use alias as defined in tsconfig.json when possible
Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary.
For tRPC subscriptions with trpc-electron, ALWAYS use the observable pattern from @trpc/server/observable instead of async generators, as the library explicitly checks isObservable(result) and throws an error otherwise

Files:

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx

**/*.{ts,tsx}