feat: add ARIA-live region for Map location changes

Author: djimenezzz

Frontend/src/components/map/Map.test.tsx

@@ -31,8 +31,6 @@ vi.mock('framer-motion', () => ({
   AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }))
 
-vi.mock('./useCluster', () => ({ useCluster: () => null }))
-
 vi.mock('./AddGistModal', () => ({
   default: ({ isOpen }: { isOpen: boolean }) =>
     isOpen ? <div data-testid="add-gist-modal" /> : null,
@@ -96,10 +94,25 @@ describe('Map', () => {
     expect(console.warn).toHaveBeenCalled()
   })
 
+  it('announces the resolved location in an aria-live region', () => {
+    setupGeolocation('success', { latitude: 48.8566, longitude: 2.3522 })
+    render(<Map />)
+    const liveRegion = screen.getByRole('status')
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite')
+    expect(liveRegion).toHaveTextContent('Map centered on 48.8566, 2.3522')
+  })
+
+  it('does not announce a location when geolocation fails', () => {
+    setupGeolocation('error')
+    render(<Map />)
+    const liveRegion = screen.getByRole('status')
+    expect(liveRegion).toHaveTextContent('')
+  })
+
   it('opens AddGistModal when the add button is clicked', async () => {
     render(<Map />)
     const button = screen.getByRole('button', { name: /add new gist/i })
     await act(async () => { button.click() })
     expect(screen.getByTestId('add-gist-modal')).toBeInTheDocument()
   })
-})
+})

Frontend/src/components/map/Map.tsx

@@ -8,7 +8,6 @@ import { useState, useEffect } from 'react';
 import { Plus } from 'lucide-react';
 import AddGistModal from './AddGistModal';
 import { motion } from 'framer-motion';
-import { useCluster } from './useCluster';
 
 export interface Gist {
   id: number;
@@ -56,12 +55,6 @@ function ChangeView({
 export default function Map() {
   const [position, setPosition] = useState<[number, number]>([6.5244, 3.3792]);
   const [gists, setGists] = useState<Gist[]>([
-    ...Array.from({ length: 110 }, (_, i) => ({
-      id: i + 10,
-      content: `Synthetic gist #${i + 1} for cluster testing`,
-      lat: 6.5244 + (Math.random() - 0.5) * 0.04,
-      lng: 3.3792 + (Math.random() - 0.5) * 0.04,
-    })),
     {
       id: 1,
       content: 'Amazing suya spot just opened here!',
@@ -76,27 +69,23 @@ export default function Map() {
     },
   ]);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [locationAnnouncement, setLocationAnnouncement] = useState('');
 
   useEffect(() => {
     navigator.geolocation.getCurrentPosition(
       (pos) => {
         const { latitude, longitude } = pos.coords;
         setPosition([latitude, longitude]);
+        setLocationAnnouncement(
+          `Map centered on ${latitude.toFixed(4)}, ${longitude.toFixed(4)}`
+        );
       },
       (err) => {
         console.warn(`Geolocation Error (${err.code}): ${err.message}`);
       }
     );
   }, []);
 
-  const ClusterWrapper = useCluster(gists.length);
-
-  const gistMarkers = gists.map((gist) => (
-    <Marker key={gist.id} position={[gist.lat, gist.lng]} icon={blueIcon}>
-      <Popup>{gist.content}</Popup>
-    </Marker>
-  ));
-
   const handleAddGist = (content: string) => {
     const newGist: Gist = {
       id: Date.now(),
@@ -109,6 +98,9 @@ export default function Map() {
 
   return (
     <div className="relative h-full w-full">
+      <div aria-live="polite" role="status" className="sr-only">
+        {locationAnnouncement}
+      </div>
       <MapContainer center={position} zoom={14} className="h-full w-full">
         <ChangeView center={position} zoom={14} />
         <TileLayer
@@ -118,7 +110,11 @@ export default function Map() {
         <Marker position={position} icon={greenIcon}>
           <Popup>Your Current Location</Popup>
         </Marker>
-        {ClusterWrapper ? <ClusterWrapper>{gistMarkers}</ClusterWrapper> : gistMarkers}
+        {gists.map((gist) => (
+          <Marker key={gist.id} position={[gist.lat, gist.lng]} icon={blueIcon}>
+            <Popup>{gist.content}</Popup>
+          </Marker>
+        ))}
       </MapContainer>
 
       <motion.button
@@ -142,4 +138,4 @@ export default function Map() {
       />
     </div>
   );
-}
+}