fix: highlight scatter axes on facet inputs focus

[graphieros]

Resolves #2483

(Forgot to push a commit on #2472)

This also highlights the related scatter axis when accessing facet inputs via keyboard.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 12, 2026 5:47am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 12, 2026 5:47am
npmx-lunaria	Ignored		Apr 12, 2026 5:47am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ff2ac2a8-a0ff-4b0f-b6ab-5916f62486ee

📥 Commits

Reviewing files that changed from the base of the PR and between 2f3b6e6 and 79220f2.

📒 Files selected for processing (1)

• app/components/Compare/FacetScatterChart.vue

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

• app/components/Compare/FacetScatterChart.vue

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved axis highlighting in the comparison chart so focus now reliably sets the X/Y axis highlight and leaving focus clears it. Hover behaviour remains unchanged. This enhances keyboard navigation and focus interactions for axis selectors, making visual feedback more consistent when using keys or focus controls.

Walkthrough

Updated focus event handling in the FacetScatterChart component by replacing @blur handlers with @focusin and @focusout handlers on facet SelectField inputs to toggle axis highlighting on focus entry and exit.

Changes

Cohort / File(s)	Summary
Facet scatter chart focus handling app/components/Compare/FacetScatterChart.vue	Replaced @blur event handlers with @focusin (sets axis highlight) and @focusout (clears highlight) handlers for both X and Y axis selectors to enable axis highlighting when controls receive focus.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: implementing scatter axis highlighting when facet inputs receive focus.
Description check	✅ Passed	The description is relevant to the changeset, referencing the related issue #2483 and explaining the keyboard accessibility enhancement.
Linked Issues check	✅ Passed	The code changes align with issue #2483 requirements by implementing focus-driven axis highlighting for facet inputs via keyboard and mouse interaction.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of highlighting scatter axes on facet input focus; no out-of-scope modifications detected.

_{✏️ 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 highlight-scatter-axes-on-facet-inputs-focus

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/components/Compare/FacetScatterChart.vue`:
- Around line 325-328: The Y-axis highlight can remain stuck because the
interactive element uses `@mouseenter/`@focus/@focusin to call
toggleAxisHighlight('y') but lacks a corresponding mouseleave to clear it; add
an `@mouseleave` handler on the same element (the select or component that
currently has `@mouseenter`="toggleAxisHighlight('y')") that calls
toggleAxisHighlight(null) so hover exit clears the highlight (ensure symmetry
with existing `@focusout` behavior and apply the same pattern to any symmetric
X-axis control if present).

🪄 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

Run ID: 8f7558f0-b99a-43fd-bc0a-48d2d65f1a87

📥 Commits

Reviewing files that changed from the base of the PR and between c5b3b0f and 2f3b6e6.

📒 Files selected for processing (1)

• app/components/Compare/FacetScatterChart.vue

[codecov]

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!