diff options
| author | Luis González <lgonzalez@vauxoo.com> | 2020-03-16 23:51:18 +0000 |
|---|---|---|
| committer | Luis González <lgonzalez@vauxoo.com> | 2020-03-30 16:31:37 +0000 |
| commit | 8ccdbea9a7559316d9ea5fa040868d00305d0b79 (patch) | |
| tree | 427e99753ba723e3f110bf520184d9d53508dccf /addons/web/static/src/xml | |
| parent | e4be7ad7a6367f3274b5e983c7719f1ed5d6f2c7 (diff) | |
[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>
Diffstat (limited to 'addons/web/static/src/xml')
| -rw-r--r-- | addons/web/static/src/xml/base.xml | 16 |
1 files changed, 9 insertions, 7 deletions
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> |