Bosu - fix: make community member email clickable

[BosuBose132]

PR Description

Description

Fixes the Community Members page email interaction issue in the HGN Help Dashboard.

On /hgnhelp/community, community member email addresses were displayed as plain text and could not be clicked. This update makes the displayed email address a semantic mailto: link so selecting it opens the user's configured/default email client with the corresponding email address.

The implementation is intentionally limited to the email interaction and preserves the existing Community Member card layout, email icon, Slack information, Redux logic, and other functionality.

Fixes: Bug list item – Make email addresses clickable on the HGN Questionnaire / Community Members page.

Related PRS (if any):

• Related frontend PR: Rishwa - Set up routes and folder structure for HGN Help Dashboard #3360 – original HGN Help Dashboard routes and folder structure.
• No backend changes are required for this fix.

Main changes explained:

• Updated src/components/HGNHelpSkillsDashboard/UserCard.jsx to replace the plain-text email <span> with a semantic <a> element using href="mailto:...".
• Added an accessible aria-label to the email link using the community member's name.
• Updated src/components/HGNHelpSkillsDashboard/style/UserCard.module.css with a focused contactLink style.
• Preserved the existing email color by inheriting the surrounding contact-line styling, including dark mode.
• Added underline behavior on hover and keyboard focus to provide a visual indication that the email is clickable.
• Left the existing email icon, Slack functionality, card layout, routing, and other functionality unchanged.
• No new dependencies were introduced.

How to test:

1. Checkout this branch:

git checkout Bosu-fix-community-email-link

2. Install dependencies if needed and start the frontend locally:

nvm use 20
npm install
npm run start:local

3. Clear the browser site data/cache if necessary.

4. Log in using a valid test account.

5. Navigate to:

/hgnhelp/community

6. Locate a Community Member card that contains an email address.

7. Verify that:

   • The email address displays correctly.
   • Hovering over the email provides an underline indicating that it is clickable.
   • Clicking the email triggers the browser/operating system's configured email client.
   • The generated link uses the correct mailto: email address.
   • The Community Member card layout and email icon remain unchanged.
   • Slack information and existing card functionality continue to behave as before.
   • A member without an email does not display a broken or empty email link.

8. Verify the page in light mode.

9. Verify the new email-link behavior and styling in dark mode.

Screenshots or videos of changes:

Before:
Community member email addresses were displayed as plain text and had no click behavior.

After:
Community member email addresses are clickable mailto: links that open the user's configured email client while preserving the existing card styling.

Note:

This is a frontend-only, narrowly scoped change. No backend/API changes or additional dependencies are required. The browser or operating system determines which configured mail application handles the mailto: link.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	7e52c13
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a80a6fe51b17a00087771b8
😎 Deploy Preview	https://deploy-preview-5447--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud