[FIX] *: fix some side-effects of https://github.com/odoo/odoo/commit/9de1bc0eef6f5bfaa2a8d745431caa361ae91548

- JS Modals were not correctly built anymore, their .modal-body element
  was duplicated and many without-effect JS lines were introduced (as a
  side effect, the form view design was broken when inside modals)

- Tests were changed to make bugs go unnoticed. For example, the media
  dialog functionnality was entirely broken because the .modal-dialog
  element was not receiving the correct class anymore.

- The JS translation function is _t, not _

- Do not use the <title/> tag as a regular DOM element, it is meant to
  be unique, in the <head/> section

- CSS rules were added to the utils.scss file, which is meant to contain
  functions and mixins, otherwise, the rule is duplicated in every asset

- Some icons were still broken, as missed by https://github.com/odoo/odoo/commit/f90cf060a3cfeb37a67bec83264c0aaab8892b56

- Tests were changed to use [role="dialog"]/footer/header in their
  selectors without any reason, this commit restores some of that to
  avoid rebase conflicts with the BS4 work.

- ...

Note: other elements should still be discussed, like the direct use of
the 'o_form_label' class in views definition... but those do not cause
direct problems.

11 files changed, 30 insertions, 39 deletions

diff --git a/addons/web/static/src/js/core/dialog.js b/addons/web/static/src/js/core/dialog.js
index 6ebd94ef13e..075c7359a55 100644
--- a/addons/web/static/src/js/core/dialog.js
+++ b/addons/web/static/src/js/core/dialog.js
@@ -23,7 +23,7 @@ var Dialog = Widget.extend({
         focus_control_button: '_onFocusControlButton',
     }),
     events: _.extend({} , Widget.prototype.events, {
-        'keydown footer.modal-footer button':'_onFooterButtonKeyDown',
+        'keydown .modal-footer button':'_onFooterButtonKeyDown',
     }),
     /**
      * @param {Widget} parent
@@ -93,7 +93,7 @@ var Dialog = Widget.extend({
                     self.$modal.find('.modal-dialog').addClass('modal-sm');
                     break;
             }
-            self.$footer = self.$modal.find("footer");
+            self.$footer = self.$modal.find(".modal-footer");
             self.set_buttons(self.buttons);
             self.$modal.on('hidden.bs.modal', _.bind(self.destroy, self));
         });
@@ -103,6 +103,9 @@ var Dialog = Widget.extend({
      */
     renderElement: function () {
         this._super();
+        // Note: ideally, the $el which is created/set here should use the
+        // 'main' tag, we cannot enforce this as it would require to re-create
+        // the whole element.
         if (this.$content) {
             this.setElement(this.$content);
         }
@@ -169,15 +172,7 @@ var Dialog = Widget.extend({
 
         var self = this;
         this.appendTo($('<div/>')).then(function () {
-            var $main = self.$modal.find("main:first");
-            if ($main.length === 0) {
-                $main = self.$modal.find(".modal-body:first");
-            }
-            if (self.$el.tagName !== 'MAIN') {
-                self.$el.removeClass(".modal-body");
-                self.$el = $('<main class="modal-body"/>').append(self.$el);
-            }
-            $main.replaceWith(self.$el);
+            self.$modal.find(".modal-body").replaceWith(self.$el);
             self.$modal.attr('open', true);
             self.$modal.removeAttr("aria-hidden");
             self.$modal.modal('show');
@@ -212,13 +207,11 @@ var Dialog = Widget.extend({
         $('.tooltip').remove(); //remove open tooltip if any to prevent them staying when modal has disappeared
         if (this.$modal) {
             this.$modal.modal('hide');
-            this.$modal.removeAttr('open');
-            this.$modal.attr('aria-hidden', true);
             this.$modal.remove();
         }
 
         if (!isFocusSet) {
-            var modals = $('body > [role="dialog"]').filter(':visible');
+            var modals = $('body > .modal').filter(':visible');
             if (modals.length) {
                 modals.last().focus();
                 // Keep class modal-open (deleted by bootstrap hide fnct) on body to allow scrolling inside the modal
@@ -300,9 +293,10 @@ Dialog.alert = function (owner, message, options) {
     return new Dialog(owner, _.extend({
         size: 'medium',
         buttons: buttons,
-        $content: $('<main role="alert"/>').append($('<p>', {
+        $content: $('<main/>', {
+            role: 'alert',
             text: message,
-        })),
+        }),
         title: _t("Alert"),
     }, options)).open({shouldFocusButtons:true});
 };
@@ -325,9 +319,10 @@ Dialog.confirm = function (owner, message, options) {
     return new Dialog(owner, _.extend({
         size: 'medium',
         buttons: buttons,
-        $content: $('<main role="alert">').append($('<p>', {
+        $content: $('<main/>', {
+            role: 'alert',
             text: message,
-        })),
+        }),
         title: _t("Confirmation"),
     }, options)).open({shouldFocusButtons:true});
 };
@@ -358,7 +353,7 @@ Dialog.safeConfirm = function (owner, message, options) {
             text: message,
         });
     }
-    $content = $('<main role="alert"/>').append($content, $securityCheck);
+    $content = $('<main/>', {role: 'alert'}).append($content, $securityCheck);
 
     var buttons = [
         {
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index cb676871fc5..51816220c9f 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1603,7 +1603,7 @@ var AttachmentImage = AbstractField.extend({
             this.$el.empty().append($('<img>/', {
                 src: "/web/image/" + this.value.data.id + "?unique=1",
                 title: this.value.data.display_name,
-                alt: _("Image")
+                alt: _t("Image")
             }));
         }
     }
diff --git a/addons/web/static/src/js/views/kanban/kanban_column_quick_create.js b/addons/web/static/src/js/views/kanban/kanban_column_quick_create.js
index f554d333bc9..170b950a49d 100644
--- a/addons/web/static/src/js/views/kanban/kanban_column_quick_create.js
+++ b/addons/web/static/src/js/views/kanban/kanban_column_quick_create.js
@@ -216,7 +216,7 @@ var ColumnQuickCreate = Widget.extend({
         }
 
         // ignore clicks in modals
-        if ($(event.target).closest('[role="dialog"]').length) {
+        if ($(event.target).closest('.modal').length) {
             return;
         }
 
diff --git a/addons/web/static/src/js/views/kanban/kanban_record_quick_create.js b/addons/web/static/src/js/views/kanban/kanban_record_quick_create.js
index 749938e8b9e..bf7e60b68c3 100644
--- a/addons/web/static/src/js/views/kanban/kanban_record_quick_create.js
+++ b/addons/web/static/src/js/views/kanban/kanban_record_quick_create.js
@@ -232,7 +232,7 @@ var RecordQuickCreate = Widget.extend({
         }
 
         // ignore clicks in modals
-        if ($(ev.target).closest('[role="dialog"]').length) {
+        if ($(ev.target).closest('.modal').length) {
             return;
         }
 
diff --git a/addons/web/static/src/js/views/list/list_editable_renderer.js b/addons/web/static/src/js/views/list/list_editable_renderer.js
index 26b4f68d303..643cd52a282 100644
--- a/addons/web/static/src/js/views/list/list_editable_renderer.js
+++ b/addons/web/static/src/js/views/list/list_editable_renderer.js
@@ -758,7 +758,7 @@ ListRenderer.include({
                 break;
         }
     },
-    /** 
+    /**
      * It will returns the first visible widget that is editable
      *
      * @private
@@ -768,9 +768,9 @@ ListRenderer.include({
         var record = this.state.data[this.currentRow];
         var recordWidgets = this.allFieldWidgets[record.id];
         var firstWidget = _.find(recordWidgets, function (widget) {
-            var isFirst = widget.$el.is(':visible') && 
+            var isFirst = widget.$el.is(':visible') &&
                                 (widget.$el.has('input').length > 0 ||
-                                widget.tagName== 'input') && 
+                                widget.tagName== 'input') &&
                             !widget.$el.hasClass('o_readonly_modifier');
             return isFirst;
         });
@@ -923,9 +923,9 @@ ListRenderer.include({
 
         // ignore clicks in modals, except if the list is in a modal, and the
         // click is performed in that modal
-        var $clickModal = $(event.target).closest('[role="dialog"]');
+        var $clickModal = $(event.target).closest('.modal');
         if ($clickModal.length) {
-            var $listModal = this.$el.closest('[role="dialog"]');
+            var $listModal = this.$el.closest('.modal');
             if ($clickModal.prop('id') !== $listModal.prop('id')) {
                 return;
             }
diff --git a/addons/web/static/src/js/widgets/change_password.js b/addons/web/static/src/js/widgets/change_password.js
index b2e4e013335..c05fa30408b 100644
--- a/addons/web/static/src/js/widgets/change_password.js
+++ b/addons/web/static/src/js/widgets/change_password.js
@@ -28,7 +28,7 @@ var ChangePassword = AbstractAction.extend({
         var $button = self.$('.oe_form_button');
         $button.appendTo(this.getParent().$footer);
         $button.eq(1).click(function () {
-            self.$el.parents('[role="dialog"]').modal('hide');
+            self.$el.parents('.modal').modal('hide');
         });
         $button.eq(0).click(function () {
             self._rpc({
diff --git a/addons/web/static/src/js/widgets/debug_manager.js b/addons/web/static/src/js/widgets/debug_manager.js
index 4bdc27448a0..4b86b76c36d 100644
--- a/addons/web/static/src/js/widgets/debug_manager.js
+++ b/addons/web/static/src/js/widgets/debug_manager.js
@@ -848,7 +848,7 @@ if (config.debug) {
                         if (action) {
                             var controller = parent.getCurrentControllerInDialog();
                             self.debugManager = new DebugManager(self);
-                            var $header = self.$modal.find('header.modal-header:first');
+                            var $header = self.$modal.find('.modal-header:first');
                             return self.debugManager.prependTo($header).then(function () {
                                 self.debugManager.update('action', action, controller.widget);
                             });
diff --git a/addons/web/static/src/js/widgets/domain_selector_dialog.js b/addons/web/static/src/js/widgets/domain_selector_dialog.js
index d0c0030b100..46b54089c5f 100644
--- a/addons/web/static/src/js/widgets/domain_selector_dialog.js
+++ b/addons/web/static/src/js/widgets/domain_selector_dialog.js
@@ -43,7 +43,7 @@ return Dialog.extend({
         var self = this;
         this.opened().then(function () {
             // this restores default modal height (bootstrap) and allows field selector to overflow
-            self.$el.css('overflow', 'visible').closest('[role="dialog"]').css('height', 'auto');
+            self.$el.css('overflow', 'visible').closest('.modal-dialog').css('height', 'auto');
         });
         return $.when(
             this._super.apply(this, arguments),
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index 715c381e553..4d00f1be3cf 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -508,4 +508,8 @@
 
     // Records colours
     @include o-kanban-record-color;
+
+    .oe_kanban_color_help {
+        @include o-position-absolute(0, 5px, 0, -1px);
+    }
 }
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index cf04a8d32f8..efb8dce7598 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -337,14 +337,6 @@
         }
     }
 }
-.oe_kanban_color_help {
-    bottom: 0px;
-    left: -1px;
-    top: 0px;
-    width: 6px;
-    position: absolute;
-    right: auto;
-}
 @mixin o-kanban-slim-col {
     position: relative;
     @include o-flex(0, 0, auto);
diff --git a/addons/web/static/src/xml/dialog.xml b/addons/web/static/src/xml/dialog.xml
index eb1a67ee98d..e55a17f26ef 100644
--- a/addons/web/static/src/xml/dialog.xml
+++ b/addons/web/static/src/xml/dialog.xml
@@ -3,7 +3,7 @@
 
 <!-- These templates are accessible in backend and frontend -->
 
-<div role="dialog" t-name="Dialog" t-attf-class="modal#{technical ? ' o_technical_modal' : ''}" tabindex="-1" data-backdrop="static" t-att-id="_.uniqueId('modal_')">
+<div role="dialog" t-name="Dialog" t-attf-class="modal#{technical ? ' o_technical_modal' : ''}" tabindex="-1" data-backdrop="static" t-att-id="_.uniqueId('modal_')" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <header class="modal-header">