From d3eeffded1ee91923098e1c4d577308526a238d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 27 Sep 2023 17:34:04 +0200
Subject: [PATCH] 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      | 40 +++++++++++++++++++
 app/assets/stylesheets/mixins/sdg.scss        | 12 +++---
 .../stylesheets/proposals/geozones.scss       |  5 +++
 .../proposals/geozones_component.html.erb     | 13 +++---
 4 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/stylesheets/proposals/geozones.scss

diff --git a/app/assets/stylesheets/mixins/links.scss b/app/assets/stylesheets/mixins/links.scss
index e4fe18102..9163c627a 100644
--- a/app/assets/stylesheets/mixins/links.scss
+++ b/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;
 
diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss
index ecb5de882..76442f551 100644
--- a/app/assets/stylesheets/mixins/sdg.scss
+++ b/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;
     }
   }
 }
diff --git a/app/assets/stylesheets/proposals/geozones.scss b/app/assets/stylesheets/proposals/geozones.scss
new file mode 100644
index 000000000..c259d7614
--- /dev/null
+++ b/app/assets/stylesheets/proposals/geozones.scss
@@ -0,0 +1,5 @@
+.proposals-geozones {
+  a {
+    @include focus-outline-on-img;
+  }
+}
diff --git a/app/components/proposals/geozones_component.html.erb b/app/components/proposals/geozones_component.html.erb
index efcbb7e93..8acfa91b6 100644
--- a/app/components/proposals/geozones_component.html.erb
+++ b/app/components/proposals/geozones_component.html.erb
@@ -1,6 +1,9 @@
 <div class="sidebar-divider"></div>
-<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 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>