A11y/fix img tags (#1690)

* a11y(img tags): add missing alt tag

* a11y(img tags): hide redundant information on account menu from screen readers

* a11y(img tags): hide decorative image from screen readers

* a11y(img tags): fix img tags inside translations file

* a111(img tags): hide decorative images

app/templates/components/task-list.html

@@ -7,7 +7,7 @@
       </strong>
     {% elif status %}
       <strong class="task-list-indicator-completed" id="{{ label|id_safe }}">
-        <img aria-hidden="true" src="{{ asset_url('images/tick.svg') }}" class="w-6 h-6 inline-block mr-2 -mt-1">
+        <img aria-hidden="true" src="{{ asset_url('images/tick.svg') }}" class="w-6 h-6 inline-block mr-2 -mt-1" alt="">
         {{ _('Completed') }}
       </strong>
     {% else %}

app/templates/partials/nav/account_menu.html

@@ -11,7 +11,7 @@
     data-module="menu"
     data-menu-items="account-menu-options">
       {{ _('Your account') }}
-      <img alt="{{ _('Your account') }}" aria-hidden="true" class="account-menu-arrow ml-2 inline arrow self-center" src="{{ asset_url('images/arrow-licorice.svg') }}" width="15"/>
+      <img alt="" aria-hidden="true" class="account-menu-arrow ml-2 inline arrow self-center" src="{{ asset_url('images/arrow-licorice.svg') }}" width="15"/>
   </button>
   <ul
     id="account-menu-options"

app/templates/partials/nav/account_menu_mobile.html

@@ -10,9 +10,8 @@
     data-menu-overlay-content="account-menu-mobile"
     data-menu-overlay-close="account-close-mobile">
     <img
-      aria-hidden="false"
       src="{{ asset_url('images/account-icon.svg') }}"
-      alt="{{ _('Account menu') }}"
+      alt=""
       class="w-10 h-10"/>
   </button>
 
@@ -32,17 +31,17 @@
           <img
             aria-hidden="true"
             src="{{ asset_url('images/account-icon.svg') }}"
-            alt="{{ _('Account menu') }}"
+            alt=""
             class="float-left w-12 h-12"/>
         </div>
         <div class="modal-close float-right grid grid-cols-1 cursor-pointer text-black text-xs z-50">
           <button
             id="account-close-mobile"
             class="pt-1 px-1 justify-self-center focus:outline-none focus:bg-yellow focus:border-b-2 focus:border-blue">
             <img
-              role="presentation"
               src="{{ asset_url('images/close.svg') }}"
-              class="object-none object-center w-8 h-8 m-auto"/>
+              class="object-none object-center w-8 h-8 m-auto"
+              alt="" />
             <div id="account.menu.close">
               {{ _('close') }}
             </div>

app/templates/partials/nav/footer.html

@@ -54,7 +54,7 @@
   {% macro separator() %}
     <img 
       aria-hidden="true"
-      alt="{{ _('Separator') }}"
+      alt=""
       class="hidden lg:flex lg:visible separator self-center"
       src="{{ asset_url('images/bullet.svg') }}"
     />

app/templates/partials/nav/gc_header_nav_mobile.html

@@ -21,7 +21,7 @@
           id="mobile-menu-close"
           class="justify-self-center">
           <img
-            role="presentation"
+            alt=""
             src="{{ asset_url('images/close.svg') }}"
             class="object-none object-center w-8 h-8 m-auto"/>
           <p>{{ _('close') }}</p>

app/templates/views/email-branding/manage-branding.html

@@ -20,7 +20,7 @@
     <div class="md:w-3/4 float-left py-0 px-0 px-gutterHalf box-border">
       {% if logo %}
         <div id="logo-img">
-          <img src="https://{{ cdn_url }}/{{ logo }}"/>
+          <img alt="" src="https://{{ cdn_url }}/{{ logo }}"/>
         </div>
       {% endif %}
       <p>

app/templates/views/service-settings/branding/manage-email-branding.html

@@ -18,7 +18,7 @@
           <p>{{ _("We’ll review and implement your new logo. Expect to hear from our support team about the change shortly and in no more than 2 business days.") }}</p>
         </div>
         <div id="logo-img">
-          <img src="https://{{ cdn_url }}/{{ upload_filename }}"/>
+          <img alt="" src="https://{{ cdn_url }}/{{ upload_filename }}"/>
         </div>
 
   {% else %}

app/translations/csv/fr.csv

@@ -1574,9 +1574,9 @@
 "Format email messages","Faire la mise en forme des messages courriels"
 "Personalise messages to recipients","Personaliser les messages aux destinataires"
 "Track message delivery status","Suivre l’état de livraison des messages"
-"A template allows you to send the same message to many people. To tailor messages for each recipient, visit the <a href='{}' target='_blank'>Personalisation guide<img aria-hidden='true' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a>.","Un gabarit vous permet d’envoyer le même message à de nombreuses personnes. Pour adapter le message à chaque destinataire, utilisez le <a href='{}' target='_blank'>guide de personnalisation<img aria-hidden='true' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a>."
+"A template allows you to send the same message to many people. To tailor messages for each recipient, visit the <a href='{}' target='_blank'>Personalisation guide<img alt='' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a>.","Un gabarit vous permet d’envoyer le même message à de nombreuses personnes. Pour adapter le message à chaque destinataire, utilisez le <a href='{}' target='_blank'>guide de personnalisation<img alt='' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a>."
 "Tell recipients what the email is about. Try to use less than 10 words.","Indiquez le sujet du courriel aux destinataires, de préférence en moins de 10 mots."
-"Use the <a href='{}' target='_blank'>email formatting guide <img aria-hidden='true' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a> to craft your message.","Utilisez le <a href='{}' target='_blank'>guide de mise en forme de courriels <img aria-hidden='true' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a> pour rédiger votre message."
+"Use the <a href='{}' target='_blank'>email formatting guide <img alt='' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a> to craft your message.","Utilisez le <a href='{}' target='_blank'>guide de mise en forme de courriels <img alt='' role='presentation' class='inline w-6 h-6 ml-2 self-center' src='{}'/></a> pour rédiger votre message."
 "Prepare to send messages by creating your own templates.","Préparer l’envoi de messages en créant vos propres gabarits."
 "Write","Rédaction"
 "Create a template to start writing a message.","Créez un gabarit pour rédiger un message."