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

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();

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);
     },

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 {