NIN-11 | Improve accessibility for Modal and Button components

[avicrayyy]

Overview

This branch focused on enhancing accessibility across the application by adding comprehensive ARIA labels to interactive elements, particularly in the Modal component and related UI components. These improvements ensure better screen reader support and overall accessibility compliance.

Changes Made

1. Button Component Enhancement (app/components/ui/Button.tsx)

• Added: Optional aria-label prop support
• Impact: Allows buttons to have descriptive labels for screen readers when text alone isn't sufficient
• Usage: Can now pass aria-label prop to any Button component for enhanced accessibility

<Button onClick={handleClick} aria-label="Close modal dialog">
  Close
</Button>

2. Modal Footer Button (app/components/ui/Modal/index.tsx)

• Added: Descriptive aria-label combining footerButtonText and title
• Format: "${footerButtonText} ${title}"
• Example: "Continue CHEAT UNLOCKED" or "CONFIRM RESET PROGRESS"
• Rationale: Provides context about both the action and the modal dialog

<Button
  onClick={handleClick}
  aria-label={`${footerButtonText} ${title}`}
>
  {footerButtonText}
</Button>

3. Welcome Modal ARIA Label (app/components/ControllerPlayground/index.tsx)

• Fixed: Welcome modal now has explicit ariaLabel instead of undefined
• Value: "Welcome to Nintroller"
• Impact: Screen readers can now properly announce the welcome modal

4. AuthorContent Component (app/components/ui/Modal/content/AuthorContent.tsx)

• Added ARIA labels to all links:
  • Profile image link: "Visit daviddomingo.dev - David Domingo's website"
  • GitHub link: "View @avicrayyy on GitHub"
  • Website link: "Visit daviddomingo.dev"
• Added aria-hidden="true" to decorative icons:
  • GitHubIcon and GlobeIcon are now hidden from screen readers
  • Icons are purely decorative since links have descriptive text

Files Changed

M  app/components/ui/Button.tsx
M  app/components/ui/Modal/index.tsx
M  app/components/ControllerPlayground/index.tsx
M  app/components/ui/Modal/content/AuthorContent.tsx
M  __tests__/components/Modal.test.tsx

Testing Updates

Modal Tests

• Updated footer button tests to match new aria-label format
• Tests now expect: "Confirm Test Modal" instead of just "Confirm"
• All 24 tests passing ✅

Test Coverage

• Existing accessibility tests continue to pass
• New ARIA labels are validated through existing test suite
• No breaking changes to component APIs

Accessibility Improvements

Screen Reader Support

• Better context: Footer buttons now announce both action and modal context
• Descriptive links: All external links have clear, descriptive labels
• Decorative elements: Icons are properly hidden when decorative

ARIA Best Practices

• ✅ All interactive elements have descriptive labels
• ✅ Decorative icons use aria-hidden="true"
• ✅ Modal dialogs have proper aria-label attributes
• ✅ Links have context-aware labels

Impact

Benefits

• WCAG Compliance: Improved alignment with WCAG 2.1 accessibility guidelines
• Screen Reader Support: Better experience for users relying on assistive technology
• Maintainability: Consistent ARIA labeling patterns across components
• User Experience: Clearer context for all interactive elements

No Breaking Changes

• All changes are additive (new optional props)
• Existing functionality remains unchanged
• Backward compatible with existing code

Related Components

• app/components/ui/Button.tsx - Base button component with ARIA support
• app/components/ui/Modal/index.tsx - Modal component with enhanced labels
• app/components/ui/Modal/content/AuthorContent.tsx - Author information modal
• app/components/ControllerPlayground/index.tsx - Main playground orchestrator

Notes for Maintainers

When Adding New Buttons

• If button text is clear and descriptive, aria-label is optional
• For icon-only buttons, always provide aria-label
• For buttons in modals, consider including modal context in the label

When Adding New Links

• External links should have descriptive aria-label attributes
• Format: "Action destination" (e.g., "Visit example.com")
• Decorative icons next to links should use aria-hidden="true"

Modal Footer Buttons

• Footer buttons automatically get aria-label combining text and title
• Format: "${footerButtonText} ${title}"
• This provides context about both the action and the dialog

Testing ARIA Labels

• Use getByRole with name option to test ARIA labels
• Example: screen.getByRole("button", { name: "Confirm Test Modal" })
• Screen reader testing tools can validate actual announcements

Future Considerations

• Consider adding aria-describedby for additional context when needed
• May want to add aria-labelledby for complex modal structures
• Consider adding skip links for keyboard navigation
• Could add aria-live regions for dynamic content updates (already implemented for cheat unlocks)

Accessibility Checklist

• ✅ All interactive elements have accessible names
• ✅ Decorative icons are hidden from assistive technology
• ✅ Modal dialogs have descriptive labels
• ✅ External links have clear, descriptive labels
• ✅ Button components support optional ARIA labels
• ✅ Tests validate ARIA attributes

[vercel]

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

Project	Deployment	Review	Updated (UTC)
nintroller	Ready	Preview, Comment	Jan 9, 2026 11:33am