Skip to content

fix(site): improve keyboard navigation in help popovers - #23374

Merged
aslilac merged 6 commits into
coder:mainfrom
code-qtzl:fix/help-tooltip-keyboard-navigation
Mar 31, 2026
Merged

fix(site): improve keyboard navigation in help popovers#23374
aslilac merged 6 commits into
coder:mainfrom
code-qtzl:fix/help-tooltip-keyboard-navigation

Conversation

@code-qtzl

@code-qtzl code-qtzl commented Mar 20, 2026

Copy link
Copy Markdown
Contributor

Description

Fixes keyboard navigation in HelpTooltip components by replacing the underlying Tooltip primitive with Popover. Links inside help tooltips are now accessible via keyboard navigation.

Problem

When tabbing through the UI, users could focus on the help icon button and open the tooltip, but the links inside were not in the tab order. This made the links inaccessible to keyboard-only users, violating accessibility standards.

Solution

Replaced Radix UI's Tooltip primitive with Popover primitive in the HelpTooltip component. Popovers properly manage focus and keyboard navigation for interactive content, while Tooltips are designed only for non-interactive content.

Changes

  • Swapped Tooltip imports to Popover in HelpTooltip.tsx HelpPopover.tsx
  • Added type="button" to trigger button for proper semantics
  • Added disablePortal prop support for backward compatibility
  • Maintained the same API so all existing usages remain compatible

Behavior Changes

  • Before: Hover to open, links not keyboard-accessible
  • After: Click to open (or Enter/Space when focused), links fully keyboard-accessible via Tab

Testing

  1. Tab to any help icon in the UI
  2. Press Enter or Space to open the tooltip
  3. Press Tab - focus moves to the first link
  4. Continue tabbing through all links
  5. Press Escape to close

Screenshot (gif)

Before

before

After

after

@github-actions github-actions Bot added the community Pull Requests and issues created by the community. label Mar 20, 2026
@github-actions

github-actions Bot commented Mar 20, 2026

Copy link
Copy Markdown
Contributor

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@code-qtzl

Copy link
Copy Markdown
Contributor Author

I have read the CLA Document and I hereby sign the CLA

cdrci2 added a commit to coder/cla that referenced this pull request Mar 20, 2026
@code-qtzl

Copy link
Copy Markdown
Contributor Author

recheck

@matifali
matifali requested review from a team and jakehwll and removed request for a team March 25, 2026 13:29
@blinkagent

blinkagent Bot commented Mar 27, 2026

Copy link
Copy Markdown
Contributor

Heads up: this PR uses baseUrl-style imports (e.g. import { ... } from "components/Popover/Popover", import { cn } from "utils/cn" in HelpTooltip.tsx). The baseUrl resolution in tsconfig.json is deprecated and will be removed soon — these imports will stop working.

Please pull a recent version of main into your branch and make sure all new TypeScript imports use the new #/ import style (e.g. import { ... } from "#/components/Popover/Popover").

@code-qtzl
code-qtzl force-pushed the fix/help-tooltip-keyboard-navigation branch from cac08c2 to 7e49b47 Compare March 28, 2026 00:59
@matifali
matifali requested a review from aslilac March 28, 2026 21:12

@jakehwll jakehwll Mar 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Could we rename this file to HelpPopover.tsx and update the component name and its consumers?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes, can do.

@jakehwll

Copy link
Copy Markdown
Contributor

Appears to have a conflict with PublishTemplateVersionDialog.tsx where the disablePortal prop was actually required 🙂

image

@code-qtzl
code-qtzl force-pushed the fix/help-tooltip-keyboard-navigation branch from 7e49b47 to bb1b020 Compare March 30, 2026 20:49
@code-qtzl code-qtzl changed the title fix(site/src/components): make links keyboard-accessible and remove u… fix(site/src/components, site/src/modules/dashboard): make links keyboard-accessible and remove u… Mar 30, 2026
@code-qtzl code-qtzl changed the title fix(site/src/components, site/src/modules/dashboard): make links keyboard-accessible and remove u… fix(site/src/components): improve keyboard navigation in help tooltips Mar 30, 2026
@code-qtzl code-qtzl changed the title fix(site/src/components): improve keyboard navigation in help tooltips fix(site/src/components): improve keyboard navigation in help popovers Mar 30, 2026
@code-qtzl code-qtzl changed the title fix(site/src/components): improve keyboard navigation in help popovers fix(site/src/components, site/src/modules/dashboard): improve keyboard navigation in help popovers Mar 30, 2026
@code-qtzl code-qtzl changed the title fix(site/src/components, site/src/modules/dashboard): improve keyboard navigation in help popovers fix(site/src/components, site/src/modules/dashboard, site/src/pages, site/src/utils): improve keyboard navigation in help popovers Mar 30, 2026
@code-qtzl code-qtzl changed the title fix(site/src/components, site/src/modules/dashboard, site/src/pages, site/src/utils): improve keyboard navigation in help popovers fix(site): improve keyboard navigation in help popovers Mar 30, 2026
Comment thread site/src/components/HelpPopover/HelpPopover.tsx Outdated
Comment thread site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx Outdated
@code-qtzl
code-qtzl force-pushed the fix/help-tooltip-keyboard-navigation branch from f9629d7 to 4c18984 Compare March 31, 2026 15:03
@code-qtzl
code-qtzl force-pushed the fix/help-tooltip-keyboard-navigation branch from 25246a1 to 09dc9f3 Compare March 31, 2026 15:19
Comment thread site/src/components/HelpPopover/HelpPopover.stories.tsx Outdated
@aslilac
aslilac merged commit f44a899 into coder:main Mar 31, 2026
23 of 24 checks passed
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 31, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

community Pull Requests and issues created by the community.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants