Ajoute toutes les descriptions alternatives d'images manquantes

.rubocop.yml

@@ -1,6 +1,8 @@
 inherit_from: .rubocop_todo.yml
 
 require:
+  - ./spec/rubocop/cop/custom/svg_image_alt_tag.rb
+  - rubocop-rails-accessibility
   - rubocop-packaging
   - rubocop-rails
   - rubocop-rspec
@@ -20,6 +22,9 @@ AllCops:
     - 'vendor/**/*'
     - 'spec/spec_helper.rb'
 
+Custom/SvgImageAltTag:
+  Enabled: true
+
 Style/Documentation:
   Enabled: false
 

Gemfile

@@ -82,6 +82,7 @@ group :development, :test do
   gem 'rubocop', require: false
   gem 'rubocop-packaging', require: false
   gem 'rubocop-rails', require: false
+  gem 'rubocop-rails-accessibility', require: false
   gem 'rubocop-rspec', require: false
 end
 

Gemfile.lock

@@ -570,6 +570,8 @@ GEM
       rack (>= 1.1)
       rubocop (>= 1.52.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
+    rubocop-rails-accessibility (1.0.1)
+      rubocop (>= 1.0.0)
     rubocop-rspec (3.3.0)
       rubocop (~> 1.61)
     ruby-graphviz (1.2.5)
@@ -748,6 +750,7 @@ DEPENDENCIES
   rubocop
   rubocop-packaging
   rubocop-rails
+  rubocop-rails-accessibility
   rubocop-rspec
   ruby-lsp (~> 0.22.1)
   ruby-lsp-rails (~> 0.3.27)

app/assets/stylesheets/admin/composants/_tags.scss

@@ -9,11 +9,6 @@
   font-weight: 500;
   color: $couleur-texte;
 
-  .tag__icone {
-    margin-right: .25rem;
-    width: 13px;
-  }
-
   &.red {
     @include tag-couleur-majuscule($error-425, $error-950)
   }

app/components/ellipse_component.html.erb

@@ -1,5 +1,5 @@
 <div class="ellipse ellipse-a-cocher ellipse--<%= @statut %> position-relative">
   <% if @statut == :succes %>
-    <%= image_tag "tick.svg", class: "position-absolute ellipse-a-cocher__tick" %>
+    <%= image_tag "tick.svg", class: "position-absolute ellipse-a-cocher__tick", alt: "" %>
   <% end %>
 </div>

app/components/tag.html.erb

@@ -1,11 +1,8 @@
 <div class="tag<%= ' tag-supprimable' if @supprimable %> <%= @classes %>">
-  <% if @image_path.present? %>
-    <%= image_tag("#{@image_path}.png", class: 'tag__icone') %>
-  <% end %>
   <span><%= @contenu %></span>
   <% if @supprimable %>
     <%= link_to @url, method: :patch, class: 'lien-supprimer' do %>
-        <%= image_tag("croix.svg") %>
+        <%= image_tag "croix.svg", alt: t(".supprimer") %>
     <% end %>
   <% end %>
 </div>

app/components/tag.rb

@@ -1,11 +1,10 @@
 # frozen_string_literal: true
 
 class Tag < ViewComponent::Base
-  def initialize(contenu, supprimable: false, classes: nil, image_path: nil, url: nil)
+  def initialize(contenu, supprimable: false, classes: nil, url: nil)
     @contenu = contenu
     @supprimable = supprimable
     @classes = classes
-    @image_path = image_path
     @url = url
   end
 end

app/helpers/application_helper.rb

@@ -25,11 +25,13 @@ def rapport_colonne_class
     'col-4 px-5 mb-4'
   end
 
+  # cette fonction n'est nécessaire que pour les svg dans les PDF.
+  # Utiliser prioritairement `image_tag` même pour les SVG
   def svg_tag_base64(chemin_avec_extension, options = {})
     ## Ne pas oublier de rajouter l'extension au path sinon ça ne build pas en production
 
     raw = Rails.application.assets_manifest.find_sources(chemin_avec_extension).first
-    image_tag fichier_encode_en_base64(raw), options
+    image_tag svg_encode_en_base64(raw), alt: options[:alt], class: options[:class]
   end
 
   def cdn_for(fichier)
@@ -39,11 +41,11 @@ def cdn_for(fichier)
     "#{ENV.fetch('PROTOCOLE_SERVEUR')}://#{ENV.fetch('HOTE_STOCKAGE')}/#{fichier.key}?#{param}"
   end
 
-  def svg_attachment_base64(attachment, options = {})
+  def svg_attachment_base64(attachment)
     return unless attachment.attached?
 
     file_content = attachment.download
-    image_tag fichier_encode_en_base64(file_content), options
+    svg_encode_en_base64(file_content)
   end
 
   def inline_svg_content(attachment, options = {})
@@ -53,7 +55,7 @@ def inline_svg_content(attachment, options = {})
     svg_with_class(file_content, options[:class])
   end
 
-  def fichier_encode_en_base64(file_content)
+  def svg_encode_en_base64(file_content)
     encodage = Base64.strict_encode64 file_content
     "data:image/svg+xml;base64,#{encodage}"
   end

app/models/application_record.rb

@@ -28,8 +28,7 @@ def cdn_for(attachment)
     ApplicationController.helpers.cdn_for(attachment)
   end
 
-  def fichier_encode_base64(attachment)
-    file_content = attachment.download
-    ApplicationController.helpers.fichier_encode_en_base64(file_content)
+  def svg_attachment_base64(attachment)
+    ApplicationController.helpers.svg_attachment_base64(attachment)
   end
 end

app/models/question_clic_dans_image.rb

@@ -21,7 +21,7 @@ class QuestionClicDansImage < Question
 
   def as_json(_options = nil)
     json = base_json
-    json['image_au_clic'] = fichier_encode_base64(image_au_clic) if image_au_clic.attached?
+    json['image_au_clic'] = svg_attachment_base64(image_au_clic) if image_au_clic.attached?
     json.merge!(json_audio_fields, additional_json_fields)
   end
 
@@ -52,7 +52,7 @@ def base_json
       json['type'] = 'clic-dans-image'
       json['illustration'] = cdn_for(illustration) if illustration.attached?
       json['description'] = description
-      json['zone_cliquable'] = fichier_encode_base64(zone_cliquable) if zone_cliquable.attached?
+      json['zone_cliquable'] = svg_attachment_base64(zone_cliquable) if zone_cliquable.attached?
     end
   end
 
@@ -84,9 +84,4 @@ def svg_contient_class_bonne_reponse?(svg_content, minimum)
     doc = ApplicationController.helpers.parse_svg_content(svg_content)
     doc.css(".#{CLASS_BONNE_REPONSE}").size >= minimum
   end
-
-  def fichier_encode_base64(attachment)
-    file_content = attachment.download
-    ApplicationController.helpers.fichier_encode_en_base64(file_content)
-  end
 end

app/models/question_glisser_deposer.rb

@@ -22,7 +22,7 @@ class QuestionGlisserDeposer < Question
 
   def as_json(_options = nil)
     json = base_json
-    json['zone_depot_url'] = fichier_encode_base64(zone_depot) if zone_depot.attached?
+    json['zone_depot_url'] = svg_attachment_base64(zone_depot) if zone_depot.attached?
     json.merge!(json_audio_fields, reponses_fields)
   end
 

app/views/admin/aide/_categorie_aide.html.arb

@@ -6,7 +6,9 @@ h3 t("activerecord.attributes.source_aide.titres_categories.#{categorie}"),
 div class: 'sources_aide' do
   sources_aide.sort_by(&:position).each do |source_aide|
     a href: source_aide.url, target: '_blank', class: 'source_aide' do
-      text_node image_tag "source-aide-#{source_aide.type_document}.svg", class: 'illustration'
+      text_node image_tag "source-aide-#{source_aide.type_document}.svg",
+                          class: 'illustration',
+                          alt: ''
       div class: 'details' do
         div source_aide.titre, class: 'titre'
         div md(source_aide.description), class: 'description'

app/views/admin/campagnes/_banniere_test_campagne.html.arb

@@ -2,7 +2,7 @@
 
 div class: 'card__banner card__banner--green d-flex justify-content-between' do
   div class: 'd-flex align-items-end' do
-    svg_tag_base64 'avatar_bienvenue.svg', class: 'banner__icone', alt: ''
+    image_tag 'avatar_bienvenue.svg', class: 'banner__icone', alt: ''
   end
   div class: 'card__banner__texte' do
     div class: 'card__banner__description' do

app/views/admin/dashboard/_bloc_evaluations.html.erb

@@ -5,7 +5,7 @@
       <%= link_to t('.voir_tout'), admin_evaluations_path %>
     </div>
 
-    <p class="evaluation-legende" sr-only="<%= t('.legende_sr') %>">
+    <p class="evaluation-legende" aria-label="<%= t('.legende_sr') %>">
       <%= render(PastilleComponent.new(etiquette: t('.legende_info'), couleur: 'alerte')) %>
     </p>
   </div>

app/views/admin/dashboard/mise_en_action/_sans_evaluations.arb

@@ -5,7 +5,7 @@ div class: 'contenu-sans-evaluations' do
     h3 t('.titre')
     div t('.action'), class: 'bouton grand-bouton bouton--desactive'
   end
-  div svg_tag_base64 'panneaux.svg', class: 'illustration'
+  div image_tag 'panneaux.svg', class: 'illustration', alt: ''
   div class: 'description' do
     text_node md t('.description')
   end

app/views/admin/evaluations/_competences_transversales.arb

@@ -46,7 +46,7 @@ div id: 'competences_transversales', class: 'page' do
                            scope: 'admin.evaluations.restitution_competence')
                   div class: 'lien-metier' do
                     if pdf
-                      text_node svg_tag_base64 'lien.svg', class: 'image-lien'
+                      text_node svg_tag_base64 'lien.svg', class: 'image-lien', alt: ''
                     else
                       text_node image_tag 'lien.svg', alt: '', class: 'image-lien'
                     end

app/views/admin/evaluations/_correspondance_anlci.arb

@@ -13,7 +13,7 @@ div id: 'correspondance_anlci', class: 'page' do
     div class: 'row no-gutters recommandation-anlci marges-page' do
       div class: 'col-auto' do
         if pdf
-          svg_tag_base64 'logo_anlci.svg', class: 'pr-5'
+          svg_tag_base64 'logo_anlci.svg', class: 'pr-5', alt: t('logo_anlci')
         else
           image_tag 'logo_anlci.svg', class: 'pr-5', alt: t('logo_anlci')
         end

app/views/admin/question_qcms/_show.html.arb

@@ -8,11 +8,8 @@ panel 'Détails de la question' do
     row :nom_technique
     row :description
     row :illustration do
-      if resource.illustration.attached?
-        link_to(cdn_for(resource.illustration), target: '_blank', rel: 'noopener') do
-          image_tag cdn_for(resource.illustration), class: 'image-preview'
-        end
-      end
+      render partial: 'admin/questions/show_illustration',
+             locals: { illustration: resource.illustration }
     end
     intitule = question_qcm.transcription_intitule
     row :intitule do

app/views/admin/question_sous_consignes/_show.html.arb

@@ -6,11 +6,8 @@ panel 'Détails de la question' do
     row :libelle
     row :nom_technique
     row :illustration do
-      if resource.illustration.attached?
-        link_to(cdn_for(resource.illustration), target: '_blank', rel: 'noopener') do
-          image_tag cdn_for(resource.illustration), class: 'image-preview'
-        end
-      end
+      render partial: 'admin/questions/show_illustration',
+             locals: { illustration: resource.illustration }
     end
     intitule = question_sous_consigne.transcription_intitule
     row :intitule do

app/views/admin/questions/_input_illustration.html.arb

@@ -1,10 +1,11 @@
 # frozen_string_literal: true
 
-f.input :illustration, as: :file,
-                       input_html: { accept: illustration_content_types.join(',') },
-                       hint: t('.illustration.hint')
-if f.object.illustration.attached?
-  f.input :supprimer_illustration, as: :boolean,
-                                   label: t('.label.supprimer_illustration'),
-                                   hint: image_tag(cdn_for(f.object.illustration))
-end
+render partial: 'admin/questions/input_illustration_base',
+       locals: {
+         f: f,
+         nom: :illustration,
+         nom_suppression: :supprimer_illustration,
+         image: resource.illustration,
+         hint: '.illustration.hint',
+         content_type: :default
+       }

app/views/admin/questions/_input_illustration_base.html.arb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+content_type = content_type == :default ? illustration_content_types.join(',') : 'image/svg+xml'
+hint = hint.present? ? t(hint) : ''
+
+f.input nom,
+        as: :file,
+        hint: hint,
+        label: label,
+        input_html: { accept: content_type }
+
+if image.attached? && f.object.errors[nom].blank?
+  f.input nom_suppression, as: :boolean,
+                           label: t('.supprimer_illustration'),
+                           hint: image_tag(image,
+                                           class: 'image-preview',
+                                           alt: image.filename)
+end

app/views/admin/questions/_show_illustration.html.erb

@@ -0,0 +1,5 @@
+<% if illustration.attached? %>
+  <%= link_to cdn_for(illustration), target: '_blank', rel: 'noopener' do %>
+    <%= image_tag cdn_for(illustration), class: 'image-preview', alt: illustration.filename %>
+  <% end %>
+<% end %>

app/views/admin/questions_clic_dans_image/_form.html.arb

@@ -7,25 +7,24 @@ active_admin_form_for [:admin, resource] do |f|
     f.input :nom_technique
     f.input :description
     render partial: 'admin/questions/input_illustration', locals: { f: f }
-    f.input :zone_cliquable,
-            as: :file,
-            hint: "L'un des éléments cliquables doit contenir la classe css `bonne-reponse`",
-            input_html: { accept: 'image/svg+xml' }
-    if f.object.zone_cliquable.attached? && f.object.errors[:zone_cliquable].blank?
-      f.input :supprimer_zone_cliquable,
-              as: :boolean,
-              label: t('.label.supprimer_zone_cliquable'),
-              hint: svg_attachment_base64(resource.zone_cliquable, class: 'image-preview')
-    end
-    f.input :image_au_clic,
-            label: t('.label.image_au_clic'),
-            as: :file,
-            input_html: { accept: 'image/svg+xml' }
-    if f.object.image_au_clic.attached?
-      f.input :supprimer_image_au_clic,
-              as: :boolean,
-              hint: svg_attachment_base64(resource.image_au_clic, class: 'image-preview')
-    end
+    render partial: 'admin/questions/input_illustration_base',
+           locals: {
+             f: f,
+             nom: :zone_cliquable,
+             nom_suppression: :supprimer_zone_cliquable,
+             image: resource.zone_cliquable,
+             hint: '.format_fichier_zone_cliquable',
+             content_type: :svg
+           }
+    render partial: 'admin/questions/input_illustration_base',
+           locals: {
+             f: f,
+             nom: :image_au_clic,
+             label: t('.label.image_au_clic'),
+             nom_suppression: :supprimer_image_au_clic,
+             image: resource.image_au_clic,
+             content_type: :svg
+           }
   end
 
   render partial: 'admin/questions/inputs_avec_transcriptions_audios',

app/views/admin/questions_clic_dans_image/_show.html.arb

@@ -7,25 +7,16 @@ panel 'Détails de la question' do
     row :nom_technique
     row :description
     row :illustration do
-      if resource.illustration.attached?
-        link_to(cdn_for(resource.illustration), target: '_blank', rel: 'noopener') do
-          image_tag cdn_for(resource.illustration), class: 'image-preview'
-        end
-      end
+      render partial: 'admin/questions/show_illustration',
+             locals: { illustration: resource.illustration }
     end
     row :zone_cliquable do
-      if resource.zone_cliquable.attached?
-        link_to(cdn_for(resource.zone_cliquable), target: '_blank', rel: 'noopener') do
-          raw inline_svg_content(resource.zone_cliquable, class: 'image-preview')
-        end
-      end
+      render partial: 'admin/questions/show_illustration',
+             locals: { illustration: resource.zone_cliquable }
     end
     row :image_au_clic do
-      if resource.image_au_clic.attached?
-        link_to(cdn_for(resource.image_au_clic), target: '_blank', rel: 'noopener') do
-          raw inline_svg_content(resource.image_au_clic, class: 'image-preview')
-        end
-      end
+      render partial: 'admin/questions/show_illustration',
+             locals: { illustration: resource.image_au_clic }
     end
     intitule = question_clic_dans_image.transcription_intitule
     row :intitule do

app/views/admin/questions_clic_dans_texte/_show.html.arb

@@ -8,11 +8,8 @@ panel 'Détails de la question' do
     row :nom_technique
     row :description
     row :illustration do
-      if resource.illustration.attached?
-        link_to(cdn_for(resource.illustration), target: '_blank', rel: 'noopener') do
-          image_tag cdn_for(resource.illustration), class: 'image-preview'
-        end
-      end
+      render partial: 'admin/questions/show_illustration',
+             locals: { illustration: resource.illustration }
     end
     row :texte_sur_illustration do
       div md(resource.texte_sur_illustration)