Add accessibility to React-leaflet map

Question

Morning all, I've created an SPA with React-leaflet and its all working perfectly except when it comes to accessibility.

My map has multiple markers added automatically but when I try to tab into the map all I get is the zoom in/out buttons and the maps name, the markers are completely ignored so I cant add ARIA to them.

Does anyone know if its possible to add tabbing for each marker? Ideally I'd like to have it so when users tab onto a marker it reads the specific data, however if this isnt possible I'm open to suggestions.

Heres how I'm generating/populating the map if it helps:

Markers:--

const showDataOnMap = (countryList, y) => (
        countryList.map(country => (
            <Circle
                key = {country.country}
                center={[country.countryInfo.lat, country.countryInfo.long]}
                fillOpacity={0.4}
                pathOptions={{color:casesTypeColors[y].hex,
                fillColor:casesTypeColors[y].hex}}
                radius={
                    Math.sqrt(country[y] * 12000)
                }
                eventHandlers={{
                    click: () => {
                      console.log(mapRef.current)
                    },
                  }}
                tabIndex="0"
                aria-label="circle"
            >
                <Popup tabIndex="0" aria-live="polite" ref={mapRef}>
                    <div>
                        <img className="mapFlag" src={country.countryInfo.flag} alt={country.country} role="image"/>
                        {country.country}
                    </div>
                    <p>
                        {`${y}: ${numeral(country[y]).format("0,0")}`}
                    </p>
                </Popup>

            </Circle>
        )
    )
    )

Map:--

return (
    <div className="map" aria-label={`World-map-${active}`} tabIndex="0" role="application">
        <MapContainer center={coords} zoom={2}>
            <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            aria-label="Copyright-information"
            aria-hidden="true"
            />
            {showDataOnMap(table,checkActive())}
        </MapContainer>
    </div>
)

Answer 1

Sorted the issue. Adding ARIA to React leaflet components was the problem, it just kept ignoring them so I added a wrapper within Popup in my case and the issues resolved.

                 <Popup>
                    <div className="popWrapper" tabIndex="0" ref={mapRef}>
                    <div>
                        <img className="mapFlag" src={country.countryInfo.flag} alt={country.country} role="image" aria-hidden="true"/>
                        {country.country}
                    </div>
                    <p>
                        {`${y}: ${numeral(country[y]).format("0,0")}`}
                    </p>
                    </div>
                </Popup>

So now when the Circles clicked I force focus on the popWrapper div and the contents is read.