Merge pull request #5745 from consuldemocracy/image_alt

Add missing alt attributes to images

app/components/shared/avatar_component.rb

@@ -49,7 +49,7 @@ class Shared::AvatarComponent < ApplicationComponent
         width: size,
         height: size,
         role: "img",
-        "aria-label": "",
+        "aria-hidden": true,
         style: "background-color: #{background_color}",
         class: "initialjs-avatar #{options[:class]}".strip
       }

app/views/budgets/groups/show.html.erb

@@ -23,6 +23,6 @@
   </div>
 
   <div class="medium-5 column show-for-medium text-center">
-    <%= image_tag(image_path_for("map.jpg")) %>
+    <%= image_tag(image_path_for("map.jpg"), alt: t("shared.tags_cloud.districts_list")) %>
   </div>
 </div>

app/views/dashboard/mailer/forward.html.erb

@@ -5,9 +5,9 @@
     <tbody>
       <tr>
         <td style="background: #0300ff; padding: 50px; padding-top:40px; text-align: left;">
-          <%= image_tag "quote_before_white.png", style: "max-width: 40px; vertical-align: top;" %>
+          <%= image_tag "quote_before_white.png", alt: "", style: "max-width: 40px; vertical-align: top;" %>
           <h1 style="color: #fff; font-size: 60px; line-height: 90px; display: inline;"><%= @proposal.title %></h1>
-          <%= image_tag "quote_after_white.png", style: "max-width: 40px; vertical-align: top;" %>
+          <%= image_tag "quote_after_white.png", alt: "", style: "max-width: 40px; vertical-align: top;" %>
           <h2 style="color: #fff; font-size: 40px; line-height: 60px"><%= sanitize(t("dashboard.mailer.forward.subtitle")) %></h2>
         </td>
       </tr>
@@ -15,9 +15,13 @@
   </table>
 
   <% if @proposal.image.present? %>
-    <%= image_tag @proposal.image.variant(:large), style: "width: 100%; box-shadow: -16px 61px 49px -19px rgba(0,0,0,0.1);" %>
+    <%= image_tag @proposal.image.variant(:large),
+                  alt: @proposal.image.title.unicode_normalize,
+                  style: "width: 100%; box-shadow: -16px 61px 49px -19px rgba(0,0,0,0.1);" %>
   <% else %>
-    <%= image_tag "default_mailing.jpg", style: "width: 100%; box-shadow: -16px 61px 49px -19px rgba(0,0,0,0.1);" %>
+    <%= image_tag "default_mailing.jpg",
+                  alt: "",
+                  style: "width: 100%; box-shadow: -16px 61px 49px -19px rgba(0,0,0,0.1);" %>
   <% end %>
 
   <p style="padding: 0 50px; font-size:32px; text-align: left; line-height:43px; color: #515151;"><%= t("dashboard.mailer.forward.hi") %></p>

app/views/dashboard/mailing/index.html.erb

@@ -2,14 +2,18 @@
 <div class="row expanded">
   <div class="small-12 medium-9 column dashboard-mail-preview">
     <div class="mail-header text-left">
-      <%= image_tag "quote_before_white.png" %>
+      <%= image_tag "quote_before_white.png", alt: "" %>
       <h1 class="inline"><%= proposal.title %></h1>
-      <%= image_tag "quote_after_white.png" %>
+      <%= image_tag "quote_after_white.png", alt: "" %>
       <h2><%= sanitize(t("dashboard.mailer.forward.subtitle")) %></h2>
     </div>
 
     <div class="margin-bottom">
-      <%= image_tag(proposal.image&.variant(:large).presence || "default_mailing.jpg") %>
+      <% if proposal.image.present? %>
+        <%= image_tag(proposal.image.variant(:large), alt: proposal.image.title.unicode_normalize) %>
+      <% else %>
+        <%= image_tag("default_mailing.jpg", alt: "") %>
+      <% end %>
     </div>
 
     <div class="mail-body">

app/views/dashboard/poster/index.html.erb

@@ -6,7 +6,7 @@
         <h1>
           <%= t("dashboard.poster.index.poster_title") %>
           <br>
-          <%= image_tag("finger.png") %>
+          <%= image_tag("finger.png", alt: "") %>
           <%= t("dashboard.poster.index.poster_subtitle") %>
         </h1>
         <p class="intro">
@@ -25,9 +25,9 @@
         </div>
         <div class="poster-content">
           <h2><%= t("dashboard.poster.index.support") %></h2>
-            <%= image_tag "quote_before_blue.png" %>
+            <%= image_tag "quote_before_blue.png", alt: "" %>
             <h3><%= proposal.title %></h3>
-            <%= image_tag "quote_after_blue.png" %>
+            <%= image_tag "quote_after_blue.png", alt: "" %>
           <p class="poster-footer">
             <%= sanitize(t("dashboard.poster.index.footer", link: proposal_url(proposal))) %>
           </p>

app/views/dashboard/poster/index.pdf.erb

@@ -11,7 +11,7 @@
     <h1>
       <strong><%= t("dashboard.poster.index.poster_title") %>
       <br>
-      <%= wicked_pdf_image_tag("finger.png") %>
+      <%= wicked_pdf_image_tag("finger.png", alt: "") %>
       <%= t("dashboard.poster.index.poster_subtitle") %>
       </strong>
     </h1>
@@ -30,9 +30,9 @@
     </div>
     <div class="poster-content">
       <h2 class="text-center"><strong><%= t("dashboard.poster.index.support") %></strong></h2>
-      <%= wicked_pdf_image_tag "quote_before_blue.png" %>
+      <%= wicked_pdf_image_tag "quote_before_blue.png", alt: "" %>
       <h3><strong><%= proposal.title %></strong></h3>
-      <%= wicked_pdf_image_tag "quote_after_blue.png" %>
+      <%= wicked_pdf_image_tag "quote_after_blue.png", alt: "" %>
       <p class="poster-footer">
         <%= sanitize(t("dashboard.poster.index.footer", link: proposal_url(proposal))) %>
       </p>

app/views/proposals/map.html.erb

@@ -13,7 +13,7 @@
       </div>
 
       <div class="show-for-medium medium-9 column text-center">
-        <%= image_tag(image_path_for("map.jpg"), usemap: "#map") %>
+        <%= image_tag(image_path_for("map.jpg"), alt: t("shared.tags_cloud.districts_list"), usemap: "#map") %>
       </div>
 
       <map name="map" id="html_map">

spec/components/shared/avatar_component_spec.rb

@@ -8,7 +8,7 @@ describe Shared::AvatarComponent do
     render_inline component
 
     expect(page).to have_css "svg", count: 1
-    expect(page).to have_css "svg[role='img'][aria-label='']"
+    expect(page).to have_css "svg[role='img'][aria-hidden='true']"
   end
 
   it "shows the initial letter of the name" do

spec/system/admin/site_customization/images_spec.rb

@@ -45,19 +45,19 @@ describe "Admin custom images", :admin do
     visit proposals_path
 
     within("#map") do
-      expect(page).to have_css("img[src*='custom_map.jpg']")
+      expect(page).to have_css("img[src*='custom_map.jpg'][alt='Districts list']")
     end
 
     visit map_proposals_path
 
     within(".show-for-medium") do
-      expect(page).to have_css("img[src*='custom_map.jpg']")
+      expect(page).to have_css("img[src*='custom_map.jpg'][alt='Districts list']")
     end
 
     visit budget_group_path(budget, group)
 
     within(".show-for-medium") do
-      expect(page).to have_css("img[src*='custom_map.jpg']")
+      expect(page).to have_css("img[src*='custom_map.jpg'][alt='Districts list']")
     end
   end
 

spec/system/xss_spec.rb

@@ -170,7 +170,7 @@ describe "Cross-Site Scripting protection" do
   end
 
   scenario "legislation version body filters script tags but not header IDs nor tags like images" do
-    markdown = "# Title 1\n<a href='https://domain.com/url'>link</a><img src='/image.png'>"
+    markdown = "# Title 1\n<a href='https://domain.com/url'>link</a><img src='/image.png' alt='text'>"
     version = create(:legislation_draft_version, :published, body: "#{markdown}#{attack_code}")
 
     visit legislation_process_draft_version_path(version.process, version)
@@ -178,6 +178,6 @@ describe "Cross-Site Scripting protection" do
     expect(page.text).not_to be_empty
     expect(page).to have_css "h1#title-1", text: "Title 1"
     expect(page).to have_link "link", href: "https://domain.com/url"
-    expect(page).to have_css('img[src="/image.png"')
+    expect(page).to have_css('img[src="/image.png"]')
   end
 end