From b82ba2a8fdb5cf9e273862028e1be6043949bafc Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Wed, 26 Jan 2022 16:15:15 +0000
Subject: [PATCH] [REF] *: BS5: Migrate modals and .btn-close for modals and
 alerts

- modal 'show' option doesn't exist anymore
  -> We need to call .show()

- by default, show is not the default
  -> we need to call .show() explicitly.

- generic close button for dismissing content like modals and alerts.

- BS5 modals needs `modal-dialog` class to work

- normally we need also to add `modal-content` class but as the original
XML don't have this nested level of div we don't use it, but instead
we add `pointer-events: auto` for all children `DIV` of `modal-dialog`
-> See DocumentViewer

Task ID: 2766483

Part-of: odoo/odoo#95450
---
 addons/mail/static/src/scss/composer.scss                 | 6 ++++++
 addons/mail/static/src/xml/thread.xml                     | 2 +-
 .../static/src/js/product_configurator_modal.js           | 7 +++++--
 addons/web/static/src/core/dialog/dialog.xml              | 2 +-
 addons/web/static/src/legacy/js/core/dialog.js            | 5 +++--
 .../web/static/src/legacy/js/views/form/form_renderer.js  | 4 +++-
 addons/web/static/src/legacy/xml/base.xml                 | 6 ++----
 addons/web/static/src/legacy/xml/dialog.xml               | 2 +-
 addons/web/static/src/views/form/form_controller.xml      | 4 +---
 addons/web/static/tests/core/dialog_tests.js              | 2 +-
 addons/web/static/tests/legacy/core/owl_dialog_tests.js   | 8 ++++----
 .../static/tests/legacy/fields/relational_fields_tests.js | 4 ++--
 addons/web/static/tests/legacy/views/form_tests.js        | 4 ++--
 addons/web/static/tests/legacy/views/kanban_tests.js      | 2 +-
 .../web/static/tests/views/fields/many2one_field_tests.js | 4 ++--
 addons/web/static/tests/views/form/form_view_tests.js     | 2 +-
 addons/web/static/tests/views/kanban_view_tests.js        | 2 +-
 addons/web/static/tests/views/view_tests.js               | 4 +---
 .../static/tests/webclient/actions/close_action_tests.js  | 2 +-
 .../static/tests/webclient/actions/load_state_tests.js    | 2 +-
 .../static/tests/webclient/actions/window_action_tests.js | 2 +-
 addons/web_editor/static/src/js/common/ace.js             | 2 +-
 addons/web_editor/static/src/xml/ace.xml                  | 4 +---
 addons/website_event/static/src/js/website_event.js       | 6 ++++--
 .../views/event_templates_page_registration.xml           | 2 +-
 addons/website_forum/views/website_forum.xml              | 2 +-
 addons/website_sale/static/src/js/website_sale.js         | 4 ++--
 .../static/src/js/website_sale_wishlist.js                | 2 +-
 addons/website_slides/static/src/xml/slide_quiz.xml       | 2 +-
 odoo/addons/base/views/onboarding_views.xml               | 4 +---
 odoo/addons/test_lint/tests/eslintrc                      | 2 ++
 31 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 5f6a4d3f487..908fd4b3511 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -47,6 +47,12 @@
         position: relative;
         width: 100%;
         height: 100%;
+        padding: 0;
+
+        /* Act as `modal-content` */
+        & > div {
+            pointer-events: auto;
+        }
 
         .o_viewer-header {
             display: flex;
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index a524197f132..fc0a8ddeeab 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -5,7 +5,7 @@
         @param {mail.DocumentViewer} widget
     -->
     <t t-name="DocumentViewer.Content">
-        <div class="o_viewer_content">
+        <div class="o_viewer_content modal-dialog modal-fullscreen">
             <t t-set="model" t-value="widget.modelName"/>
             <div class="o_viewer-header">
                 <span class="o_image_caption">
diff --git a/addons/sale_product_configurator/static/src/js/product_configurator_modal.js b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
index c2981569043..26dbd7033fd 100644
--- a/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
+++ b/addons/sale_product_configurator/static/src/js/product_configurator_modal.js
@@ -113,8 +113,11 @@ var OptionalProductsModal = Dialog.extend(ServicesMixin, VariantMixin, {
                 self.$modal.find(".modal-body").replaceWith(self.$el);
                 self.$modal.attr('open', true);
                 self.$modal.removeAttr("aria-hidden");
-                self.$modal.modal().appendTo(self.container);
-                self.$modal.focus();
+                self.$modal.appendTo(self.container);
+                const modal = new Modal(self.$modal[0], {
+                    focus: true,
+                });
+                modal.show();
                 self._openedResolver();
 
                 // Notifies OwlDialog to adjust focus/active properties on owl dialogs
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index cb900b1d1d9..1dc23ecbe2b 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -18,7 +18,7 @@
                                 <t t-esc="props.title"/>
                             </h4>
                             <t t-if="!isFullscreen">
-                                <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="data.close">×</button>
+                                <button type="button" class="btn-close" aria-label="Close" tabindex="-1" t-on-click="data.close"></button>
                             </t>
                         </header>
                         <!-- FIXME: WOWL there is a bug on t-portal on owl, in which t-portal don't work on multinode.
diff --git a/addons/web/static/src/legacy/js/core/dialog.js b/addons/web/static/src/legacy/js/core/dialog.js
index 37125a555d8..a95a1271ec4 100644
--- a/addons/web/static/src/legacy/js/core/dialog.js
+++ b/addons/web/static/src/legacy/js/core/dialog.js
@@ -204,11 +204,12 @@ var Dialog = Widget.extend({
             if (self.$parentNode) {
                 self.$modal.appendTo(self.$parentNode);
             }
-            self.$modal.modal({
-                show: true,
+            const modalNode = self.$modal[0];
+            const modal = new Modal(modalNode, {
                 backdrop: self.backdrop,
                 keyboard: false,
             });
+            modal.show();
             self._openedResolver();
             if (options && options.shouldFocusButtons) {
                 self._onFocusControlButton();
diff --git a/addons/web/static/src/legacy/js/views/form/form_renderer.js b/addons/web/static/src/legacy/js/views/form/form_renderer.js
index ee2922433a7..c370e219950 100644
--- a/addons/web/static/src/legacy/js/views/form/form_renderer.js
+++ b/addons/web/static/src/legacy/js/views/form/form_renderer.js
@@ -18,7 +18,7 @@ var FormRenderer = BasicRenderer.extend({
     className: "o_form_view",
     events: _.extend({}, BasicRenderer.prototype.events, {
         'click .o_notification_box .oe_field_translate': '_onTranslate',
-        'click .o_notification_box .close': '_onTranslateNotificationClose',
+        'click .o_notification_box .btn-close': '_onTranslateNotificationClose',
         'shown.bs.tab a[data-toggle="tab"]': '_onNotebookTabChanged',
         'click .o_form_label': '_onFieldLabelClicked',
     }),
@@ -1367,6 +1367,8 @@ var FormRenderer = BasicRenderer.extend({
      * @param {MouseEvent} ev
      */
     _onTranslateNotificationClose: function(ev) {
+        const notificationElement = this.el.querySelector('.o_notification_box');
+        Alert.getOrCreateInstance(notificationElement).close();
         delete this.alertFields[this.state.res_id];
     },
 });
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 7417c09d2ef..e7f2e33286a 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -255,7 +255,7 @@
                                 <t t-esc="props.title"/>
                                 <span t-if="props.subtitle" class="o_subtitle text-muted small" t-esc="props.subtitle"/>
                             </h4>
-                            <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="_close">×</button>
+                            <button type="button" class="btn-close" aria-label="Close" tabindex="-1" t-on-click="_close"></button>
                         </header>
                         <main class="modal-body">
                             <t t-slot="default"/>
@@ -1513,9 +1513,7 @@
 
 <t t-name="notification-box">
     <div t-attf-class="o_notification_box mb0 alert alert-dismissible alert-{{type}}" role="alertdialog">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-            <span class="fa fa-times"></span>
-        </button>
+        <button type="button" class="btn-close" aria-label="Close"></button>
     </div>
 </t>
 
diff --git a/addons/web/static/src/legacy/xml/dialog.xml b/addons/web/static/src/legacy/xml/dialog.xml
index d9b1e71e899..c46e0256274 100644
--- a/addons/web/static/src/legacy/xml/dialog.xml
+++ b/addons/web/static/src/legacy/xml/dialog.xml
@@ -15,7 +15,7 @@
             <div class="modal-content">
                 <header t-if="renderHeader" class="modal-header">
                     <h4 class="modal-title"><t t-out="title"/><span class="o_subtitle text-muted small" t-out="subtitle"/></h4>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="-1">×</button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" tabindex="-1"></button>
                 </header>
                 <main class="modal-body"/>
                 <footer t-if="renderFooter" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1"/>
diff --git a/addons/web/static/src/views/form/form_controller.xml b/addons/web/static/src/views/form/form_controller.xml
index 755d8ab81b1..9b72bc3253c 100644
--- a/addons/web/static/src/views/form/form_controller.xml
+++ b/addons/web/static/src/views/form/form_controller.xml
@@ -58,9 +58,7 @@
             <t t-foreach="Array.from(this.translateAlertData[this.model.root.resId])" t-as="field" t-key="field.name">
                 <strong><a class="o_field_translate" t-att-name="field.name" href="#"><t t-esc="field.string"/><t t-if="!field_last">, </t></a></strong>
             </t>
-            <button t-on-click="() => this.closeTranslateAlert()" type="button" class="close" aria-label="Close">
-                <span class="fa fa-times"></span>
-            </button>
+            <button t-on-click="() => this.closeTranslateAlert()" type="button" class="btn-close" aria-label="Close"></button>
         </div>
     </t>
 
diff --git a/addons/web/static/tests/core/dialog_tests.js b/addons/web/static/tests/core/dialog_tests.js
index b3903c24195..260c503cb55 100644
--- a/addons/web/static/tests/core/dialog_tests.js
+++ b/addons/web/static/tests/core/dialog_tests.js
@@ -112,7 +112,7 @@ QUnit.module("Components", (hooks) => {
         Parent.components = { Dialog };
         parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
-        await click(target, ".o_dialog header button.close");
+        await click(target, ".o_dialog header button.btn-close");
         assert.verifySteps(["close"]);
     });
 
diff --git a/addons/web/static/tests/legacy/core/owl_dialog_tests.js b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
index 9d40d2a1bce..df11849ead8 100644
--- a/addons/web/static/tests/legacy/core/owl_dialog_tests.js
+++ b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
@@ -84,7 +84,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
             // Basic layout with default properties
             assert.containsOnce(dialog, '.modal.o_technical_modal');
             assert.hasClass(dialog.querySelector('.modal .modal-dialog'), 'modal-lg');
-            assert.containsOnce(dialog, '.modal-header > button.close');
+            assert.containsOnce(dialog, '.modal-header > button.btn-close');
             assert.containsOnce(dialog, '.modal-footer > button.btn.btn-primary');
             assert.strictEqual(dialog.querySelector('.modal-body').innerText.trim(), "sup",
                 "Subcomponent should match with its given text");
@@ -261,7 +261,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
             assert.containsOnce(document.body, '.o_dialog');
             assert.containsOnce(document.body, '.o_legacy_dialog');
 
-            await testUtils.dom.click(modals[modals.length - 1].querySelector('.close'));
+            await testUtils.dom.click(modals[modals.length - 1].querySelector('.btn-close'));
 
             modals = document.querySelectorAll('.modal');
             assert.notOk(modals[modals.length - 1].classList.contains('o_inactive_modal'),
@@ -514,12 +514,12 @@ odoo.define('web.owl_dialog_tests', function (require) {
                 "wowl"
             );
 
-            await testUtils.dom.click(target.querySelector(`.o_dialog .modal-header .close`));
+            await testUtils.dom.click(target.querySelector(`.o_dialog .modal-header .btn-close`));
             assert.containsNone(target, ".o_dialog");
             assert.containsOnce(target, ".modal");
             assert.containsOnce(target, ".modal[tabindex='-1']");
 
-            await testUtils.dom.click(target.querySelector(`.modal-header .close`));
+            await testUtils.dom.click(target.querySelector(`.modal-header .btn-close`));
             assert.containsNone(target, ".o_dialog");
             assert.containsNone(target, ".modal");
         });
diff --git a/addons/web/static/tests/legacy/fields/relational_fields_tests.js b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
index f3b6be7bada..0b607edf551 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
@@ -339,7 +339,7 @@ QUnit.module('Legacy relational_fields', {
         assert.ok($('body').hasClass('modal-open'), 'Modal is said opened');
 
         // Close second modal
-        await testUtils.dom.click($modals.last().find('button[class="close"]'));
+        await testUtils.dom.click($modals.last().find('button[class="btn-close"]'));
         var $modal = $('.modal');
         $focusedModal = $(document.activeElement).closest('.modal');
 
@@ -349,7 +349,7 @@ QUnit.module('Legacy relational_fields', {
         assert.ok($('body').hasClass('modal-open'), 'Modal is said opened');
 
         // Close first modal
-        await testUtils.dom.click($modal.find('button[class="close"]'));
+        await testUtils.dom.click($modal.find('button[class="btn-close"]'));
         $modal = $('.modal-dialog.modal-lg');
 
         assert.equal($modal.length, 0, 'There should be no modal');
diff --git a/addons/web/static/tests/legacy/views/form_tests.js b/addons/web/static/tests/legacy/views/form_tests.js
index 8bb1025f471..584fb64f723 100644
--- a/addons/web/static/tests/legacy/views/form_tests.js
+++ b/addons/web/static/tests/legacy/views/form_tests.js
@@ -6392,7 +6392,7 @@ QUnit.module('LegacyViews', {
 
         await testUtils.dom.click(form.$('.o_external_button'));
         // Close modal
-        await testUtils.dom.click($('.modal').last().find('button[class="close"]'));
+        await testUtils.dom.click($('.modal').last().find('button[class="btn-close"]'));
         assert.notStrictEqual($(".o_content").scrollTop(), 0,
             "scroll position should not be 0 after closing modal");
         assert.containsNone(document.body, '.modal', 'There should be no modal');
@@ -7318,7 +7318,7 @@ QUnit.module('LegacyViews', {
         assert.containsOnce(form, '.o_form_view .alert > div', "should have a translation alert");
 
         // remove translation alert by click X and check alert even after form reload
-        await testUtils.dom.click(form.$('.o_form_view .alert > .close'));
+        await testUtils.dom.click(form.$('.o_form_view .alert > .btn-close'));
         assert.containsNone(form, '.o_form_view .alert > div', "should not have a translation alert");
 
         await form.reload();
diff --git a/addons/web/static/tests/legacy/views/kanban_tests.js b/addons/web/static/tests/legacy/views/kanban_tests.js
index 31b76c4173f..83fbee025ba 100644
--- a/addons/web/static/tests/legacy/views/kanban_tests.js
+++ b/addons/web/static/tests/legacy/views/kanban_tests.js
@@ -3986,7 +3986,7 @@ QUnit.module('LegacyViews', {
             'the name should be "xmo"');
         await testUtils.fields.editInput($('.modal .o_form_editable input'), 'ged'); // change the value
         nbRPCs = 0;
-        await testUtils.dom.click($('.modal-header .close'));
+        await testUtils.dom.click($('.modal-header .btn-close'));
         assert.containsNone(document.body, '.modal');
         assert.strictEqual(kanban.$('.o_kanban_group[data-id=5] .o_column_title').text(), 'xmo',
             'title of the column should still be "xmo"');
diff --git a/addons/web/static/tests/views/fields/many2one_field_tests.js b/addons/web/static/tests/views/fields/many2one_field_tests.js
index ad2493a15e7..d689bf90114 100644
--- a/addons/web/static/tests/views/fields/many2one_field_tests.js
+++ b/addons/web/static/tests/views/fields/many2one_field_tests.js
@@ -3892,7 +3892,7 @@ QUnit.module("Fields", (hooks) => {
         assert.hasClass(document.body, "modal-open");
 
         // Close second modal
-        await click(nextModal, "button[class='close']");
+        await click(nextModal, "button[class='btn-close']");
 
         assert.containsOnce(target, ".modal");
         assert.strictEqual(
@@ -3904,7 +3904,7 @@ QUnit.module("Fields", (hooks) => {
         assert.hasClass(document.body, "modal-open");
 
         // Close first modal
-        await click(originalModal, "button[class='close']");
+        await click(originalModal, "button[class='btn-close']");
         assert.containsNone(target, ".modal");
         assert.doesNotHaveClass(document.body, "modal-open");
     });
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 2581a4fd377..a7bbba362e2 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -6625,7 +6625,7 @@ QUnit.module("Views", (hooks) => {
         await click(target.querySelector(".o_external_button"));
 
         // Close modal
-        await click(target, '.modal-dialog button[class="close"]');
+        await click(target, '.modal-dialog button[class="btn-close"]');
         assert.notStrictEqual(
             $(".o_content").scrollTop(),
             0,
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index da21cfcc166..7309d973c27 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -4935,7 +4935,7 @@ QUnit.module("Views", (hooks) => {
 
         await editInput(target, ".modal .o_form_editable input", "ged"); // change the value
         nbRPCs = 0;
-        await click(target, ".modal-header .close");
+        await click(target, ".modal-header .btn-close");
 
         assert.containsNone(target, ".modal");
         assert.strictEqual(
diff --git a/addons/web/static/tests/views/view_tests.js b/addons/web/static/tests/views/view_tests.js
index 9b2c8695e22..35fa8808a18 100644
--- a/addons/web/static/tests/views/view_tests.js
+++ b/addons/web/static/tests/views/view_tests.js
@@ -1139,9 +1139,7 @@ QUnit.module("Views", (hooks) => {
                     <div class="modal-content">
                         <div class="modal-header">
                             <h5 class="modal-title">Remove Configuration Tips</h5>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                <span aria-label="Close">×</span>
-                            </button>
+                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <div class="modal-body">
                             <p>Do you want to remove this configuration panel?</p>
diff --git a/addons/web/static/tests/webclient/actions/close_action_tests.js b/addons/web/static/tests/webclient/actions/close_action_tests.js
index 4860f4d96fb..351ade43b96 100644
--- a/addons/web/static/tests/webclient/actions/close_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/close_action_tests.js
@@ -145,7 +145,7 @@ QUnit.module("ActionManager", (hooks) => {
         // open a new dialog form
         await doAction(webClient, 5, { onClose });
 
-        await click(target, ".modal-header button.close");
+        await click(target, ".modal-header button.btn-close");
         await nextTick();
         await legacyExtraNextTick();
         assert.containsNone(target, ".modal");
diff --git a/addons/web/static/tests/webclient/actions/load_state_tests.js b/addons/web/static/tests/webclient/actions/load_state_tests.js
index c8e9ac5fa6e..75d0ed01d73 100644
--- a/addons/web/static/tests/webclient/actions/load_state_tests.js
+++ b/addons/web/static/tests/webclient/actions/load_state_tests.js
@@ -997,7 +997,7 @@ QUnit.module("ActionManager", (hooks) => {
         assert.verifySteps(["clientAction setup"]);
         await nextTick();
         assert.containsOnce(target, ".o_dialog_error");
-        await click(target, ".modal-header .close");
+        await click(target, ".modal-header .btn-close");
         assert.containsNone(target, ".o_dialog_error");
         await click(target, "nav .o_navbar_apps_menu .dropdown-toggle ");
         assert.containsN(target, ".dropdown-item.o_app", 3);
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index 91a89df656f..09e1dd2b99d 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -1954,7 +1954,7 @@ QUnit.module("ActionManager", (hooks) => {
                 "Warning modal should be opened"
             );
 
-            await click(document.querySelector(".modal.o_technical_modal button.close"));
+            await click(document.querySelector(".modal.o_technical_modal button.btn-close"));
             assert.containsNone(
                 document.body,
                 ".modal.o_technical_modal",
diff --git a/addons/web_editor/static/src/js/common/ace.js b/addons/web_editor/static/src/js/common/ace.js
index 2b744f79c45..528519d021e 100644
--- a/addons/web_editor/static/src/js/common/ace.js
+++ b/addons/web_editor/static/src/js/common/ace.js
@@ -163,7 +163,7 @@ var ViewEditor = Widget.extend({
         'click button[data-action=reset]': '_onResetClick',
         'click button[data-action=format]': '_onFormatClick',
         'click button[data-action=close]': '_onCloseClick',
-        'click #ace-view-id > .alert-warning .close': '_onCloseWarningClick'
+        'click #ace-view-id > .alert-warning .btn-close': '_onCloseWarningClick'
     },
 
     /**
diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
index 46f05469a78..574cb9a4404 100644
--- a/addons/web_editor/static/src/xml/ace.xml
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -51,9 +51,7 @@
             <span class="o_ace_editor_resource_info"/>
             <div class="alert alert-warning alert-dismissible mt-2 mb-0" role="alert">
                 Editing a built-in file through this editor is not advised, as it will prevent it from being updated during future App upgrades.
-                <button type="button" class="close" aria-label="Close">
-                    <span>×</span>
-                </button>
+                <button type="button" class="btn-close" aria-label="Close"></button>
             </div>
         </div>
         <div id="ace-view-editor"/>
diff --git a/addons/website_event/static/src/js/website_event.js b/addons/website_event/static/src/js/website_event.js
index 11990e970ce..0b64c139dfb 100644
--- a/addons/website_event/static/src/js/website_event.js
+++ b/addons/website_event/static/src/js/website_event.js
@@ -53,14 +53,16 @@ var EventRegistrationForm = Widget.extend({
             $button.attr('disabled', true);
             return ajax.jsonRpc($form.attr('action'), 'call', post).then(function (modal) {
                 var $modal = $(modal);
-                $modal.modal({backdrop: 'static', keyboard: false});
                 $modal.find('.modal-body > div').removeClass('container'); // retrocompatibility - REMOVE ME in master / saas-19
+                $modal.appendTo(document.body);
+                const modalBS = new Modal($modal[0], {backdrop: 'static', keyboard: false});
+                modalBS.show();
                 $modal.appendTo('body').modal();
                 $modal.on('click', '.js_goto_event', function () {
                     $modal.modal('hide');
                     $button.prop('disabled', false);
                 });
-                $modal.on('click', '.close', function () {
+                $modal.on('click', '.btn-close', function () {
                     $button.prop('disabled', false);
                 });
             });
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index a4f38d269cd..8a6535dc39a 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -280,7 +280,7 @@
                 <div class="modal-content">
                     <div class="modal-header align-items-center">
                         <h4 class="modal-title">Attendees</h4>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
+                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <t t-set="counter_type" t-value="1"/>
                     <t t-set="counter" t-value="0"/>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 366798d66f7..bd0f68174c8 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -1614,7 +1614,7 @@
                                 <a class="nav-link spam_menu" id="character-tab" data-toggle="tab" href="#spam_character" role="tab" aria-controls="spam_character" aria-selected="false">圾 Text</a>
                             </li>
                         </ul>
-                        <button type="button" class="close align-self-start" data-dismiss="modal"><span aria-label="Close">×</span></button>
+                        <button type="button" class="btn-close align-self-start" data-dismiss="modal"></button>
                     </div>
                     <div class="modal-body bg-100">
                         <div class="tab-content" id="o_tab_content_spam">
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index af03a546496..355c4f05507 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -380,10 +380,10 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
                 var cart_alert = $('.oe_cart').parent().find('#data_warning');
                 if (cart_alert.length === 0) {
                     $('.oe_cart').prepend('<div class="alert alert-danger alert-dismissable" role="alert" id="data_warning">'+
-                            '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> ' + data.warning + '</div>');
+                            '<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true"></button> ' + data.warning + '</div>');
                 }
                 else {
-                    cart_alert.html('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> ' + data.warning);
+                    cart_alert.html('<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true"></button> ' + data.warning);
                 }
                 $input.val(data.quantity);
             }
diff --git a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
index 359de4e3d70..dfaabb010ec 100644
--- a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
+++ b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
@@ -194,7 +194,7 @@ publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin,
                     $('.wishlist-section').prepend('<div class="mt16 alert alert-danger alert-dismissable" role="alert" id="data_warning"></div>');
                 }
                 var cart_alert = $('.wishlist-section').parent().find('#data_warning');
-                cart_alert.html('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> ' + resp.warning);
+                cart_alert.html('<button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true">&times;</button> ' + resp.warning);
             }
             sessionStorage.setItem('website_sale_cart_quantity', resp.cart_quantity);
             $('.my_cart_quantity').html(resp.cart_quantity || '<i class="fa fa-warning" /> ');
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index e2a9a8c3aa4..a3383d9a4a6 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -124,7 +124,7 @@
 
     <t t-name="slide.slide.quiz.finish">
         <div>
-            <button type="button" class="o_wslides_quiz_modal_close_btn close position-absolute" data-dismiss="modal" aria-label="Close">&#215;</button>
+            <button type="button" class="o_wslides_quiz_modal_close_btn btn-close position-absolute" data-dismiss="modal" aria-label="Close"></button>
             <div class="o_wslides_quiz_success_image d-none d-md-flex flex-shrink-0">
                 <img class="o_wslides_quiz_modal_hero" src="/website_slides/static/src/img/quiz_modal_success.svg" alt=""/>
             </div>
diff --git a/odoo/addons/base/views/onboarding_views.xml b/odoo/addons/base/views/onboarding_views.xml
index 967b9581df5..1c30a9452b0 100644
--- a/odoo/addons/base/views/onboarding_views.xml
+++ b/odoo/addons/base/views/onboarding_views.xml
@@ -6,9 +6,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">Remove Configuration Tips</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-label="Close">×</span>
-                        </button>
+                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <p>Do you want to remove this configuration panel?</p>
diff --git a/odoo/addons/test_lint/tests/eslintrc b/odoo/addons/test_lint/tests/eslintrc
index 98a199c69ac..7b70e81b5b1 100644
--- a/odoo/addons/test_lint/tests/eslintrc
+++ b/odoo/addons/test_lint/tests/eslintrc
@@ -35,6 +35,8 @@
         "moment": "readonly",
         "py": "readonly",
         "ClipboardJS": "readonly",
+        "Modal": "readonly",
+        "Alert": "readonly",
         "globalThis": "readonly",
         "module": "readonly",
         "chai": "readonly",