fix(ui): make shared description tooltip triggers keyboard accessible. Fixes #16574 by Abmun · Pull Request #16609 · argoproj/argo-workflows

Abmun · 2026-08-04T02:59:01Z

Motivation

Icon-only description tooltips across the UI (a bare fa fa-question-circle/fa-info-circle icon wrapped in the shared Tooltip) were neither keyboard-focusable nor given an accessible name, so keyboard and assistive-technology users couldn't discover the explanatory content.

Modifications

Added TooltipIcon in ui/src/shared/components/tooltip.tsx: a shared, accessible trigger that renders a native <button type="button"> instead of a bare <i>.
- Native buttons are keyboard-focusable by default - no tabIndex hacks needed.
- aria-label defaults to the tooltip content when it's a plain string, falls back to "More information" for rich content, and can be overridden via label.
- Icon class defaults to fa-question-circle, overridable via icon; button chrome is reset inline so the visual presentation is unchanged.
- tooltipProps forwards extra props (e.g. arrow) to the underlying Tooltip.
- The underlying Tooltip (Tippy-based) already opens on focus as well as mouseenter by default, so no changes were needed there once the trigger became focusable.
Swapped icon-only Tooltip usages over to TooltipIcon in:
- ui/src/shared/components/parameters-input.tsx
- ui/src/workflows/components/retry-workflow-node-panel.tsx
- ui/src/workflows/components/workflow-details/suspend-inputs.tsx
- ui/src/workflows/components/workflows-summary-container/workflows-summary-container.tsx
- ui/src/workflows/components/workflow-node-info/workflow-node-info.tsx (hidden-secret-value key icon)
ui/src/workflows/components/submit-workflow-panel.tsx needed no direct change - fixed transitively via ParametersInput.

Out of scope: clipboard-text.tsx and timestamp.tsx's TimestampSwitch wrap icon-only triggers in an <a> without href (same underlying bug), but those carry real onClick behavior, so fixing them needs keyboard-activation semantics too, not just focusability. Left out to keep this PR scoped to the description-tooltip pattern the issue calls out; happy to follow up separately.

Verification

yarn test - all suites pass, including 6 new tests for TooltipIcon (focusability, default/overridden accessible name, icon selection, forwarded tooltip props).
yarn lint (eslint + tsc --noEmit) - clean.
Manually verified each swapped usage preserves its original tooltip content, icon, and spacing.

Documentation

Not required - internal UI accessibility fix, no user-facing API or docs change.

AI

Claude (Anthropic) was used to draft the implementation, tests, and this PR description based on the issue's stated requirements and acceptance criteria. I reviewed the diff, ran the test/lint/typecheck suite locally, and verified the behavior before opening this PR.

Summary by CodeRabbit

Accessibility
- Improved tooltip icons across parameter, workflow, and environment-variable interfaces.
- Tooltip icons are now keyboard-focusable buttons with accessible labels and customizable icons.
Consistency
- Standardized help and explanatory messages with a shared tooltip icon experience across workflows and settings.
Tests
- Added coverage for keyboard focus, accessibility labels, icon customization, styling, and tooltip behavior.

Icon-only description tooltips (a bare `fa fa-question-circle`/`fa-info-circle` icon wrapped in the shared `Tooltip`) were not keyboard-focusable and had no accessible name, so keyboard and screen-reader users could not discover the explanatory content. Add `TooltipIcon`, a shared trigger that renders a native <button> with an aria-label derived from the tooltip content (or an explicit `label`/`icon` override), and switch every icon-only `Tooltip` usage over to it: - shared/components/parameters-input.tsx - workflows/components/retry-workflow-node-panel.tsx - workflows/components/workflow-details/suspend-inputs.tsx - workflows/components/workflows-summary-container/workflows-summary-container.tsx - workflows/components/workflow-node-info/workflow-node-info.tsx submit-workflow-panel.tsx is fixed transitively via ParametersInput. Tippy (the underlying Tooltip implementation) already opens on focus as well as hover by default, so no changes were needed there once the trigger itself became focusable. Adds tests in tooltip.test.tsx covering focusability, default/overridden accessible names, icon selection, and forwarded tooltip props. Fixes argoproj#16574 Signed-off-by: Abmun <abhimanyu12345@gmail.com>

coderabbitai · 2026-08-04T03:52:14Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e4b3e096-6265-48fc-bbd8-42238bc1cb70

📥 Commits

Reviewing files that changed from the base of the PR and between e0b6328 and 14b0fe1.

📒 Files selected for processing (7)

ui/src/shared/components/parameters-input.tsx
ui/src/shared/components/tooltip.test.tsx
ui/src/shared/components/tooltip.tsx
ui/src/workflows/components/retry-workflow-node-panel.tsx
ui/src/workflows/components/workflow-details/suspend-inputs.tsx
ui/src/workflows/components/workflow-node-info/workflow-node-info.tsx
ui/src/workflows/components/workflows-summary-container/workflows-summary-container.tsx

🚧 Files skipped from review as they are similar to previous changes (7)

ui/src/workflows/components/workflow-node-info/workflow-node-info.tsx
ui/src/workflows/components/workflow-details/suspend-inputs.tsx
ui/src/shared/components/parameters-input.tsx
ui/src/workflows/components/workflows-summary-container/workflows-summary-container.tsx
ui/src/shared/components/tooltip.test.tsx
ui/src/shared/components/tooltip.tsx
ui/src/workflows/components/retry-workflow-node-panel.tsx

📝 Walkthrough

Walkthrough

Adds the shared TooltipIcon component with accessible button behavior and tests. Replaces icon-only tooltip triggers in parameter and workflow components while preserving tooltip content, icons, and styling.

Changes

Accessible tooltip triggers

Layer / File(s)	Summary
TooltipIcon component and validation `ui/src/shared/components/tooltip.tsx`, `ui/src/shared/components/tooltip.test.tsx`	Adds `TooltipIcon` with accessible labels, configurable icons and styles, forwarded tooltip properties, and keyboard-focusable button semantics. Tests cover these behaviors.
TooltipIcon call-site migration `ui/src/shared/components/parameters-input.tsx`, `ui/src/workflows/components/*`	Replaces wrapped icon triggers with `TooltipIcon` in parameter and workflow interfaces while preserving tooltip content and presentation options.

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

Possibly related PRs

argoproj/argo-workflows#15904: Both PRs modify the shared Tooltip component and its call sites.
argoproj/argo-workflows#16549: Both PRs modify ui/src/shared/components/tooltip.tsx and its tests.

Suggested reviewers: joibel

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the keyboard-accessibility fix for shared UI description tooltip triggers and references issue `#16574`.
Description check	✅ Passed	The description includes all required template sections and explains the motivation, modifications, verification, documentation status, and AI use.
Linked Issues check	✅ Passed	The implementation satisfies issue `#16574` by adding focusable, named TooltipIcon triggers, preserving behavior, updating usages, and adding tests.
Out of Scope Changes check	✅ Passed	The changes remain focused on the shared description-tooltip accessibility pattern, with unrelated interactive icon triggers explicitly left unchanged.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.}

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 `@ui/src/shared/components/parameters-input.tsx`:
- Line 52: Move each TooltipIcon outside its surrounding label so the native
tooltip button is a sibling of the label text/control rather than a nested
interactive descendant. Apply this in
ui/src/shared/components/parameters-input.tsx lines 52-52,
ui/src/workflows/components/retry-workflow-node-panel.tsx lines 80-80, and
ui/src/workflows/components/workflow-details/suspend-inputs.tsx lines 34-34,
preserving the existing tooltip content and parameter-label behavior.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b40d01ae-d760-46ad-a770-a530c32a2491

📥 Commits

Reviewing files that changed from the base of the PR and between e0b6328 and 9960442.

📒 Files selected for processing (7)

ui/src/shared/components/parameters-input.tsx
ui/src/shared/components/tooltip.test.tsx
ui/src/shared/components/tooltip.tsx
ui/src/workflows/components/retry-workflow-node-panel.tsx
ui/src/workflows/components/workflow-details/suspend-inputs.tsx
ui/src/workflows/components/workflow-node-info/workflow-node-info.tsx
ui/src/workflows/components/workflows-summary-container/workflows-summary-container.tsx

CodeRabbit flagged that the Restart Successful label wrapped the new TooltipIcon <button>, making an interactive element an unrelated descendant of the <label>. Pull the tooltip trigger out so it's a sibling of the label, matching the pattern already used in parameters-input.tsx and suspend-inputs.tsx (which were already structured this way and needed no change). Signed-off-by: Abmun <abhimanyu12345@gmail.com>

coderabbitai · 2026-08-05T17:57:49Z

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

Abmun · 2026-08-14T14:17:37Z

@jonas please review

Abmun force-pushed the fix/16574-a11y-tooltip-triggers branch from 1ec1575 to 9960442 Compare August 4, 2026 03:04

Abmun marked this pull request as ready for review August 4, 2026 03:49

Abmun requested a review from a team as a code owner August 4, 2026 03:49

coderabbitai Bot reviewed Aug 4, 2026

View reviewed changes

Comment thread ui/src/shared/components/parameters-input.tsx

Abmun force-pushed the fix/16574-a11y-tooltip-triggers branch from 1e6628b to 14b0fe1 Compare August 5, 2026 17:57

Abmun added 3 commits August 7, 2026 19:27

Merge branch 'main' into fix/16574-a11y-tooltip-triggers

2e75d9e

Merge branch 'main' into fix/16574-a11y-tooltip-triggers

16da670

Merge branch 'main' into fix/16574-a11y-tooltip-triggers

1893704

Navigation Menu

Uh oh!

fix(ui): make shared description tooltip triggers keyboard accessible. Fixes #16574 - #16609

fix(ui): make shared description tooltip triggers keyboard accessible. Fixes #16574#16609
Abmun wants to merge 5 commits into
argoproj:mainfrom
Abmun:fix/16574-a11y-tooltip-triggers

Abmun commented Aug 4, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 5, 2026

Uh oh!

Abmun commented Aug 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

Abmun commented Aug 4, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Modifications

Verification

Documentation

AI

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 5, 2026

Uh oh!

Abmun commented Aug 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Abmun commented Aug 4, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading