Fix P2 audit issues in ProviderCard — image a11y, token compliance

- Add role="img" + aria-label to hero image for screen readers
- Logo shadow: hardcoded rgba → var(--fa-shadow-sm)
- Logo border: hardcoded white → var(--fa-color-white) for theme consistency
- Audit score: 17/20 (Good), 0 P0/P1, 3 P2 fixed, 3 P3 noted

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 19:57:23 +11:00
parent b0ea3144e1
commit 74a5469ba7

View File

@@ -131,6 +131,8 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
{/* ── Image area (verified only) ── */}
{showImage && (
<Box
role="img"
aria-label={`Photo of ${name}`}
sx={{
position: 'relative',
height: IMAGE_HEIGHT,
@@ -167,8 +169,8 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
borderRadius: LOGO_BORDER_RADIUS,
objectFit: 'cover',
backgroundColor: 'background.paper',
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
border: '2px solid white',
boxShadow: 'var(--fa-shadow-sm)',
border: '2px solid var(--fa-color-white)',
}}
/>
)}