fix(a11y): use native button in MetricsScoreCircle

[Shubb07]

Proposed change

Resolves #3421

This PR fixes a SonarCloud accessibility issue where a non-interactive

was being used as an interactive element in MetricsScoreCircle.

Non-native interactive elements should not be used with click and keyboard handlers, as this breaks semantic HTML and can cause accessibility issues. This change replaces the interactive div with a native when the component is clickable, while keeping a div for the non-interactive state.

This preserves the existing visual and functional behavior, improves keyboard and assistive-technology support, and resolves the SonarCloud rule typescript:S6848.

##Checklist

• I followed the contributing workflow
• I verified that my code works as intended and resolves the issue as described
• I ran make check-test locally: all relevant checks executed (frontend lint/build passed; full pipeline run in WSL + Docker)
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Summary by CodeRabbit

• Bug Fixes

  • Improved accessibility by using native button semantics when the score display is interactive.

• New Features

  • Added a visual pulse indicator for low scores (below 30).

• Refactor

  • Component now renders either an interactive button or a static display; interactivity is opt-in and defaults to off, removing custom keyboard handlers.

• Tests

  • Updated keyboard interaction tests to use higher-level user interactions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Renders a native HTML button when clickable and a non-interactive div otherwise; removes custom keyboard/ARIA handling; changes onClick prop type to accept button mouse events; adds default clickable = false and a visual pulse indicator when score < 30. (≤50 words)

Changes

Cohort / File(s)	Summary
MetricsScoreCircle Component frontend/src/components/MetricsScoreCircle.tsx	Change onClick prop from MouseEvent<HTMLDivElement> to MouseEvent<HTMLButtonElement>; add default clickable = false; remove internal handleClick, keyboard handlers, ARIA/role/tabIndex; conditionally render <button type="button"> when clickable or <div> otherwise; keep inner content; add pulse indicator for score < 30.
Unit Tests (keyboard interaction) frontend/__tests__/unit/components/MetricsScoreCircle.test.tsx	Replace fireEvent keyDown usage with async userEvent keyboard simulation for Enter/Space; tests now use userEvent.setup() and awaited keyboard calls to validate keyboard activation on the rendered button.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Bug/fix scroll on Project Health Score click #2050: Modifies the same component's click/clickable/onClick behavior—likely overlapping changes.
• Prefer tag over ARIA role #2977: Converts MetricsScoreCircle to use a native button when clickable and adjusts event handling.
• feat: Add comprehensive unit tests for MetricsScoreCircle component #1852: Touches MetricsScoreCircle and its tests; related test/markup adjustments.

Suggested reviewers

• arkid15r

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely describes the main change: replacing a non-native interactive div with a native button element in MetricsScoreCircle to fix accessibility issues.
Description check	✅ Passed	The PR description is related to the changeset and provides relevant context about the accessibility issue being resolved, the solution approach, and verification steps taken.
Linked Issues check	✅ Passed	The code changes fully satisfy the requirements from issue #3421: the div has been replaced with a button when clickable, keyboard handlers are removed in favor of native button behavior, and the SonarCloud rule violation is resolved.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the PR objective. The modifications to MetricsScoreCircle component and its test file strictly address the accessibility issue without introducing unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@204f833). Learn more about missing BASE report.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3437   +/-   ##
=======================================
  Coverage        ?   85.57%           
=======================================
  Files           ?      461           
  Lines           ?    14236           
  Branches        ?     1897           
=======================================
  Hits            ?    12182           
  Misses          ?     1679           
  Partials        ?      375           

Flag	Coverage Δ
backend	84.47% <ø> (?)
frontend	88.62% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
frontend/src/components/MetricsScoreCircle.tsx	100.00% <100.00%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 204f833...88d4c00. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kasya]

@Shubb07 this looks good on the UI.

Unit tests are now failing though! Please fix those to work with your changes

[Shubb07]

Hey @kasya , I’ve updated the unit tests in MetricsScoreCircle.test.tsx to align with the new native button behavior. The keyboard interaction tests now use @testing-library/user-event instead of fireEvent to better reflect real user keyboard interactions (Enter and Space). This resolves the failing unit tests caused by the accessibility change. Please let me know if any further adjustments are needed.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[kasya]

@Shubb07 thanks for working on this! 👍🏼

The tests were still failing (could be for a different reason).

I fixed that failing test 👌🏼

Going forward, please make sure to run make check-test every time before pushing changes. This helps catch linting issues and failing tests early.

[Shubb07]

Hey @kasya , Thanks a lot for the review and guidance! I’ll make sure to run make check-test before pushing changes going forward. Appreciate your help.