fix: add hint tooltips for quadrant axes by graphieros · Pull Request #2419 · npmx-dev/npmx.dev

graphieros · 2026-04-08T13:36:33Z

Follow up to #2416

Compare page, quadrant chart.
This adds tooltip hints for the quadrant axes.
The hint icon is hidden for prints.

vercel · 2026-04-08T13:36:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 8, 2026 2:24pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 8, 2026 2:24pm
npmx-lunaria	Ignored		Apr 8, 2026 2:24pm

github-actions · 2026-04-08T13:37:28Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

coderabbitai · 2026-04-08T13:40:07Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

The pull request adds two SVG foreignObject overlays to the quadrant chart component that provide contextual information to users. The first overlay displays an efficiency-related explanation tooltip positioned at the top left of the chart, whilst the second displays an adoption-related explanation tooltip positioned at the right centre. Both overlays wrap info buttons with associated TooltipApp components using localised text strings. The buttons are marked to be excluded from PNG exports via the data-dom-to-png-ignore attribute.

Possibly related PRs

feat: add quadrant chart to compare page #2388: Adds the initial quadrant chart component and defines the tooltip localization strings that are now being integrated into this overlay implementation
fix(ui): add missing AppTooltip usages #883: Modifies UI tooltip implementation patterns by adding TooltipApp-based wrappers in component templates, using the same tooltip component approach
fix: improve compare quadrant chart labels #2416: Modifies the same quadrant chart component file with related visual adjustments and localization key updates

Suggested reviewers

serhalp
alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly describes the changes being made: adding tooltip hints for quadrant axes on the compare page quadrant chart, with visual evidence provided.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch compare-quadrant-axes-tooltips

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 and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

app/components/Compare/FacetQuadrantChart.vue (1)

386-437: Well-implemented tooltip overlays for axis explanations.

The use of foreignObject with overflow: visible is appropriate for embedding interactive HTML tooltips within the SVG context. Good choices:

The interactive prop on TooltipApp correctly enables pointer events and provides a 150ms hide delay, allowing users to move their cursor to the tooltip content.

data-dom-to-png-ignore appropriately excludes these UI controls from image exports.

Proper accessibility via aria-label attributes on the buttons.

One minor formatting observation: the indentation within the foreignObject elements is inconsistent (e.g., lines 394-410 use different indentation than the surrounding template code). Consider aligning with the file's existing indentation style for consistency.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fa7ca62f-bc2e-4019-b116-e0ab752102bf

📥 Commits

Reviewing files that changed from the base of the PR and between 526c5db and 3fcf576.

📒 Files selected for processing (4)

app/components/Compare/FacetQuadrantChart.vue
i18n/locales/en.json
i18n/locales/fr-FR.json
i18n/schema.json

coderabbitai

Actionable comments posted: 2

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce78f7ba-eaae-476d-89f1-69daa28116b5

📥 Commits

Reviewing files that changed from the base of the PR and between c0022ae and 6cfcee3.

📒 Files selected for processing (1)

app/components/Compare/FacetQuadrantChart.vue

app/components/Compare/FacetQuadrantChart.vue

coderabbitai

♻️ Duplicate comments (1)

app/components/Compare/FacetQuadrantChart.vue (1)
390-394: ⚠️ Potential issue | 🟠 Major

Add accessible names to the new axis help buttons.

Both triggers are icon-only. Unlike the chart-level help button on Line 343, these buttons have no localised aria-label, so screen readers will announce them as an unlabelled button and the new help text is not discoverable.
♿ Suggested fix
               <TooltipApp>
                 <button
                   data-dom-to-png-ignore
                   class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
                   type="button"
+                  :aria-label="$t('compare.quadrant_chart.explanation.efficiency')"
                 />
@@
               <TooltipApp>
                 <button
                   data-dom-to-png-ignore
                   class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
                   type="button"
+                  :aria-label="$t('compare.quadrant_chart.explanation.adoption')"
                 />
Also applies to: 415-419

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4ec96272-60c6-46eb-b0cb-ee6700270c33

📥 Commits

Reviewing files that changed from the base of the PR and between 61ec1b8 and 8a52d65.

📒 Files selected for processing (1)

app/components/Compare/FacetQuadrantChart.vue

serhalp

LGTM but there's an a11y violation 👀

graphieros · 2026-04-08T14:20:10Z

LGTM but there's an a11y violation 👀

I know it's an impossible one.
The svg is already focusable, and the foreignObject creates a HTML scope with a focusable button

I had to filter some violations just for this component. Hope it's ok, if not, we'll have to find another way.

codecov · 2026-04-08T14:26:10Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

fix: add hint tooltips for quadrant axes

3fcf576

graphieros requested a review from serhalp April 8, 2026 13:38

[autofix.ci] apply automated fixes

c0022ae

coderabbitai bot reviewed Apr 8, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev April 8, 2026 13:42 View deployment

fix: try replacing buttons with spans and pray

6cfcee3

vercel bot deployed to Preview – npmx.dev April 8, 2026 13:51 View deployment

coderabbitai bot reviewed Apr 8, 2026

View reviewed changes

app/components/Compare/FacetQuadrantChart.vue Show resolved Hide resolved

app/components/Compare/FacetQuadrantChart.vue Outdated Show resolved Hide resolved

fix: follow the rabbit

61ec1b8

vercel bot deployed to Preview – npmx.dev April 8, 2026 13:59 View deployment

graphieros and others added 4 commits April 8, 2026 16:00

fix: add missing translation

d5779a4

[autofix.ci] apply automated fixes

b8e360c

fix: remove unused keys

b1f249b

vue-ui-xy

8a52d65

vercel bot deployed to Preview – npmx.dev April 8, 2026 14:05 View deployment

coderabbitai bot reviewed Apr 8, 2026

View reviewed changes

serhalp reviewed Apr 8, 2026

View reviewed changes

graphieros and others added 2 commits April 8, 2026 16:18

fix: add exceptions

13a10d3

[autofix.ci] apply automated fixes

6d73530

vercel bot deployed to Preview – npmx.dev April 8, 2026 14:21 View deployment

fix: add exceptions

7b533a7

vercel bot deployed to Preview – npmx.dev April 8, 2026 14:24 View deployment

graphieros requested a review from serhalp April 8, 2026 14:29

graphieros enabled auto-merge April 8, 2026 14:34

serhalp approved these changes Apr 8, 2026

View reviewed changes

graphieros added this pull request to the merge queue Apr 8, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 8, 2026

graphieros added this pull request to the merge queue Apr 8, 2026

Merged via the queue into main with commit 7505f1a Apr 8, 2026
24 checks passed

graphieros deleted the compare-quadrant-axes-tooltips branch April 8, 2026 15:12

github-actions bot mentioned this pull request Apr 8, 2026

chore: release v0.8.0 #2354

Merged

Uh oh!

Conversation

graphieros commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

coderabbitai bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

serhalp left a comment

Choose a reason for hiding this comment

Uh oh!

graphieros commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Apr 8, 2026

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

graphieros commented Apr 8, 2026 •

edited

Loading

vercel bot commented Apr 8, 2026 •

edited

Loading

github-actions bot commented Apr 8, 2026 •

edited

Loading

coderabbitai bot commented Apr 8, 2026 •

edited

Loading

graphieros commented Apr 8, 2026 •

edited

Loading