[Devin] fix: add type=button and aria attributes to sort button

[devin-ai-integration]

What

The sort button is missing type="button", aria-label, and aria-pressed attributes. Without type="button", if the button is ever inside a form context, browsers may treat it as a submit button and reload the page. The missing ARIA attributes make the button inaccessible to screen readers.

Where

File: app/main.js
Lines: 159–171 (SortButton component)

How I found it

• Browser interaction: Clicked the sort button — it worked visually, but inspecting the DOM revealed no type, aria-label, or aria-pressed attributes.
• Static analysis: The <button> tag had no type, aria-label, or aria-pressed props. A code comment confirmed: // Missing: type="button", aria-pressed, aria-label.
• Playwright verification:

Sort button type: None
Sort button aria-label: None
Sort button aria-pressed: None

Evidence

Playwright DOM inspection confirmed all three attributes missing.

Fix

• Added type="button" to prevent unintended form submissions
• Added aria-label with descriptive text that updates based on sort direction
• Added aria-pressed={sortAsc} to communicate toggle state to assistive technologies

Confidence

High — Clear accessibility violation with well-defined ARIA patterns for toggle buttons.

Summary

Adds missing type and ARIA attributes to the sort button for accessibility and correctness.

Review & Testing Checklist for Human

• Inspect the sort button in DevTools — verify type="button", aria-label, and aria-pressed are present
• Click the sort button — verify aria-pressed toggles and aria-label updates
• Run a Lighthouse accessibility audit to confirm improvement

Notes

Found via static analysis and confirmed with Playwright DOM attribute 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:49pm