From 8ccdbea9a7559316d9ea5fa040868d00305d0b79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Gonz=C3=A1lez?= <lgonzalez@vauxoo.com>
Date: Mon, 16 Mar 2020 23:51:18 +0000
Subject: [FIX] web: Make company switcher widget usable with the keyboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 addons/web/static/src/xml/base.xml | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'addons/web/static/src/xml/base.xml')

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index b9129309c6e..54ee1d035da 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1755,24 +1755,26 @@
         </a>
         <div class="dropdown-menu dropdown-menu-right" role="menu">
             <t t-foreach="widget.user_companies" t-as="company">
-                <div role="menuitem" class="dropdown-item d-flex py-0 px-0" data-menu="company" t-att-data-company-id="company[0]">
-                    <div class="ml-auto pl-3 pr-3 border border-top-0 border-left-0 border-bottom-0 toggle_company o_py">
+                <div class="dropdown-item d-flex py-0 px-0" data-menu="company" t-att-data-company-id="company[0]">
+                    <t t-set="is_allowed" t-value="widget.allowed_company_ids.includes(company[0])"/>
+                    <t t-set="is_current" t-value="company[0] === widget.current_company"/>
+                    <div role="menuitemcheckbox" t-att-aria-checked="is_allowed" t-att-aria-label="company[1]" tabindex="0" class="ml-auto pl-3 pr-3 border border-top-0 border-left-0 border-bottom-0 toggle_company o_py">
                         <span style="height: 2rem;">
-                            <t t-if="widget.allowed_company_ids.includes(company[0])">
+                            <t t-if="is_allowed">
                                 <i class="fa fa-fw fa-check-square pt-2"></i>
                             </t>
-                            <t t-if="!widget.allowed_company_ids.includes(company[0])">
+                            <t t-if="!is_allowed">
                                 <i class="fa fa-fw fa-square-o pt-2"></i>
                             </t>
                         </span>
                     </div>
-                    <div class="d-flex flex-grow-1 align-items-center py-0 log_into pl-3 o_py" t-att-style="company[0] === widget.current_company ? 'background-color: lightgrey;' : ''">
-                        <t t-if="widget.allowed_company_ids.includes(company[0])">
+                    <div role="button" t-att-aria-pressed="is_current" aria-label="Switch to this company" tabindex="0" class="d-flex flex-grow-1 align-items-center py-0 log_into pl-3 o_py" t-att-style="is_current ? 'background-color: lightgrey;' : ''">
+                        <t t-if="is_allowed">
                             <span class='mr-3 company_label'>
                                 <t t-esc="company[1]"/>
                             </span>
                         </t>
-                        <t t-if="!widget.allowed_company_ids.includes(company[0])">
+                        <t t-if="!is_allowed">
                             <span class='mr-3 company_label text-muted'>
                                 <t t-esc="company[1]"/>
                             </span>
-- 
cgit v1.2.3