[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
This commit is contained in:
Luis González
2018-08-17 16:12:04 +02:00
committed by Martin Trigaux
parent d2fd2f2083
commit bb5a9a6ae6
3 changed files with 10 additions and 9 deletions
+1
View File
@@ -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)
+8 -8
View File
@@ -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">
@@ -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"/>