React Azure Maps - AzureMapPopup not added to DOM unless isVisible property is set to true.

Question

I attempted to add accessible popups for each POI marker on the map, following this sample: https://samples.azuremaps.com/popups/accessible-popups, to make the map keyboard-navigable. However, I found that the popups weren't showing up when I pressed the Tab key.

I came across an open issue on the react-azure-maps GitHub (https://github.com/Azure/react-azure-maps/issues/87), which explains that non-visible popups aren’t added to the DOM, meaning they can’t be accessed using tab-based navigation.

When the isVisible property is set to true, the popup is added to the DOM:

<AzureMapPopup
   isVisible
   options={{ position: [151.2116297510487, -33.874800092501204]  }}
   popupContent={
     <div aria-label='Description' style={{ padding: '20px' }}>
        <h3>Test</h3>
     </div>
   }
/>

However, if isVisible is not set or is set to false, the popup is not added to the DOM:

<AzureMapPopup
  options={{ position: [151.2116297510487, -33.874800092501204]  }}
  popupContent={
   <div aria-label='Description' style={{ padding: '20px' }}>
       <h3>Test</h3>
   </div>
  }
 />

I’ve tried some workarounds, such as initialising the popups with isVisible=true and then using setTimeout to switch it back to false, but this approach doesn’t offer a good user experience on initial load.

Can anyone suggest a better workaround or, ideally, a fix?

Thanks!

Answer 1

I believe this might be completely limited to the React control as that is not how Azure Maps usually works. You can see samples for accessible popups in the standard Azure Maps here: https://samples.azuremaps.com/?search=accessible

I would recommend raising this as an issue in the Github project of the React project.