GeoMap: Pan and zoom keyboard support (#86573)

* Make GeoMap keyboards navigable

* Remove redundant interaction boolean

* Fix tabIndex error and set role to application

* Update docs

docs/sources/panels-visualizations/visualizations/geomap/index.md

@@ -44,6 +44,8 @@ Geomaps allow you to view and customize the world map using geospatial data. You
 
 {{< figure src="/static/img/docs/geomap-panel/geomap-example-8-1-0.png" max-width="1200px" caption="Geomap panel" >}}
 
+Pan the map, while it's in focus, by using the arrow keys. Zoom in and out by using the `+` and `-` keys.
+
 The following video provides beginner steps for creating geomap visualizations. You'll learn the data requirements and caveats, special customizations, preconfigured displays and much more:
 
 {{< youtube id="HwM8AFQ7EUs" >}}

public/app/plugins/panel/geomap/GeomapPanel.tsx

@@ -384,7 +384,14 @@ export class GeomapPanel extends Component<Props, State> {
       <>
         <Global styles={this.globalCSS} />
         <div className={styles.wrap} onMouseLeave={this.clearTooltip}>
-          <div className={styles.map} ref={this.initMapRef}></div>
+          <div
+            role="application"
+            className={styles.map}
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={0} // Interactivity is added through the ref
+            aria-label={`Navigable map`}
+            ref={this.initMapRef}
+          ></div>
           <GeomapOverlay
             bottomLeft={legends}
             topRight1={topRight1}