fix(a11y): use native button in MetricsScoreCircle

frontend/__tests__/unit/components/MetricsScoreCircle.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 import '@testing-library/jest-dom'
 import MetricsScoreCircle from 'components/MetricsScoreCircle'
@@ -309,18 +310,20 @@ describe('MetricsScoreCircle', () => {
       expect(clickableElement).not.toBeInTheDocument()
     })
 
-    it('handles keyboard navigation when clickable', () => {
+    it('handles keyboard navigation when clickable', async () => {
       const mockOnClick = jest.fn()
       render(<MetricsScoreCircle score={75} clickable={true} onClick={mockOnClick} />)
 
       const buttonElement = screen.getByRole('button')
+      const user = userEvent.setup()
 
       // Test Enter key
-      fireEvent.keyDown(buttonElement, { key: 'Enter' })
+      buttonElement.focus()
+      await user.keyboard('{Enter}')
       expect(mockOnClick).toHaveBeenCalledTimes(1)
 
       // Test Space key
-      fireEvent.keyDown(buttonElement, { key: ' ' })
+      await user.keyboard(' ')
       expect(mockOnClick).toHaveBeenCalledTimes(2)
     })
 

frontend/src/components/MetricsScoreCircle.tsx

@@ -1,9 +1,9 @@
 import { Tooltip } from '@heroui/tooltip'
-import React, { FC, MouseEvent } from 'react'
+import { FC, MouseEvent } from 'react'
 
 interface MetricsScoreCircleProps {
   score: number
-  onClick?: (e: MouseEvent<HTMLDivElement>) => void
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
   clickable?: boolean
 }
 
@@ -15,54 +15,47 @@ const MetricsScoreCircle: FC<MetricsScoreCircleProps> = ({ score, onClick, click
     scoreStyle = 'bg-yellow-400/80 text-yellow-900/90'
   }
 
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    if (clickable && onClick) {
-      onClick(e)
-    }
-  }
-
   const baseClasses = `relative flex h-14 w-14 flex-col items-center justify-center rounded-full shadow-md transition-all duration-300 ${scoreStyle}`
   const groupClass = clickable ? 'group' : ''
   const clickableClasses = clickable ? 'hover:scale-105 hover:shadow-lg cursor-pointer' : ''
   const finalClasses = `${groupClass} ${baseClasses} ${clickableClasses}`
 
   return (
     <Tooltip content={'Current Project Health Score'} placement="top">
-      <div
-        className={finalClasses}
-        onClick={handleClick}
-        role={clickable ? 'button' : undefined}
-        tabIndex={clickable ? 0 : undefined}
-        onKeyDown={
-          clickable
-            ? (e: React.KeyboardEvent<HTMLDivElement>) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  // For keyboard navigation, call onClick directly since we don't need the event object
-                  if (onClick) {
-                    onClick(e as unknown as React.MouseEvent<HTMLDivElement>)
-                  }
-                }
-              }
-            : undefined
-        }
-      >
-        {clickable && (
+      {clickable ? (
+        <button className={finalClasses} onClick={onClick} tabIndex={0} type="button">
           <div className="absolute inset-0 rounded-full bg-linear-to-br from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
-        )}
-        <div className="relative z-10 flex flex-col items-center text-center">
-          <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
-            Health
-          </span>
-          <span className="text-xl leading-none font-extrabold">{score}</span>
-          <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
-            Score
-          </span>
+
+          <div className="relative z-10 flex flex-col items-center text-center">
+            <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
+              Health
+            </span>
+            <span className="text-xl leading-none font-extrabold">{score}</span>
+            <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
+              Score
+            </span>
+          </div>
+          {score < 30 && (
+            <div className="absolute inset-0 animate-pulse rounded-full bg-red-400/20"></div>
+          )}
+        </button>
+      ) : (
+        <div className={finalClasses}>
+          <div className="relative z-10 flex flex-col items-center text-center">
+            <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
+              Health
+            </span>
+            <span className="text-xl leading-none font-extrabold">{score}</span>
+            <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
+              Score
+            </span>
+          </div>
+
+          {score < 30 && (
+            <div className="absolute inset-0 animate-pulse rounded-full bg-red-400/20" />
+          )}
         </div>
-        {score < 30 && (
-          <div className="absolute inset-0 animate-pulse rounded-full bg-red-400/20"></div>
-        )}
-      </div>
+      )}
     </Tooltip>
   )
 }