Skip to content

fix(apollo-wind,apollo-react): keyboard focus in side panel tabs and JSON tree rows [MST-14499] - #1449

Merged
david-rios-uipath merged 3 commits into
mainfrom
fix/tabpanel-tab-stop
Oct 22, 2026
Merged

david-rios-uipath merged 3 commits into
mainfrom
fix/tabpanel-tab-stop

Conversation

@david-rios-uipath

@david-rios-uipath david-rios-uipath commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

This PR fixes two main issues:

  1. Variable action buttons now show when focused on the list item
Before After
2026-10-22 12 31 51 2026-10-22 12 32 03
  1. TabPanel was a focusable element without a purpose
Before After
2026-10-22 12 28 36 2026-10-22 12 28 55

It addresses the referenced ticket. The tab panel element being focusable just bothered me for a long time.

Copilot AI balanced review requested due to automatic review settings October 22, 2026 16:28
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 22, 2026 16:28 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 22, 2026 16:29 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 22, 2026 16:29 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 22, 2026 16:29 Destroyed
@github-actions github-actions Bot added the size:M 30-99 changed lines. label Oct 22, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Dependency License Review

  • ✅ 1957 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1721
ISC 91
Apache-2.0 57
BSD-3-Clause 28
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
CC0-1.0 4
MIT-0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.3.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@david-rios-uipath
david-rios-uipath marked this pull request as ready for review October 22, 2026 16:33

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 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 PanelTabsContent and 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

Comment thread packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.tsx Outdated
@david-rios-uipath david-rios-uipath changed the title fix(apollo-wind,apollo-react): keyboard focus in side panel tabs and JSON tree rows fix(apollo-wind,apollo-react): keyboard focus in side panel tabs and JSON tree rows [MST-14499] Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

Storybook visual diff

⚠️ Visual changes detected: 17 changed (of 544 compared, 527 unchanged). View report

Baseline 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

@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package Coverage New-line coverage Packed (gzip) Unpacked vs main
@uipath/apollo-core — — 42.02 MB 50.17 MB ±0
@uipath/apollo-react 58.0% — (12 untracked) 8.14 MB 32.17 MB +73 B
@uipath/apollo-ui-icons — — 2.86 MB 6.97 MB ±0
@uipath/apollo-vertex — — — — —
@uipath/apollo-wind 79.4% 100.0% (1/1) 810.7 KB 4.68 MB +138 B
@uipath/ap-chat 85.8% — 40.42 MB 45.71 MB ±0

"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.

Copilot AI balanced review requested due to automatic review settings October 22, 2026 17:18
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 22, 2026 17:18 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 22, 2026 17:18 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 22, 2026 17:19 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 22, 2026 17:19 Destroyed
@david-rios-uipath
david-rios-uipath enabled auto-merge (rebase) October 22, 2026 17:19

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Disabled tabbed forms and variable-panel no-results states still lose their fallback keyboard focus targets.

2 open issues
2 resolved since last review

Review effort: Balanced

Comment thread packages/apollo-wind/src/components/forms/metadata-form.tsx Outdated
Comment thread packages/apollo-wind/src/components/ui/panel-tabs.tsx Outdated
Copilot AI balanced review requested due to automatic review settings October 22, 2026 18:22
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 22, 2026 18:22 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 22, 2026 18:22 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 22, 2026 18:22 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 22, 2026 18:22 Destroyed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Tabs containing only rule-disabled fields still lose the fallback focus target needed for keyboard scrolling.

1 open issue
2 resolved since last review

Review effort: Balanced

Comment thread packages/apollo-wind/src/components/forms/metadata-form.tsx Outdated
david-rios-uipath and others added 3 commits October 22, 2026 14:39
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>
Copilot AI balanced review requested due to automatic review settings October 22, 2026 18:40
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 22, 2026 18:41 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 22, 2026 18:41 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 22, 2026 18:41 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 22, 2026 18:41 Destroyed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The focused changes have regression coverage and no unresolved blocking findings, with the remaining Safari limitation explicitly accepted.

No open issues 🎉

1 resolved since last review

Review effort: Balanced

@david-rios-uipath
david-rios-uipath merged commit 10bfd48 into main Oct 22, 2026
41 of 42 checks passed
@david-rios-uipath
david-rios-uipath deleted the fix/tabpanel-tab-stop branch October 22, 2026 21:15

This branch was successfully deployed

No deployments
preview/apollo-vertex — d2c0f9ec Deployed Oct 22, 2026 by github-actions[bot]
preview/apollo-docs — d2c0f9ec Deployed Oct 22, 2026 by github-actions[bot]
preview/apollo-landing — d2c0f9ec Deployed Oct 22, 2026 by github-actions[bot]
preview/apollo-design — d2c0f9ec Deployed Oct 22, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants