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

3 files changed, 4 insertions, 3 deletions

diff --git a/addons/web_unsplash/controllers/main.py b/addons/web_unsplash/controllers/main.py
index f3a1c91dab9..505531edf4a 100644
--- a/addons/web_unsplash/controllers/main.py
+++ b/addons/web_unsplash/controllers/main.py
@@ -113,6 +113,7 @@ class Web_Unsplash(http.Controller):
                 'public': res_model == 'ir.ui.view',
                 'res_id': res_id,
                 'res_model': res_model,
+                'description': value.get('description'),
             })
             attachment.generate_access_token()
             uploads.append(attachment._get_media_info())
diff --git a/addons/web_unsplash/static/src/js/unsplash_image_widget.js b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
index 35a9771c838..229283b00c4 100644
--- a/addons/web_unsplash/static/src/js/unsplash_image_widget.js
+++ b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
@@ -227,7 +227,7 @@ widgetsMedia.ImageWidget.include({
             // already saved, probably a double click. Ignore.
             return;
         }
-        const {imgid, url, downloadUrl} = ev.currentTarget.dataset;
+        const {imgid, url, downloadUrl, description} = ev.currentTarget.dataset;
         if (!this.options.multiImages) {
             this._unsplash.selectedImages = {};
             this.selectedAttachments = [];
@@ -237,7 +237,7 @@ widgetsMedia.ImageWidget.include({
         } else {
             const _1920Url = new URL(url);
             _1920Url.searchParams.set('w', '1920');
-            this._unsplash.selectedImages[imgid] = {url: _1920Url.href, download_url: downloadUrl};
+            this._unsplash.selectedImages[imgid] = {url: _1920Url.href, download_url: downloadUrl, description: description};
         }
         this._highlightSelected();
         if (!this.options.multiImages) {
diff --git a/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml b/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
index aeb6edf8094..b27a098c303 100644
--- a/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
+++ b/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
@@ -18,7 +18,7 @@
 </t>
 
 <t t-name="web_unsplash.dialog.image.content">
-    <div class="o_existing_attachment_cell o_unsplash_attachment_cell position-relative align-items-center justify-content-center bg-light" t-att-data-imgid="attachment.id" t-att-data-id="attachment.id" t-att-data-url="attachment.urls.regular" t-att-data-download-url="attachment.links.download_location">
+    <div class="o_existing_attachment_cell o_unsplash_attachment_cell position-relative align-items-center justify-content-center bg-light" t-att-data-imgid="attachment.id" t-att-data-id="attachment.id" t-att-data-url="attachment.urls.regular" t-att-data-download-url="attachment.links.download_location" t-att-data-description="attachment.alt_description">
         <img class="img img-fluid o_we_attachment_highlight" t-att-src="attachment.url" t-att-alt="attachment.alt_description" style="max-height: 100%;"/>
         <a class="o_we_unplash_author" t-att-href="attachment.user.links.html" target="_blank" t-esc="attachment.user.name" t-att-title="attachment.user.name"/>
     </div>