[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>

2 files changed, 11 insertions, 9 deletions

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"/>