From daf5963845a8dda4d669e512a4ef6dcfebdd8813 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Fri, 21 Jan 2022 09:22:59 +0000
Subject: [PATCH] [FIX] web, website: rely on hotkey_service for hotkeys in
 website

Since [1] when web's owl services were made available to the frontend,
the navigation mixin does conflict with the hotkey service.
E.g.: navigation mixin consumes the 'alt' keyup event, which prevents
the hotkey service from cleaning up the hotkey overlay.

After this commit the old mixin is neutralized and hotkeys in website's
pseudo-backend layer are handled by the general hotkey service.
Also since [2] the menu items are inside `<div>` instead of `<li>`,
adapted the scss to take this into account.
Also added a CSS rule to neutralize the outline on website's menu
dropdowns which are `<a>` instead of the already handled `<button>` in
web.

[1]: https://github.com/odoo/odoo/commit/db7b485d984e50fae5a52308634166460e5fc908
[2]: https://github.com/odoo/odoo/commit/84715436d87bb05b421bc9ccaacda67d07571690

task-2738578

closes odoo/odoo#83529

X-original-commit: 88438fa9b363530aa4e5dec5599c1568fb7ccea0
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../src/legacy/frontend/keyboard_navigation_mixin.js     | 9 +++++++++
 addons/website/static/src/js/content/website_root.js     | 2 ++
 addons/website/static/src/scss/website.ui.scss           | 9 ++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js b/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js
index c67cb98b15d..3bd16401247 100644
--- a/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js
+++ b/addons/web/static/src/legacy/frontend/keyboard_navigation_mixin.js
@@ -37,10 +37,13 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
          * @param {boolean} [options.autoAccessKeys=true]
          *      Whether accesskeys should be created automatically for buttons
          *      without them in the page.
+         * @param {boolean} [options.skipRenderOverlay=false]
+         *      Whether the accesskeys overlay rendering must be skipped.
          */
         init: function (options) {
             this.options = Object.assign({
                 autoAccessKeys: true,
+                skipRenderOverlay: false,
             }, options);
             this._areAccessKeyVisible = false;
             this.BrowserDetection = new BrowserDetection();
@@ -70,6 +73,9 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
          * @private
          */
         _addAccessKeyOverlays: function () {
+            if (this.options.skipRenderOverlay) {
+                return;
+            }
             var accesskeyElements = $(document).find('[accesskey]').filter(':visible');
             _.each(accesskeyElements, function (elem) {
                 var overlay = $(_.str.sprintf("<div class='o_web_accesskey_overlay'>%s</div>", $(elem).attr('accesskey').toUpperCase()));
@@ -247,6 +253,9 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
          */
         _onKeyUp: function (keyUpEvent) {
             if ((keyUpEvent.altKey || keyUpEvent.key === 'Alt') && !keyUpEvent.ctrlKey) {
+                if (this.options.skipRenderOverlay) {
+                    return;
+                }
                 this._hideAccessKeyOverlay();
                 if (keyUpEvent.preventDefault) keyUpEvent.preventDefault(); else keyUpEvent.returnValue = false;
                 if (keyUpEvent.stopPropagation) keyUpEvent.stopPropagation();
diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index 987b04d2e47..ca21abd52d7 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -10,6 +10,7 @@ import "web.zoomodoo";
 import { FullscreenIndication } from '@website/js/widgets/fullscreen_indication';
 
 export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
+    // TODO remove KeyboardNavigationMixin in master
     events: _.extend({}, KeyboardNavigationMixin.events, publicRootData.PublicRoot.prototype.events || {}, {
         'click .js_change_lang': '_onLangChangeClick',
         'click .js_publish_management .js_publish_btn': '_onPublishBtnClick',
@@ -30,6 +31,7 @@ export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMi
         this.isFullscreen = false;
         KeyboardNavigationMixin.init.call(this, {
             autoAccessKeys: false,
+            skipRenderOverlay: true,
         });
         return this._super(...arguments);
     },
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 52ac3dc9384..5336b7ef0aa 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -89,6 +89,9 @@ body.o_connected_user {
     a:hover, a:focus {
         text-decoration: none;
     }
+    a.dropdown-toggle {
+        outline: none;
+    }
     .dropdown-menu {
         border-top: 0;
         margin-top: 0;
@@ -112,13 +115,17 @@ body.o_connected_user {
         }
     }
     .o_menu_systray {
-        > li > a {
+        > li > a, > div > a {
             &.css_edit_dynamic{
                 padding: 0 $grid-gutter-width/4;
             }
 
             &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic {
                 @include button-variant($o-brand-primary, $o-brand-primary);
+                &.active, &:hover, &:focus, &:active {
+                    outline: none;
+                    box-shadow: none !important;
+                }
             }
 
             &, &:hover, &:focus {