Enable outlines for features on :focus-visible (keyboard only) (#498)

Author: Malvoz

src/mapml/features/featureRenderer.js

@@ -43,7 +43,7 @@ export var FeatureRenderer = L.SVG.extend({
     for (let p of layer._parts) {
       if (p.rings){
         this._createPath(p, layer.options.className, layer.featureAttributes['aria-label'], layer.options.interactive, layer.featureAttributes);
-        if(layer.outlinePath) p.path.style.stroke = "none";
+        //if(layer.outlinePath) p.path.style.stroke = "none";
       }
       if (p.subrings) {
         for (let r of p.subrings) {

src/mapml/layers/FeatureLayer.js

@@ -17,19 +17,28 @@ export var MapMLFeatures = L.FeatureGroup.extend({
         style.innerHTML = `
         g[role="link"]:focus,
         g[role="link"]:hover,
-        g[role="button"]:focus,
-        g[role="button"]:hover,
+        g[role="link"]:focus path,
+        g[role="link"]:hover path,
         g[role="link"] path:focus,
         g[role="link"] path:hover,
+        g[role="button"]:focus,
+        g[role="button"]:hover,
+        g[role="button"]:focus path,
+        g[role="button"]:hover path,
         g[role="button"] path:focus,
         g[role="button"] path:hover,
-        g[role="link"]:focus path,
-        g[role="link"]:hover path,
-        g[role="button"]:focus path,
-        g[role="button"]:hover path {
-          outline: 0!important;
+        path[tabindex="0"]:focus {
           stroke: #0000EE;
           stroke: LinkText;
+        }
+        g[role="link"]:focus:not(:focus-visible),
+        g[role="link"]:focus:not(:focus-visible) path,
+        g[role="link"] path:focus:not(:focus-visible),
+        g[role="button"]:focus:not(:focus-visible),
+        g[role="button"]:focus:not(:focus-visible) path,
+        g[role="button"] path:focus:not(:focus-visible),
+        path[tabindex="0"]:focus:not(:focus-visible) {
+          outline: 0!important;
         }`;
       }