added keyboard navigation to map

[chughes-lincoln]

Currently map navigation works if the user navigates to essentially any element within the map (the +/- buttons, the OpenStreetMap citation), which doesn't make it obvious to the user that navigation works.

This allows the map to receive keyboard focus, which allows users then navigate the map with the keyboard. It also assigns the map the application role, which allows map navigation to work by default with the screen reader I was testing.

I do think an aria-label should also be assigned (I added it in the same location as the tabIndex when I was testing, and it worked). However, I feel like that's something that site admin's should be able to configure for the site themselves, or at the very least should respect the site's language settings, which I wasn't sure how to do. Perhaps by adding const { t } = useTranslation(); as well as aria-label={t("map-label")} with map-label corresponding to new entries in the language json files?

[chughes-lincoln]

This introduces a new bug. It now forces you to click on the map before you zoom in or out, which is very annoying

[chughes-lincoln]

Similar to this issue - openlayers/openlayers#11102

[theduckylittle]

Thought on adding some global keyboard short cuts for moving the map?

Possibly Shift + Up/Down/Left/Right? Not sure if this is totally obvious or how we'd expose it to users who may visual impairments.

[chughes-lincoln]

So you could essentially navigate the map without it being in focus? I think that could be really useful. One of my main complaints is when you have a lot of results and need to Tab past all of them to navigate to the map.

My main concern would be conflicts with other keyboard shortcuts (Shift+Arrow keys can be used to select text; on my keyboard I need to not hold shift to hit the minus key, this would essentially break that (if we were also adding Shift as a shortcut for zoom in or out)).