[FIX] web,mail: Harmful or incomplete aria-label attributes

Some elements contain superfluous `aria-label` attributes, which
overrides any default useful information. For instance, some dropdown
menus contain the `aria-label` "Dropdown menu" (e.g. the company
switcher), which doesn't add any useful information, as dropdown menus
are already labelled correctly using `aria-expanded`.

This change applies on the following buttons:
- Schedule an activity
- View attachments
- View followers
- Switch company
- Open user options from systray
- The widget `state_selection`

closes odoo/odoo#48317

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

4 files changed, 8 insertions, 7 deletions

diff --git a/addons/mail/static/src/xml/chatter.xml b/addons/mail/static/src/xml/chatter.xml
index 40e26a811b0..1f36287cdf8 100644
--- a/addons/mail/static/src/xml/chatter.xml
+++ b/addons/mail/static/src/xml/chatter.xml
@@ -119,7 +119,7 @@
             Log note
         </button>
         <button t-if="scheduleActivityButton" class="btn btn-link o_chatter_button_schedule_activity" title="Log or schedule an activity" disabled="disabled">
-            <i class="fa fa-clock-o" role="img" aria-label="Dates" title="Dates"/> <t t-if="isMobile">Activity</t><t t-else="">Schedule activity</t>
+            <i class="fa fa-clock-o" title="Dates"/> <t t-if="isMobile">Activity</t><t t-else="">Schedule activity</t>
         </button>
     </t>
 
@@ -129,7 +129,8 @@
         @param {integer} [count]
     -->
     <t t-name="mail.chatter.Attachment.Button">
-        <button class="btn btn-link o_chatter_button_attachment" title="View all the attachments of the current record">
+        <t t-set="attachment_button_aria_label">Attachments</t>
+        <button class="btn btn-link o_chatter_button_attachment" title="View all the attachments of the current record" t-attf-aria-label="#{attachment_button_aria_label} #{count}">
             <span>
                 <i class="fa fa-paperclip"/>
                 <span class="o_chatter_attachment_button_count" t-esc="count"/>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index 8789b424af2..d1f6ebd63a4 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -9,7 +9,7 @@
             <div class="o_followers_title_box btn-group">
                 <button class="btn btn-link" title="Dropdown menu - Followers"
                         data-toggle="dropdown" aria-expanded="false">
-                    <i class="fa fa-user" role="img" aria-label="Dropdown menu - Followers"></i>
+                    <i class="fa fa-user" role="img" aria-label="Followers"></i>
                     <span class="o_followers_count"/>
                 </button>
                 <div class="dropdown-menu dropdown-menu-right o_followers_list" role="menu"/>
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 879ee978220..3a3a037a0f0 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -2362,7 +2362,7 @@ var StateSelectionWidget = AbstractField.extend({
             .addClass(currentState.state_class)
             .prop('special_click', true)
             .parent().attr('title', currentState.state_name)
-            .attr('aria-label', currentState.state_name);
+            .attr('aria-label', this.string + ": " + currentState.state_name);
 
         // Render "FormSelection.Items" and move it into "FormSelection"
         var $items = $(qweb.render('FormSelection.items', {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 9e799e44e38..392025436f5 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1041,7 +1041,7 @@
 
 <t t-name="FormSelection">
     <div class="btn-group o_selection" aria-atomic="true">
-        <a href="#" data-toggle="dropdown" aria-label="Dropdown menu" title="Dropdown menu"><span class="o_status"/></a>
+        <a href="#" data-toggle="dropdown" aria-expanded="false" role="button" title="Dropdown menu"><span class="o_status"/></a>
         <div class="dropdown-menu state" role="menu"/>
     </div>
 </t>
@@ -1725,7 +1725,7 @@
 <t t-name="UserMenu">
     <li class="o_user_menu">
         <a role="button" class="dropdown-toggle o-no-caret" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#">
-            <img class="rounded-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'" alt="Avatar"/>
+            <img class="rounded-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'" alt="User"/>
             <span class="oe_topbar_name"/>
         </a>
         <div class="dropdown-menu dropdown-menu-right" role="menu">
@@ -1745,7 +1745,7 @@
 
 <t t-name="SwitchCompanyMenu">
     <li class="o_switch_company_menu">
-        <a role="button" class="dropdown-toggle o-no-caret" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+        <a role="button" class="dropdown-toggle o-no-caret" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#" title="Dropdown menu">
             <span t-attf-class="#{widget.isMobile ? 'fa fa-building-o' : 'oe_topbar_name'}">
                 <t t-if="!widget.isMobile"><t t-raw="widget.current_company_name"/></t>
             </span>