Skip to content

fix(QTooltip): show on keyboard focus & dismiss with ESC (fix #18241)#18318

Open
arbaev wants to merge 1 commit into
quasarframework:devfrom
arbaev:fix/qtooltip-keyboard-focus
Open

fix(QTooltip): show on keyboard focus & dismiss with ESC (fix #18241)#18318
arbaev wants to merge 1 commit into
quasarframework:devfrom
arbaev:fix/qtooltip-keyboard-focus

Conversation

@arbaev

@arbaev arbaev commented Jun 12, 2026

Copy link
Copy Markdown

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Documentation
  • Code style update
  • Refactor
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change?

  • Yes
  • No

The PR fulfills these requirements:

  • It's submitted to the dev branch
  • When resolving a specific issue, it's referenced in the PR's title (fix #18241)
  • It's been tested on a Cordova (iOS, Android) app
  • It's been tested on an Electron app
  • Any necessary documentation has been added or updated, or explained in the PR's description

Other information:

Fixes #18241.

Problem

QTooltip only showed on mouse hover (and touch), so keyboard-only users never saw it when tabbing to the target — a violation of WCAG 1.4.13 (Content on Hover or Focus).

Change

In the tooltip's anchor wiring (desktop):

  • Show on keyboard focus of the target, gated by :focus-visible so the tooltip does not appear on plain pointer clicks (mouse users keep hover).
  • Hide on blur.
  • Dismiss with ESC while shown, via Quasar's shared escape-key stack (same mechanism as QMenu/QDialog) — only the top-most popup reacts and focus is not moved (WCAG "dismissible").

No new props/events; respects the existing noParentEvent and persistent.
The touch/mobile path is unchanged.

Scope / note

A focusable trigger is required (QBtn, links, inputs…). A tooltip on a non-focusable element (a bare <div> without tabindex) still can't receive focus — that remains the app's responsibility.

Verification

Built from source and exercised in headless Chromium (Playwright):

  • idle: no tooltip
  • Tab focuses target → shown
  • ESC → hidden, focus stays on target
  • blur (Tab away) → hidden
  • mouse hover → shown / mouse leave → hidden
  • mouse click (focus without :focus-visible) → not shown

Cordova/Electron not separately tested — the change uses standard DOM focus/blur + :focus-visible and the existing escape-key stack, with no platform-specific code. No unit test added: QTooltip currently has no test file and the spec harness requires full-API coverage for any existing test file; the :focus-visible gating also can't be exercised under jsdom.
Happy to follow up with full QTooltip test coverage separately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tool tip information which gets displayed upon hovering is not displayed with keyboard focus.

1 participant