feat: update map overlay to 'Unlock map' with unlock icon

frontend/__tests__/unit/components/ChapterMap.test.tsx

@@ -266,24 +266,24 @@ describe('ChapterMap', () => {
   })
 
   describe('Interactive Overlay', () => {
-    it('displays overlay with "Click to interact with map" message initially', () => {
+    it('displays overlay with "Unlock map" message initially', () => {
       const { getByText } = render(<ChapterMap {...defaultProps} />)
-      expect(getByText('Click to interact with map')).toBeInTheDocument()
+      expect(getByText('Unlock map')).toBeInTheDocument()
     })
 
     it('removes overlay when clicked', () => {
       const { getByText, queryByText } = render(<ChapterMap {...defaultProps} />)
 
-      const overlay = getByText('Click to interact with map').closest('button')
+      const overlay = getByText('Unlock map').closest('button')
       fireEvent.click(overlay!)
 
-      expect(queryByText('Click to interact with map')).not.toBeInTheDocument()
+      expect(queryByText('Unlock map')).not.toBeInTheDocument()
     })
 
     it('enables scroll wheel zoom when overlay is clicked', () => {
       const { getByText } = render(<ChapterMap {...defaultProps} />)
 
-      const overlay = getByText('Click to interact with map').closest('button')
+      const overlay = getByText('Unlock map').closest('button')
       fireEvent.click(overlay!)
 
       expect(mockMap.scrollWheelZoom.enable).toHaveBeenCalled()
@@ -292,7 +292,7 @@ describe('ChapterMap', () => {
     it('handles keyboard interaction with Enter key', () => {
       const { getByText } = render(<ChapterMap {...defaultProps} />)
 
-      const overlay = getByText('Click to interact with map').closest('button')
+      const overlay = getByText('Unlock map').closest('button')
       fireEvent.keyDown(overlay!, { key: 'Enter' })
 
       expect(mockMap.scrollWheelZoom.enable).toHaveBeenCalled()
@@ -301,7 +301,7 @@ describe('ChapterMap', () => {
     it('handles keyboard interaction with Space key', () => {
       const { getByText } = render(<ChapterMap {...defaultProps} />)
 
-      const overlay = getByText('Click to interact with map').closest('button')
+      const overlay = getByText('Unlock map').closest('button')
       fireEvent.keyDown(overlay!, { key: ' ' })
 
       expect(mockMap.scrollWheelZoom.enable).toHaveBeenCalled()
@@ -310,9 +310,9 @@ describe('ChapterMap', () => {
     it('has proper accessibility attributes', () => {
       const { getByText } = render(<ChapterMap {...defaultProps} />)
 
-      const overlay = getByText('Click to interact with map').closest('button')
+      const overlay = getByText('Unlock map').closest('button')
       expect(overlay).toHaveAttribute('tabIndex', '0')
-      expect(overlay).toHaveAttribute('aria-label', 'Click to interact with map')
+      expect(overlay).toHaveAttribute('aria-label', 'Unlock map')
     })
   })
 

frontend/src/components/ChapterMap.tsx

@@ -2,6 +2,8 @@
 import L, { MarkerClusterGroup } from 'leaflet'
 import React, { useEffect, useRef, useState } from 'react'
 import type { Chapter } from 'types/chapter'
+import { faLockOpen } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'leaflet.markercluster'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -144,10 +146,11 @@ const ChapterMap = ({
               setIsMapActive(true)
             }
           }}
-          aria-label="Click to interact with map"
+          aria-label="Unlock map"
         >
-          <p className="rounded-md bg-white/90 px-5 py-3 text-sm font-medium text-gray-700 shadow-lg dark:bg-gray-700 dark:text-white">
-            Click to interact with map
+          <p className="flex items-center gap-2 rounded-md bg-white/90 px-5 py-3 text-sm font-medium text-gray-700 shadow-lg dark:bg-gray-700 dark:text-white">
+            <FontAwesomeIcon icon={faLockOpen} className="h-4 w-4" />
+            Unlock map
           </p>
         </button>
       )}