[P2] Icon buttons lack accessible labels for screen readers

[cursor]

Summary

Icon-only controls in the layout and profile header have no aria-label, so screen readers announce them generically (e.g., "button" instead of "Open navigation").

Impact

• Poor accessibility for screen reader users
• WCAG compliance issues
• Users can't understand button purposes without visual context

Files Affected

• src/components/Layout.tsx (lines 109-167)
• src/pages/AboutPage.tsx (lines 52-67)

Recommendation

Add meaningful aria-label attributes to all IconButton components:

<IconButton aria-label="Open navigation">
  <MenuIcon />
</IconButton>

<IconButton aria-label="Close navigation">
  <CloseIcon />
</IconButton>

<IconButton aria-label="GitHub profile">
  <GitHubIcon />
</IconButton>

<IconButton aria-label="LinkedIn profile">
  <LinkedInIcon />
</IconButton>

Labels to Add

• Drawer header: "Open navigation", "Close navigation"
• App bar controls
• Social links: "GitHub profile", "LinkedIn profile"

---

Source: Code Review (PR #5)

[jbdevprimary]

Fixed - All IconButtons have appropriate aria-label attributes for screen reader accessibility.