Feat/verification badge a11y

[GreatShinro]

feat: redesign VerificationBadge with SVG icons and WCAG AA contrast

Summary

Redesigns VerificationBadge to meet accessibility and visual clarity requirements. Both verified and unverified states are now immediately distinguishable by icon shape, color, and text label — not color alone.

Changes

frontend/src/components/VerificationBadge.jsx

• Replaced text character icons (✓, ✕, ?) with inline SVG CheckIcon / XIcon / SpinnerIcon — sharp at any size, aria-hidden="true" to prevent screen reader duplication
• Switched from translucent colored text on a light background to solid opaque backgrounds with white (#ffffff) text, meeting WCAG AA contrast (≥4.5:1) in both light and dark modes:

  State	Background	Contrast ratio
  Verified	#15803d (green)	5.74:1 ✓
  Not Verified / Revoked	#b91c1c (red)	5.08:1 ✓
  Loading	#1d4ed8 (blue)	5.90:1 ✓

• not-found state now renders label "Not Verified" (badge.notVerified) instead of "No Records Found"
• Added role="status" for screen reader live region semantics
• Added minHeight: 2rem (32px) to satisfy minimum legible size requirement

frontend/src/locales/en.json / fr.json

• Added "notVerified" translation key ("Not Verified" / "Non vérifié")

frontend/src/components/VerificationBadge.test.jsx

• Added jest.mock('react-i18next', ...) with a t resolver matching all badge keys
• Updated assertions to match new labels, colors, and structure
• Added tests for: green/red backgrounds, white text, minHeight, role="status", aria-hidden on SVGs

Acceptance criteria

• Verified state: green badge, checkmark SVG icon, "Verified" label
• Unverified state: red badge, X SVG icon, "Not Verified" label
• Both states include a text label (not color-only distinction)
• Badge legible at small sizes — minHeight: 2rem (32px)
• WCAG AA contrast (≥4.5:1) in light and dark modes

Testing

All 17 unit tests pass:

PASS src/components/VerificationBadge.test.jsx
  VerificationBadge
    ✓ renders verified status with record count
    ✓ renders verified status with singular record
    ✓ renders not-found status with "Not Verified" label
    ✓ renders revoked status
    ✓ renders loading status
    ✓ defaults to verified when vaccinated=true without status
    ✓ defaults to not-found when vaccinated=false without status
    ✓ renders unknown status as not-found
    ✓ verified badge uses green background
    ✓ not-found badge uses red background
    ✓ revoked badge uses red background
    ✓ badge uses white text for contrast
    ✓ badge meets minimum height (minHeight 2rem)
    ✓ badge has role="status" for accessibility
    ✓ badge has aria-label when verified
    ✓ badge has aria-label when not verified
    ✓ SVG icons have aria-hidden to avoid duplicate announcements

closes #286

[drips-wave]

@GreatShinro Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits