Make /alert page RSS links clickable

Fixes a bug that appears to have been introduced in edf8456, where the
RSS icons on the /alert page were being stacked behind the relatively
positioned form labels, making them unclickable.

While I was there, I also standardised the markup for all three RSS
images to use the translatable alt text and double quotes for the HTML
attributes.

Fixes #2624.

3 files changed, 21 insertions, 10 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 456be61d1..18197b9ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,7 @@
         - Don't include lat/lon of private reports in ‘Report another problem
           here’ link.
         - Allow contact send method to be unset always.
+        - Fix z-index stacking bug that was causing unclickable RSS icons on /alert page. #2624
     - Front end improvements:
         - Set report title autocomplete to off to prevent email autocompleting
     - Development improvements:
diff --git a/templates/web/base/alert/_list.html b/templates/web/base/alert/_list.html
index d997a5abb..b9d955466 100644
--- a/templates/web/base/alert/_list.html
+++ b/templates/web/base/alert/_list.html
@@ -23,7 +23,9 @@
   [% END %]
 
   <p id="rss_local">
-    <a href="[% rss_feed_uri %]"><img src='/i/feed.png' width='16' height='16' title='[% loc('RSS feed of nearby problems') %]' alt='[% loc('RSS feed') %]' border='0'></a>
+    <a href="[% rss_feed_uri %]" class="alerts-rss-link">
+      <img src="/i/feed.png" width="16" height="16" title="[% loc('RSS feed of nearby problems') %]" alt="[% loc('RSS feed') %]">
+    </a>
     <label class="label-containing-checkbox" for="[% rss_feed_id %]">
       <input type="radio" name="feed" id="[% rss_feed_id %]" value="[% rss_feed_id %]"[% IF rss_feed_id == selected_feed || selected_feed == '' %] checked[% END %]>
       [% tprintf( loc('Problems within %.1fkm of %s'), population_radius, name_of_location ) %]
@@ -38,8 +40,9 @@
 
   [% FOREACH option IN options %]
     <p>
-      <a href="[% option.uri %]"><img src="/i/feed.png" width="16" height="16"
-title="[% option.rss_text %]" alt="RSS feed" border="0"></a>
+      <a href="[% option.uri %]" class="alerts-rss-link">
+        <img src="/i/feed.png" width="16" height="16" title="[% option.rss_text %]" alt="[% loc('RSS feed') %]">
+      </a>
       <label class="label-containing-checkbox" for="[% option.id %]">
         <input type="radio" name="feed" id="[% option.id %]" value="[% option.id %]"[% IF option.id == selected_feed %] checked[% END %]>
         [% option.text %]
@@ -55,8 +58,9 @@ title="[% option.rss_text %]" alt="RSS feed" border="0"></a>
 
     [% FOREACH option IN reported_to_options %]
       <p>
-        <a href="[% option.uri %]"><img src="/i/feed.png" width="16" height="16"
-    title="[% option.rss_text %]" alt="RSS feed" border="0"></a>
+        <a href="[% option.uri %]" class="alerts-rss-link">
+          <img src="/i/feed.png" width="16" height="16" title="[% option.rss_text %]" alt="[% loc('RSS feed') %]">
+        </a>
         <label class="label-containing-checkbox" for="[% option.id %]">
           <input type="radio" name="feed" id="[% option.id %]" value="[% option.id %]"[% IF option.id == selected_feed %] checked[% END %]>
           [% option.text %]
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 32a85fa04..2d67b3986 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -2377,11 +2377,17 @@ a#geolocate_link.loading, .btn--geolocate.loading {
     .a {
         background: #f6f6f6;
     }
-    img[width="16"] {
-        margin-top: 4px;
-        margin-#{$left}: 0.5em;
-        float: $right;
-    }
+}
+
+.alerts-rss-link {
+  position: relative;
+  z-index: 1; // stack in front of the position:relative .label-containing-checkbox
+
+  img {
+    margin-top: 4px;
+    margin-#{$left}: 0.5em;
+    float: $right;
+  }
 }
 
 .alerts__nearby-activity {