[FIX] web: Add missing aria attributes to selectable menu items

Some menus contain items that are selected/checked when they're
activated, e.g. when a filter is applied, the menu item corresponding to
that filter is checked. However, that information of what items are
checked and what don't, is not reported correctly using aria attributes.

To solve the above, the following is performed:
- Attribute `aria-checked` is set accordingly, usually using the same
  logic as the clas `selected`
- Attribute `role` is set to `menuitemcheckbox` or `menuitemradio`
  instead of `menuitem`, so `aria-checked` is applicable

This applies on the following cases:
- Standard topbar's menus: Filter, Group by and Favorites
- The company switcher widget

closes odoo/odoo#48301

X-original-commit: 64c0b47c0e8e8fdd3fa9b1bc13f2b49b6f49f4e1
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>

1 files changed, 6 insertions, 3 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 392025436f5..b9129309c6e 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -219,7 +219,8 @@
         <t t-if="canBeOpened">
             <a class="o_menu_item_parent dropdown-item"
                 t-att-class="{ selected: props.isActive }"
-                role="menuitem"
+                t-att-aria-checked="props.isActive ? 'true' : 'false'"
+                role="menuitemcheckbox"
                 href="#"
                 t-ref="fallback-focus"
                 t-on-click.prevent="state.open = !state.open"
@@ -237,7 +238,8 @@
                     <li class="o_item_option" role="menuitem">
                         <a class="dropdown-item pl-5"
                             t-att-class="{ selected: option.isActive }"
-                            role="menuitem"
+                            t-att-aria-checked="option.isActive ? 'true' : 'false'"
+                            role="menuitemcheckbox"
                             t-att-href="option.url or '#'"
                             t-esc="option.description"
                             t-on-click.prevent="trigger('item-selected', { item: props, option: option })"
@@ -249,7 +251,8 @@
         </t>
         <a t-else="" class="dropdown-item"
             t-att-class="{ selected: props.isActive, [props.className]: props.className }"
-            role="menuitem"
+            t-att-aria-checked="props.isActive ? 'true' : 'false'"
+            role="menuitemcheckbox"
             t-att-href="props.url or '#'"
             t-on-click.prevent="trigger('item-selected', { item: props })"
             >