[FIX] web: Add missing aria attributes in menus

Some aria attributes were missing on menus, and are required to ensure a
good compatibility with keyboard users and screen readers.

To solve the above, the following attributes are included:
- `aria-expanded`: this should be present in all dropdown menus. This is
  set on elements with class `dropdown-toggle` and `o_closed_menu`.
- `role`: used to improve given information about what elements are for.
  It is added in the following cases:
  1. Non-button elements that have the class `dropdown-menu` are set to
     `role="button"`.
  2. Menu items that have the class `dropdown-item` are set to
     `role="menuitem"`.
  3. Menu separators that have the class `dropdown-divider` are set to
     `role="separator"`.

This is a continuation of baa1c515c592

closes odoo/odoo#29719

5 files changed, 6 insertions, 3 deletions

diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 848e406c4b2..b8a5b8be3a4 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -506,7 +506,7 @@ var dom = {
 
             var $dropdownMenu = $('<ul/>', {class: 'dropdown-menu'});
             $extraItemsToggle = $('<li/>', {class: 'nav-item dropdown o_extra_menu_items'})
-                .append($('<a/>', {href: '#', class: 'nav-link dropdown-toggle o-no-caret', 'data-toggle': 'dropdown'})
+                .append($('<a/>', {role: 'button', href: '#', class: 'nav-link dropdown-toggle o-no-caret', 'data-toggle': 'dropdown', 'aria-expanded': false})
                     .append($('<i/>', {class: 'fa fa-plus'})))
                 .append($dropdownMenu);
             $extraItemsToggle.insertAfter($items.last());
diff --git a/addons/web/static/src/js/views/search/favorites_menu.js b/addons/web/static/src/js/views/search/favorites_menu.js
index 46949e901a3..8f12c5e13f2 100644
--- a/addons/web/static/src/js/views/search/favorites_menu.js
+++ b/addons/web/static/src/js/views/search/favorites_menu.js
@@ -69,6 +69,7 @@ return Widget.extend({
     },
     toggle_save_menu: function (is_open) {
         this.$save_search
+            .attr('aria-expanded', !(_.isUndefined(is_open)) ? is_open : (this.$save_search.attr('aria-expanded') === 'false'))
             .toggleClass('o_closed_menu', !(_.isUndefined(is_open)) ? !is_open : undefined)
             .toggleClass('o_open_menu', is_open);
         this.$save_name.toggle(is_open);
@@ -250,7 +251,7 @@ return Widget.extend({
             var $filter = $('<div>', {class: 'position-relative'})
                 .addClass(filter.user_id ? 'o-searchview-custom-private'
                                          : 'o-searchview-custom-public')
-                .append($('<a>', {href: '#', class: 'dropdown-item'}).text(filter.name))
+                .append($('<a>', {role: 'menuitem', href: '#', class: 'dropdown-item'}).text(filter.name))
                 .append($('<span>', {
                     class: 'fa fa-trash-o o-remove-filter',
                     on: {
diff --git a/addons/web/static/src/js/views/search/filters_menu.js b/addons/web/static/src/js/views/search/filters_menu.js
index f61bbff8045..0c30f208b70 100644
--- a/addons/web/static/src/js/views/search/filters_menu.js
+++ b/addons/web/static/src/js/views/search/filters_menu.js
@@ -199,6 +199,7 @@ var FiltersMenu = DropdownMenu.extend({
         }
         $.when(def).then(function () {
             self.$addCustomFilter
+                .attr('aria-expanded', self.generatorMenuIsOpen)
                 .toggleClass('o_closed_menu', !self.generatorMenuIsOpen)
                 .toggleClass('o_open_menu', self.generatorMenuIsOpen);
             self.$('.o_add_filter_menu').toggle();
diff --git a/addons/web/static/src/js/views/search/groupby_menu.js b/addons/web/static/src/js/views/search/groupby_menu.js
index 21a48c99fc9..b42ba47ac90 100644
--- a/addons/web/static/src/js/views/search/groupby_menu.js
+++ b/addons/web/static/src/js/views/search/groupby_menu.js
@@ -177,6 +177,7 @@ var GroupByMenu = DropdownMenu.extend({
     _toggleCustomGroupMenu: function () {
         this.generatorMenuIsOpen = !this.generatorMenuIsOpen;
         this._renderGeneratorMenu();
+        this.$addCustomGroup.attr('aria-expanded', this.generatorMenuIsOpen);
         if (this.generatorMenuIsOpen) {
             this.$groupSelector.focus();
         }
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 c9498950a04..cc0f8825643 100644
--- a/addons/web/static/src/js/widgets/switch_company_menu.js
+++ b/addons/web/static/src/js/widgets/switch_company_menu.js
@@ -53,7 +53,7 @@ var SwitchCompanyMenu = Widget.extend({
             } else {
                 a = '<span style="margin-right: 24px;"/>';
             }
-            companiesList += '<a href="#" class="dropdown-item" data-menu="company" data-company-id="' +
+            companiesList += '<a role="menuitem" href="#" class="dropdown-item" data-menu="company" data-company-id="' +
                             company[0] + '">' + a + company[1] + '</a>';
         });
         this.$('.dropdown-menu').html(companiesList);