[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:
@@ -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)
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
Reference in New Issue
Block a user