[Devin] fix: add alt attribute to product images for accessibility

[devin-ai-integration]

What

All product card images (<img> tags) are missing the alt attribute, which is an accessibility violation (WCAG 2.1 Success Criterion 1.1.1). Screen readers cannot describe the product images, and some browsers log console warnings.

Where

File: app/main.js
Line: 69 (inside ProductCard component's <img> tag)

How I found it

• Browser interaction: Inspected the DOM and noticed all 8 product images had no alt attribute.
• Static analysis: The <img src={product.image} /> tag had no alt prop — confirmed by a comment in the code: {/* BUG 3: img is missing alt attribute */}.
• Playwright verification: Programmatically checked all images:

Image 0: alt='None'
Image 1: alt='None'
...
Image 7: alt='None'

Evidence

All 8 product images confirmed missing alt attributes via Playwright DOM inspection.

Fix

Added alt={product.name} to the <img> tag so each product image has a descriptive alt text matching the product name (e.g., "Merino Crew Sweater").

Confidence

High — This is a clear accessibility violation with a straightforward fix.

Summary

Adds missing alt attributes to product images using the product name for accessibility compliance.

Review & Testing Checklist for Human

• Inspect any product image in the DOM — verify it has an alt attribute matching the product name
• Run an accessibility audit (Lighthouse or axe) to confirm the image alt violation is resolved

Notes

Found via static analysis and confirmed with Playwright DOM inspection.

Link to Devin session: https://app.devin.ai/sessions/3b3d59c7eee04cea9069529fd6fff39d
Requested by: @scoobycoder

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
devin-ai-kata	Ready	Preview, Comment	Apr 26, 2026 7:48pm