[FIX] web: Make company switcher widget usable with the keyboard

Background
==========

After the refactor on the multi-company behavior performed for v13, now
there are two possible actions per company, depending on where they're
clicked: switch to the company or toggle it. Such actions were handled
by `<div>` elements, which aren't keyboard-reachable by default.

The Issue
=========

Because of the above, the company switcher was neither reachable nor
usable when using the keyboard.

Solution
========

To solve this, the following is performed:
- Add HTML attributes required to make elements reachable, along with
  their corresponding aria attributes
- Actions that are currently triggered when clicking on an element, now
  are also triggered when the keyboard focus is on the element and `ENTER`
  or `SPACE` are hit

Closes #47650

closes odoo/odoo#48627

X-original-commit: 33a7238d0b03ccb89e4c4d2f0d7380b5649dc4d4
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
Signed-off-by: Luis González [Vauxoo] <luisg123v@users.noreply.github.com>

1 files changed, 15 insertions, 2 deletions

diff --git a/addons/web/static/src/js/widgets/switch_company_menu.js b/addons/web/static/src/js/widgets/switch_company_menu.js
index 061edbf8b47..06d33862d57 100644
--- a/addons/web/static/src/js/widgets/switch_company_menu.js
+++ b/addons/web/static/src/js/widgets/switch_company_menu.js
@@ -19,7 +19,9 @@ var SwitchCompanyMenu = Widget.extend({
     template: 'SwitchCompanyMenu',
     events: {
         'click .dropdown-item[data-menu] div.log_into': '_onSwitchCompanyClick',
+        'keydown .dropdown-item[data-menu] div.log_into': '_onSwitchCompanyClick',
         'click .dropdown-item[data-menu] div.toggle_company': '_onToggleCompanyClick',
+        'keydown .dropdown-item[data-menu] div.toggle_company': '_onToggleCompanyClick',
     },
     // force this item to be the first one to the left of the UserMenu in the systray
     sequence: 1,
@@ -54,9 +56,13 @@ var SwitchCompanyMenu = Widget.extend({
 
     /**
      * @private
-     * @param {MouseEvent} ev
+     * @param {MouseEvent|KeyEvent} ev
      */
     _onSwitchCompanyClick: function (ev) {
+        if (ev.type == 'keydown' && ev.which != $.ui.keyCode.ENTER && ev.which != $.ui.keyCode.SPACE) {
+            return;
+        }
+        ev.preventDefault();
         ev.stopPropagation();
         var dropdownItem = $(ev.currentTarget).parent();
         var dropdownMenu = dropdownItem.parent();
@@ -76,6 +82,7 @@ var SwitchCompanyMenu = Widget.extend({
                 dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
             }
         }
+        $(ev.currentTarget).attr('aria-pressed', 'true');
         session.setCompanies(companyID, allowed_company_ids);
     },
 
@@ -85,9 +92,13 @@ var SwitchCompanyMenu = Widget.extend({
 
     /**
      * @private
-     * @param {MouseEvent} ev
+     * @param {MouseEvent|KeyEvent} ev
      */
     _onToggleCompanyClick: function (ev) {
+        if (ev.type == 'keydown' && ev.which != $.ui.keyCode.ENTER && ev.which != $.ui.keyCode.SPACE) {
+            return;
+        }
+        ev.preventDefault();
         ev.stopPropagation();
         var dropdownItem = $(ev.currentTarget).parent();
         var companyID = dropdownItem.data('company-id');
@@ -96,9 +107,11 @@ var SwitchCompanyMenu = Widget.extend({
         if (dropdownItem.find('.fa-square-o').length) {
             allowed_company_ids.push(companyID);
             dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
+            $(ev.currentTarget).attr('aria-checked', 'true');
         } else {
             allowed_company_ids.splice(allowed_company_ids.indexOf(companyID), 1);
             dropdownItem.find('.fa-check-square').addClass('fa-square-o').removeClass('fa-check-square');
+            $(ev.currentTarget).attr('aria-checked', 'false');
         }
         session.setCompanies(current_company_id, allowed_company_ids);
     },