Accessible shape selection

This sample shows how to add keyboard selection support to shapes by leveraging hidden popups. To make things a bit more advanced, rather than simply displaying a popup, this sample displays the content in a custom display panel. Use the tab key to step through the shapes on the map.

Ideas to take things further;

• Sort the polygons based on their most north western coordinate. This will make it so the tab order, when the map isn't rotated is left to right, top to bottom.'
• Set a limit to the number of popup's that are created. After a couple hundred popups the page will slow down. Additionally, users likely won't want to have to tab through hundreds of shapes. Consider creating/removing popups after the map has been moved and only creating those that are closest to the center of the map.
• Instead of highlighting the polygons by changing the color of the outline, create a highlight polygon from the bounding box of the shape to align with how accessibility tools typically highlight elements on a page.