Fix(map): improve map overlay accessibility and add hover effects

[HarshitVerma109]

Close #2839
Enhanced the 'Unlock map' button by integrating an icon and implementing hover effects to improve user interactivity.

[coderabbitai]

Summary by CodeRabbit

• UI/UX Improvements

  • Map activation label changed to "Unlock map" and now includes an unlock icon for clearer visual affordance.
  • Visual presentation adjusted to combine icon and text for improved hover behavior and clarity.
  • Improved accessibility via a more descriptive activation aria-label.

• Tests

  • Test assertions updated to match the new activation text and icon.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Replaces the ChapterMap overlay/button label from "Click to interact with map" to "Unlock map", adds a FontAwesome unlock icon to the activation button, and updates unit test string assertions to match the new label.

Changes

Cohort / File(s)	Summary
Component UI update frontend/src/components/ChapterMap.tsx	Import faUnlock and render FontAwesomeIcon inside the map activation button; change aria-label and visible markup from "Click to interact with map" to icon + "Unlock map".
Test updates frontend/__tests__/unit/components/ChapterMap.test.tsx	Update test string literals and assertions to expect "Unlock map" and adjust queries retrieving the overlay/button accordingly.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Small, localized UI markup and test string updates.
• Check accessibility label change and correct FontAwesome import/usage.

Possibly related PRs

• test: add comprehensive unit tests for ChapterMap component #1874 — Prior update touching the same ChapterMap activation UI and tests; overlapping changes.
• Fix: Prevent Accidental Map Zooming While Scrolling on Landing Page #2508 — Earlier PR that introduced the ChapterMap interactive-overlay behavior which this PR modifies.

Suggested reviewers

• arkid15r

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title mentions improving accessibility and adding hover effects, which align with the changeset that updates button text and styling, though 'hover effects' are not explicitly detailed in the code changes.
Description check	✅ Passed	The description directly references issue #2839 and accurately describes enhancing the 'Unlock map' button with an icon and hover effects, matching the changeset scope.
Linked Issues check	✅ Passed	The code changes fully satisfy issue #2839 requirements: text changed from 'Click to interact with map' to 'Unlock map' and an unlock icon (faUnlock) was prepended before the text.
Out of Scope Changes check	✅ Passed	All changes are directly related to issue #2839: updating button text, adding the unlock icon, and refactoring the button structure. No extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 86ac123 and 63c0193.

📒 Files selected for processing (1)

• frontend/src/components/ChapterMap.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Run frontend e2e tests
• GitHub Check: Run backend tests
• GitHub Check: Run frontend unit tests
• GitHub Check: CodeQL (javascript-typescript)

🔇 Additional comments (3)

frontend/src/components/ChapterMap.tsx (3)

2-2: LGTM: Import addition is correct.

The faUnlock icon import is properly added to the existing Font Awesome import statement and is used correctly in the component.

---

198-198: LGTM: Aria-label matches visible text.

The updated aria-label "Unlock map" correctly matches the visible button text, which is excellent for accessibility and screen reader users.

---

200-203: Implementation is correct and verified.

The unlock icon is available in Font Awesome, and version 7.1.0 is the current release. The codebase correctly imports faUnlock from @fortawesome/free-solid-svg-icons@7.1.0 and applies aria-hidden="true" appropriately on the icon element. The flex layout and hover styles enhance UX as intended.

---

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 and usage tips.}

[HarshitVerma109]

@arkid15r
Please review

[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

[kasya]

@HarshitVerma109 this looks good, thank you!