fix: improve accessibility across marketplace and interactive components

[vic-Gray]

Summary

This PR improves the accessibility of SkillSphere's interactive components, with a focus on keyboard navigation, screen reader support, modal behavior, semantic HTML, and visual contrast.

The changes address accessibility warnings identified across components such as Navbar.tsx, FundSessionModal.tsx, Sidebar.tsx, and other interactive elements involved in the marketplace booking flow.

Changes Made

♿ ARIA and Screen Reader Improvements

• Added missing aria-label attributes to interactive controls where visible text alone does not sufficiently describe their purpose.
• Added aria-expanded attributes to collapsible navigation and menu controls.
• Ensured interactive controls expose meaningful states to assistive technologies.
• Improved semantic relationships between controls and the content they operate on.

⌨️ Keyboard Navigation

• Audited interactive components for keyboard accessibility.
• Replaced non-semantic clickable <div> elements with appropriate <button> elements.
• Ensured interactive controls can be reached and activated using standard keyboard controls.
• Verified the marketplace booking flow can be completed using Tab, Enter, and Escape.

🔒 Modal Focus Management

• Implemented focus trapping for open modal dialogs.
• Prevented keyboard focus from moving behind an active modal.
• Ensured focus remains within the modal while it is open.
• Added Escape key handling to allow users to close modals without requiring a mouse.
• Improved modal interaction behavior for keyboard-only and screen-reader users.

🎨 Visual Accessibility

• Reviewed interactive elements for insufficient color contrast.
• Updated affected foreground/background combinations to improve readability and accessibility.
• Ensured important controls and states remain visually distinguishable.

Components Audited

The accessibility improvements include, but are not limited to:

• Navbar.tsx
• FundSessionModal.tsx
• Sidebar.tsx
• Marketplace booking interactions
• Collapsible navigation controls
• Modal/dialog interactions
• Other clickable interactive elements identified during the accessibility audit

Acceptance Criteria

• Users can navigate the marketplace booking flow using Tab.
• Interactive controls can be activated using Enter.
• Modals can be dismissed using Escape.
• Keyboard focus cannot escape an open modal.
• Screen readers receive clear labels and states for interactive controls.
• Collapsible controls expose their expanded/collapsed state through aria-expanded.
• Clickable non-semantic elements have been replaced with semantic buttons where appropriate.
• Identified color contrast issues have been addressed.

Testing

The updated interactions should be tested with:

• Keyboard-only navigation
• Tab / Shift + Tab
• Enter
• Escape
• Screen reader navigation
• Modal open/close behavior
• Marketplace booking flow from start to completion
• Collapsible sidebar/navigation controls
• Different viewport sizes

Expected Result

SkillSphere should provide a more consistent and accessible experience for users who rely on keyboards or assistive technologies, while maintaining the existing functionality and visual behavior of the application.
Closes #440

[vercel]

@vic-Gray is attempting to deploy a commit to the luluameh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 940bb5a6-c276-4049-af94-60f258ce2163

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Luluameh]

LGTM