Repository navigation
fix(apollo-wind,apollo-react): keyboard focus in side panel tabs and JSON tree rows [MST-14499] - #1449
Conversation
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
🟡 Changes recommended
NodeIOView needs keyboard focus targets for its read-only JSON fallback and empty Schema states.
2 open issues
What changed in this PR
This PR adjusts keyboard navigation in Apollo’s side-panel tabs and makes JSON tree row actions visible while their row contains focus.
Changes:
- Removes default panel tab stops in
PanelTabsContentand NodeIOView’s Schema and JSON panels. - Preserves MetadataForm’s focusable text-only empty states.
- Adds focus-within visibility for JSON row actions and related regression assertions.
| File | Description |
|---|---|
packages/apollo-wind/src/components/ui/panel-tabs.tsx |
Defaults panel content to tabIndex={-1} and documents the override. |
packages/apollo-wind/src/components/ui/panel-tabs.test.tsx |
Tests that Tab skips panel content by default. |
packages/apollo-wind/src/components/ui/json-tree-view/RowActions.tsx |
Reveals actions when their row contains focus. |
packages/apollo-wind/src/components/ui/json-tree-view/JsonTree.test.tsx |
Checks hover and focus-within reveal classes. |
packages/apollo-wind/src/components/forms/metadata-form.tsx |
Keeps text-only empty-state panels focusable. |
packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.tsx |
Removes tab stops from Schema and JSON panels. |
Review effort: Balanced
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Oct 22, 2026, 12:16:30 PM |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
bf48922 to
c863104
Compare
c863104 to
1dd99b8
Compare
Radix gives every TabsContent tabIndex 0, so Tab stopped on the panel before its first field. PanelTabsContent drops the attribute, leaving the browser to make a scrolling panel with nothing focusable a tab stop on its own. Safari never does that, so MetadataForm keeps tabIndex 0 when disabled: its fields leave nothing to focus, and the panel is the only way to scroll. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…tops Drops Radix's tabIndex 0 on both panels, as PanelTabsContent does, so Tab goes to the tree rows or JSON editor instead of the panel. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Row actions were only revealed on hover or when an action button had focus itself. They now also show while focus is anywhere in the row, matching the hover-only sublabel. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
1dd99b8 to
d2c0f9e
Compare

This PR fixes two main issues:
It addresses the referenced ticket. The tab panel element being focusable just bothered me for a long time.