fix(DataMapper): activate summary buttons with Enter and Space

[ConsultingFuture4200]

The ExpansionPanel summary is a role="button" div whose keydown handler called preventDefault() on Enter/Space. Because React's onKeyDown bubbles, this also cancelled the browser's activation behaviour for any focused descendant, so no click was ever synthesised and the button's onClick never ran. Only mouse clicks worked.

This affected every button rendered in a panel summary, including the add/rename/delete parameter actions, not just the add-parameter confirm button reported in the issue.

• Ignore keydown events that did not originate on the summary itself, so interactive descendants keep their native Enter/Space activation.
• Stop click propagation on the name input confirm/cancel buttons, so activating them no longer toggles the enclosing panel. This was also reachable with the mouse, most visibly when renaming a parameter, where the panel survives the action and toggled underneath the user.

Fixes #3536

• Scope is wider than the issue. The preventDefault on a bubbled keydown disabled Enter/Space for every button in every panel summary (add, rename, delete, cancel) not just the confirm button. This is a WCAG 2.1.1 fix.
• The stopPropagation change is mouse-reachable too, and wasn't in the issue. Flag it so a maintainer can ask for it separately if they'd rather. The keyboard fix is incomplete without it, activating confirm would otherwise toggle the panel.
• How it was tested. 6753 tests pass, lint clean, and the 4 new bug-proving tests were confirmed to fail with the source fixes reverted. Worth saying that the 2 remaining new tests (Enter-in-field, Escape) pass either way they're regression guards, not proof.

I used a stack of agents, Fable in front, a mix of local models on my Spark and workstation, to address this issue and solve it. I'm learning the trade via "project based learning", so i read the diff here and spent time with my agents to understand what we did and why. I think I've put my inference to good use here for you guys and the open source movement.

Thank you!

Summary by CodeRabbit

• Bug Fixes

  • Prevented buttons and inputs inside expansion panel summaries from unintentionally toggling the panel.
  • Improved keyboard behavior for submitting and cancelling document name edits.
  • Ensured Enter and Space activate focused controls correctly without duplicate actions.

• Accessibility

  • Improved keyboard navigation and interaction within expansion panels and document name inputs.

[coderabbitai]

📝 Walkthrough

Walkthrough

ExpansionPanel keyboard handling now ignores events from interactive descendants. NameInputPlaceholder stops submit and cancel clicks from toggling the enclosing panel, with tests covering Enter, Space, Tab, and Escape interactions.

Changes

Keyboard interaction behavior

Layer / File(s)	Summary
ExpansionPanel descendant keyboard handling packages/ui/src/components/ExpansionPanels/ExpansionPanel.tsx, packages/ui/src/components/ExpansionPanels/ExpansionPanel.test.tsx	Nested interactive elements no longer toggle the panel on Enter or Space, and focused summary buttons are tested for keyboard activation.
Name input submit and cancel interactions packages/ui/src/components/Document/NameInputPlaceholder.tsx, packages/ui/src/components/Document/NameInputPlaceholder.test.tsx	Submit and cancel clicks stop propagation, with tests covering Tab-to-submit, Enter submission, and Escape cancellation inside an expansion summary.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• KaotoIO/kaoto#3003: Updates the same ExpansionPanel keyboard activation behavior and related tests.

Suggested reviewers: igarashitm

Poem

I’m a bunny hopping through keys,
Enter and Space with greatest ease.
Tab finds the button, clicks stay tame,
Escape cancels without a game.
Panels rest while inputs do their thing.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise and matches the main change: enabling Enter/Space activation for summary buttons.
Linked Issues check	✅ Passed	The changes cover Enter/Space activation, Enter-to-submit, and Esc-to-cancel behaviors required by issue #3536.
Out of Scope Changes check	✅ Passed	The added tests and propagation fixes stay aligned with the linked issue and supporting keyboard behavior work.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

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/ui/src/components/ExpansionPanels/ExpansionPanel.tsx`:
- Around line 116-118: The ExpansionPanel summary click path still toggles when
a nested interactive control is activated. In
packages/ui/src/components/ExpansionPanels/ExpansionPanel.tsx:116-118, update
the summary click handling around toggleExpanded to ignore supported interactive
descendant targets while preserving their native activation; in
packages/ui/src/components/ExpansionPanels/ExpansionPanel.test.tsx:478-493,
provide a setExpanded mock and assert it is not called after nested-button Enter
or Space activation.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c1d24b8f-c8e1-4b37-9e37-75b66e446199

📥 Commits

Reviewing files that changed from the base of the PR and between 468c9b8 and bd9227e.

📒 Files selected for processing (4)

• packages/ui/src/components/Document/NameInputPlaceholder.test.tsx
• packages/ui/src/components/Document/NameInputPlaceholder.tsx
• packages/ui/src/components/ExpansionPanels/ExpansionPanel.test.tsx
• packages/ui/src/components/ExpansionPanels/ExpansionPanel.tsx