[IMP] mail: Add some missing aria attributes

Some aria HTML attributes were missing, and are desirable to provide a
better experience for screen reader users.

The following attributes are included:
- `aria-pressed`: Used in buttons whose function is toggled when
  pressed. In this case, it is added on the button to follow/unfollow
  a record.
- `role`: used to improve given information about what elements are for.
  In this case, it is added in the following cases:
  1. Buttons to apply filters (e.g. to filter conversations) are set
     to  role="tab". These buttons have the class `o_filter_button`.
  2. Elements who are not buttons but have the class `dropdown-menu`
     are set to role="button".

Closes #25667

3 files changed, 10 insertions, 9 deletions

diff --git a/addons/mail/static/src/js/followers.js b/addons/mail/static/src/js/followers.js
index de48b4108cc..d90b8cce261 100644
--- a/addons/mail/static/src/js/followers.js
+++ b/addons/mail/static/src/js/followers.js
@@ -93,6 +93,7 @@ var Followers = AbstractField.extend({
             this.$('.o_subtypes_list > .dropdown-toggle').attr('disabled', true);
             this.$('.o_followers_actions .dropdown-toggle').removeClass('o_followers_following');
         }
+        this.$('button.o_followers_follow_button').attr("aria-pressed", this.is_follower);
     },
     _displayGeneric: function () {
         // only display the number of followers (e.g. if read failed)
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index 85bc33d58d4..49d6095d647 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -6,7 +6,7 @@
     -->
     <t t-name="mail.systray.MessagingMenu">
         <li class="o_mail_systray_item">
-            <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false" title="Conversations" href="#">
+            <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false" title="Conversations" href="#" role="button">
                 <i class="fa fa-comments" role="img" aria-label="Messages"/> <span class="o_notification_counter badge badge-pill"/>
             </a>
             <div class="o_mail_systray_dropdown dropdown-menu dropdown-menu-right" role="menu">
@@ -17,24 +17,24 @@
                 </t>
                 <div t-if="!widget.isMobile()" class="o_mail_systray_dropdown_top">
                     <div>
-                        <button type="button" class="btn btn-link o_filter_button active"> All </button>
-                        <button type="button" class="btn btn-link o_filter_button" data-filter='chat'> Chat </button>
-                        <button type="button" class="btn btn-link o_filter_button" data-filter='channels'> Channels </button>
+                        <button type="button" class="btn btn-link o_filter_button active" role="tab"> All </button>
+                        <button type="button" class="btn btn-link o_filter_button" data-filter='chat' role="tab"> Chat </button>
+                        <button type="button" class="btn btn-link o_filter_button" data-filter='channels' role="tab"> Channels </button>
                     </div>
                     <button type="button" class="btn btn-link o_new_message"> New message </button>
                 </div>
                 <div class="o_mail_systray_dropdown_items"/>
                 <t t-if="widget.isMobile()">
                     <div class="o_mail_mobile_tabs">
-                        <div class="o_mail_mobile_tab o_filter_button active">
+                        <div class="o_mail_mobile_tab o_filter_button active" role="tab">
                             <span class="fa fa-envelope"/>
                             <span class="o_tab_title">All</span>
                         </div>
-                        <div class="o_mail_mobile_tab o_filter_button" data-filter='chat'>
+                        <div class="o_mail_mobile_tab o_filter_button" data-filter='chat' role="tab">
                             <span class="fa fa-user"/>
                             <span class="o_tab_title">Chat</span>
                         </div>
-                        <div class="o_mail_mobile_tab o_filter_button" data-filter='channels'>
+                        <div class="o_mail_mobile_tab o_filter_button" data-filter='channels' role="tab">
                             <span class="fa fa-users"/>
                             <span class="o_tab_title">Channels</span>
                         </div>
@@ -94,7 +94,7 @@
 
     <t t-name="mail.systray.ActivityMenu">
         <li class="o_mail_systray_item">
-            <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
+            <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#" role="button">
                 <i class="fa fa-clock-o" role="img" aria-label="Activities"/> <span class="o_notification_counter badge badge-pill"/>
             </a>
             <div class="o_mail_systray_dropdown dropdown-menu dropdown-menu-right" role="menu">
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index f61d22d569e..c31aa5f87ce 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.KanbanActivity">
     <div class="o_kanban_inline_block dropdown o_kanban_selection o_mail_activity">
-        <a class="dropdown-toggle o-no-caret o_activity_btn" data-toggle="dropdown">
+        <a class="dropdown-toggle o-no-caret o_activity_btn" data-toggle="dropdown" role="button">
             <span class="fa fa-clock-o fa-lg fa-fw" t-att-title="widget.selection[widget.activityState]" role="img" t-att-aria-label="widget.selection[widget.activity_state]"/>
         </a>
         <div class="dropdown-menu o_activity" role="menu"/>