Fix focus outline on links containing images

In some cases, like SDG icons and the proposals map, the image was
bigger than the link containing it, resulting in a funny-looking outline
on focus.

For reasons I don't understand, using `&:active,&:focus:active` didn't
compile to the CSS I was expecting, so I'm repeating the same code for
these two separate cases.

app/assets/stylesheets/mixins/links.scss

@@ -1,3 +1,43 @@
+@mixin focus-outline-on-img {
+  &:focus {
+    outline: none;
+
+    img {
+      outline: $outline-focus;
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    img {
+      outline: $outline-focus;
+    }
+  }
+
+  &:focus:not(:focus-visible) {
+    img {
+      outline: none;
+    }
+  }
+
+  &:active {
+    outline: none;
+
+    img {
+      outline: $outline-focus;
+    }
+  }
+
+  &:focus:active {
+    outline: none;
+
+    img {
+      outline: $outline-focus;
+    }
+  }
+}
+
 @mixin card {
   position: relative;
 

app/assets/stylesheets/mixins/sdg.scss

@@ -24,6 +24,10 @@
   a:hover .sdg-goal-icon {
     filter: brightness(90%);
   }
+
+  a {
+    @include focus-outline-on-img;
+  }
 }
 
 %sdg-goal-list {
@@ -47,12 +51,8 @@
       width: 100%;
     }
 
-    a:focus {
-      outline: none;
-
-      img {
-        outline: $outline-focus;
-      }
+    a {
+      @include focus-outline-on-img;
     }
   }
 }

app/assets/stylesheets/proposals/geozones.scss

@@ -0,0 +1,5 @@
+.proposals-geozones {
+  a {
+    @include focus-outline-on-img;
+  }
+}

app/components/proposals/geozones_component.html.erb

@@ -1,6 +1,9 @@
 <div class="sidebar-divider"></div>
+
+<div class="proposals-geozones">
   <h2 class="sidebar-title"><%= t("shared.tags_cloud.districts") %></h2>
   <br>
   <%= link_to map_proposals_path, id: "map", title: t("shared.tags_cloud.districts_list") do %>
     <%= image_tag(image_path_for("map.jpg"), alt: t("shared.tags_cloud.districts_list")) %>
   <% end %>
+</div>