tabbing, titles and aria-labels

theopensystemslab · Sep 21, 2021 · e899673 · e899673
1 parent 7505e35
commit e899673
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/my-map.ts b/src/my-map.ts
@@ -36,6 +36,9 @@ export class MyMap extends LitElement {
       transition: opacity 0.25s;
       overflow: hidden;
     }
+    #map:focus {
+      outline: #424242 solid 0.15em;
+    }
     .reset-control {
       top: 70px;
       left: 0.5em;
@@ -110,6 +113,9 @@ export class MyMap extends LitElement {
   @property({ type: String })
   areaUnit: AreaUnitEnum = "m2"
 
+  @property({ type: String })
+  ariaLabel = "Interactive map";
+
   // runs after the initial render
   firstUpdated() {
     const target = this.shadowRoot?.querySelector("#map") as HTMLElement;
@@ -153,7 +159,7 @@ export class MyMap extends LitElement {
     // add a custom 'reset' control below zoom
     const button = document.createElement("button");
     button.innerHTML = "↻";
-    button.title = "Reset view";
+    button.title = "Reset map view";
 
     const handleReset = () => {
       if (this.showFeaturesAtPoint) {
@@ -304,7 +310,10 @@ export class MyMap extends LitElement {
   render() {
     return html`<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
       <link rel="stylesheet" href="https://cdn.skypack.dev/ol@^6.6.1/ol.css" />
-      <div id="map" />`;
+      <div 
+        id="map" 
+        tabindex="0"
+        aria-label=${this.ariaLabel} />`;
   }
 
   /**