[IMP] web_editor, *: set image alt automatically, remove useless alts

*: website, web_unplash

The html alt attribute is supposed to contain a description of an
image's content (an alternative to the visual representation), a lot of
snippets contained alt attributes that were not descriptive of their
content, and would as such be counter-productive in terms of
accessibility. This commit removes those.

Previously, the alt attribute on img tags had to be set manually by the
user through the editor. This commit makes use of the description field
on ir.attachment to store image description, and sets the alt attribute
on images to that description when choosing an image from the media
dialog.

task-2091417
closes odoo/odoo#45174

Related: odoo/enterprise#9520
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

11 files changed, 35 insertions, 33 deletions

diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 9daa9716d0a..1cf2b4faec9 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -94,7 +94,7 @@
                                                 </p>
                                             </div>
                                             <div class="col-lg-6 pt16 pb16">
-                                                <img src="/website/static/src/img/library/business_conference.jpg" class="img img-fluid shadow" alt="Our Team"/>
+                                                <img src="/website/static/src/img/library/business_conference.jpg" class="img img-fluid shadow" alt=""/>
                                             </div>
                                         </div>
                                     </div>
diff --git a/addons/website/static/src/snippets/s_image_gallery/options.js b/addons/website/static/src/snippets/s_image_gallery/options.js
index 52fedd2c3a6..6ce339b2d77 100644
--- a/addons/website/static/src/snippets/s_image_gallery/options.js
+++ b/addons/website/static/src/snippets/s_image_gallery/options.js
@@ -94,6 +94,7 @@ options.registry.gallery = options.Class.extend({
                         class: 'img img-fluid',
                         src: attachments[i].image_src,
                         'data-index': ++index,
+                        alt: attachments[i].description || '',
                     }).appendTo($container);
                 }
                 this.mode('reset', this.getMode());
@@ -254,12 +255,13 @@ options.registry.gallery = options.Class.extend({
      */
     slideshow: function () {
         var imgStyle = this.$el.find('.active[data-styling]').data('styling') || '';
-        var urls = _.map(this._getImages(), function (img) {
-            return $(img).attr('src');
-        });
+        var images = _.map(this._getImages(), img => ({
+            src: img.getAttribute('src'),
+            alt: img.getAttribute('alt'),
+        }));
         var currentInterval = this.$target.find('.carousel:first').attr('data-interval');
         var params = {
-            srcs: urls,
+            images: images,
             index: 0,
             title: "",
             interval: currentInterval || this.$target.data('interval') || 0,
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 3d0b6e4478d..23bcf471eb2 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -12,9 +12,9 @@
     <t t-name="website.gallery.slideshow">
         <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
             <div class="carousel-inner" style="padding: 0;">
-                 <t t-foreach="srcs" t-as="src">
-                    <div t-attf-class="carousel-item #{src_index == index and 'active' or ''}">
-                        <img t-attf-class="img img-fluid d-block #{userStyle}" t-att-src="src" alt="Slide image"/>
+                 <t t-foreach="images" t-as="image">
+                    <div t-attf-class="carousel-item #{image_index == index and 'active' or ''}">
+                        <img t-attf-class="img img-fluid d-block #{userStyle}" t-att-src="image.src" t-att-alt="image.alt"/>
                     </div>
                  </t>
             </div>
@@ -23,8 +23,8 @@
                 <li class="o_indicators_left text-center" aria-label="Previous" title="Previous">
                     <i class="fa fa-chevron-left"/>
                 </li>
-                <t t-foreach="srcs" t-as="src">
-                    <li t-attf-data-target="##{id}" t-att-data-slide-to="src_index" t-att-class="src_index == index and 'active'" t-attf-style="background-image: url(#{src})"></li>
+                <t t-foreach="images" t-as="image">
+                    <li t-attf-data-target="##{id}" t-att-data-slide-to="image_index" t-att-class="image_index == index and 'active'" t-attf-style="background-image: url(#{image.src})"></li>
                 </t>
                 <li class="o_indicators_right text-center" aria-label="Next" title="Next">
                     <i class="fa fa-chevron-right"/>
diff --git a/addons/website/views/snippets/s_company_team.xml b/addons/website/views/snippets/s_company_team.xml
index b43920845dd..31d9723e3a0 100644
--- a/addons/website/views/snippets/s_company_team.xml
+++ b/addons/website/views/snippets/s_company_team.xml
@@ -8,7 +8,7 @@
                 <div class="col-lg-6 pt24 pb24">
                     <div class="row s_col_no_resize s_col_no_bgcolor">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle mx-auto"/>
+                            <img alt="" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle mx-auto"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Tony Fred, CEO</h4>
@@ -23,7 +23,7 @@
                 <div class="col-lg-6 pt24 pb24">
                     <div class="row s_col_no_resize s_col_no_bgcolor">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle mx-auto"/>
+                            <img alt="" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle mx-auto"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Mich Stark, COO</h4>
@@ -38,7 +38,7 @@
                 <div class="col-lg-6 pt24 pb24">
                     <div class="row s_col_no_resize s_col_no_bgcolor">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle mx-auto"/>
+                            <img alt="" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle mx-auto"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Aline Turner, CTO</h4>
@@ -53,7 +53,7 @@
                 <div class="col-lg-6 pt24 pb24">
                     <div class="row s_col_no_resize s_col_no_bgcolor">
                         <div class="col-lg-4">
-                            <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle mx-auto"/>
+                            <img alt="" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle mx-auto"/>
                         </div>
                         <div class="col-lg-8">
                             <h4>Iris Joe, CFO</h4>
diff --git a/addons/website/views/snippets/s_image_text.xml b/addons/website/views/snippets/s_image_text.xml
index c60a98e67ff..cbf0cbbca90 100644
--- a/addons/website/views/snippets/s_image_text.xml
+++ b/addons/website/views/snippets/s_image_text.xml
@@ -6,7 +6,7 @@
         <div class="container">
             <div class="row align-items-center">
                 <div class="col-lg-6 pt16 pb16">
-                    <img src="/web/image/website.s_image_text_default_image" class="img img-fluid mx-auto" alt="Odoo • Image and Text"/>
+                    <img src="/web/image/website.s_image_text_default_image" class="img img-fluid mx-auto" alt=""/>
                 </div>
                 <div class="col-lg-6 pt16 pb16">
                     <h2>Section Subtitle</h2>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 59e9fd78928..12e71dc2444 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -6,7 +6,7 @@
         <div class="container">
             <div class="row" data-name="Media item">
                 <div class="col-lg-4">
-                    <img class="img img-fluid" src="/web/image/website.s_media_list_default_image_1" alt=""/>
+                    <img class="img img-fluid" src="/web/image/website.s_media_list_default_image_1"  alt=""/>
                 </div>
                 <div class="col-lg-8 s_media_list_body">
                     <h3>Media heading</h3>
diff --git a/addons/website/views/snippets/s_picture.xml b/addons/website/views/snippets/s_picture.xml
index b0e3840ee90..324e0cd7bcc 100644
--- a/addons/website/views/snippets/s_picture.xml
+++ b/addons/website/views/snippets/s_picture.xml
@@ -10,7 +10,7 @@
             <div class="row s_nb_column_fixed">
                 <div class="col-lg-10 offset-lg-1 pb24" style="text-align: center;">
                     <figure class="figure">
-                        <img src="/web/image/website.s_picture_default_image" class="figure-img img-thumbnail padding-large" alt="Odoo • A picture with a caption"/>
+                        <img src="/web/image/website.s_picture_default_image" class="figure-img img-thumbnail padding-large" alt=""/>
                         <figcaption class="figure-caption py-3">Add a caption to enhance the meaning of this image.</figcaption>
                     </figure>
                 </div>
diff --git a/addons/website/views/snippets/s_product_list.xml b/addons/website/views/snippets/s_product_list.xml
index b295ea0609d..b2890db4bf1 100644
--- a/addons/website/views/snippets/s_product_list.xml
+++ b/addons/website/views/snippets/s_product_list.xml
@@ -7,7 +7,7 @@
             <div class="row">
                 <div class="col-lg-2 col-md-4 col-6">
                     <a href="http://www.odoo.com">
-                        <img src="/web/image/website.s_product_list_default_image_1" alt="#" class="img img-fluid"/>
+                        <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid"/>
                     </a>
                     <div class="s_product_list_item_link">
                         <a href="http://www.odoo.com" class="btn btn-alpha">View item</a>
@@ -15,7 +15,7 @@
                 </div>
                 <div class="col-lg-2 col-md-4 col-6">
                     <a href="http://www.odoo.com">
-                        <img src="/web/image/website.s_product_list_default_image_2" alt="#" class="img img-fluid"/>
+                        <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid"/>
                     </a>
                     <div class="s_product_list_item_link">
                         <a href="http://www.odoo.com" class="btn btn-alpha">View item</a>
@@ -23,7 +23,7 @@
                 </div>
                 <div class="col-lg-2 col-md-4 col-6">
                     <a href="http://www.odoo.com">
-                        <img src="/web/image/website.s_product_list_default_image_3" alt="#" class="img img-fluid"/>
+                        <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid"/>
                     </a>
                     <div class="s_product_list_item_link">
                         <a href="http://www.odoo.com" class="btn btn-alpha">View item</a>
@@ -31,7 +31,7 @@
                 </div>
                 <div class="col-lg-2 col-md-4 col-6">
                     <a href="http://www.odoo.com">
-                        <img src="/web/image/website.s_product_list_default_image_4" alt="#" class="img img-fluid"/>
+                        <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid"/>
                     </a>
                     <div class="s_product_list_item_link">
                         <a href="http://www.odoo.com" class="btn btn-alpha">View item</a>
@@ -39,7 +39,7 @@
                 </div>
                 <div class="col-lg-2 col-md-4 col-6">
                     <a href="http://www.odoo.com">
-                        <img src="/web/image/website.s_product_list_default_image_5" alt="#" class="img img-fluid"/>
+                        <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid"/>
                     </a>
                     <div class="s_product_list_item_link">
                         <a href="http://www.odoo.com" class="btn btn-alpha">View item</a>
@@ -47,7 +47,7 @@
                 </div>
                 <div class="col-lg-2 col-md-4 col-6">
                     <a href="http://www.odoo.com">
-                        <img src="/web/image/website.s_product_list_default_image_6" alt="#" class="img img-fluid"/>
+                        <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid"/>
                     </a>
                     <div class="s_product_list_item_link">
                         <a href="http://www.odoo.com" class="btn btn-alpha">View item</a>
diff --git a/addons/website/views/snippets/s_references.xml b/addons/website/views/snippets/s_references.xml
index 48e70ffbb2f..2b4d1617d26 100644
--- a/addons/website/views/snippets/s_references.xml
+++ b/addons/website/views/snippets/s_references.xml
@@ -8,22 +8,22 @@
             <p style="text-align: center;">We are in good company.</p>
             <div class="row">
                 <div class="col-lg-2 pt16 pb16">
-                    <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid " alt="Demo Logo"/>
+                    <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid " alt=""/>
                 </div>
                 <div class="col-lg-2 pt16 pb16">
-                    <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid " alt="Demo Logo"/>
+                    <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid " alt=""/>
                 </div>
                 <div class="col-lg-2 pt16 pb16">
-                    <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid " alt="Demo Logo"/>
+                    <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid " alt=""/>
                 </div>
                 <div class="col-lg-2 pt16 pb16">
-                    <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid " alt="Demo Logo"/>
+                    <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid " alt=""/>
                 </div>
                 <div class="col-lg-2 pt16 pb16">
-                    <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid " alt="Demo Logo"/>
+                    <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid " alt=""/>
                 </div>
                 <div class="col-lg-2 pt16 pb16">
-                    <img src="/web/image/website.s_reference_default_image_6" class="img-fluid" alt="Demo Logo"/>
+                    <img src="/web/image/website.s_reference_default_image_6" class="img-fluid" alt=""/>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_text_image.xml b/addons/website/views/snippets/s_text_image.xml
index c6cfaba768b..402c170cda7 100644
--- a/addons/website/views/snippets/s_text_image.xml
+++ b/addons/website/views/snippets/s_text_image.xml
@@ -12,7 +12,7 @@
                     <p><a href="#" class="btn btn-primary">Learn more</a></p>
                 </div>
                 <div class="col-lg-6 pt16 pb16">
-                    <img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt="Odoo • Text and Image"/>
+                    <img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt=""/>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_three_columns.xml b/addons/website/views/snippets/s_three_columns.xml
index 7ad9ebd4428..96d51254d66 100644
--- a/addons/website/views/snippets/s_three_columns.xml
+++ b/addons/website/views/snippets/s_three_columns.xml
@@ -7,7 +7,7 @@
             <div class="row d-flex align-items-stretch">
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
                     <div class="card bg-white h-100">
-                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_1" alt="Odoo - Sample 1 for three columns"/>
+                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_1" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature One</h3>
                             <p class="card-text">Adapt these three columns to fit your design need. To duplicate, delete or move columns, select the column and use the top icons to perform your action.</p>
@@ -16,7 +16,7 @@
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
                     <div class="card bg-white h-100">
-                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_2" alt="Odoo - Sample 2 for three columns"/>
+                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_2" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Two</h3>
                             <p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the columns to create a new one as a copy.</p>
@@ -25,7 +25,7 @@
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
                     <div class="card bg-white h-100">
-                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_3" alt="Odoo - Sample 3 for three columns"/>
+                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_3" alt=""/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Three</h3>
                             <p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change its <em>rounded corner</em> style.</p>