MDL-74800 message: fix invalid aria-label attributes

This commit is contained in:
Ferran Recio
2022-08-08 14:49:01 +02:00
parent a866652ea4
commit 798edb457c
12 changed files with 83 additions and 53 deletions
@@ -42,11 +42,19 @@
{{$classes}}popover-region-notifications{{/classes}}
{{$attributes}}id="nav-notification-popover-container" data-userid="{{userid}}"{{/attributes}}
{{$togglelabel}}{{#str}} shownotificationwindownonew, message {{/str}}{{/togglelabel}}
{{$togglelabel}}{{!
}}{{^unreadcount}} {{#str}} shownotificationwindownonew, message {{/str}} {{/unreadcount}} {{!
}}{{#unreadcount}} {{#str}} shownotificationwindowwithcount, message, {{.}} {{/str}} {{/unreadcount}} {{!
}}{{/togglelabel}}
{{$togglecontent}}
{{#pix}} i/notifications, core, {{#str}} togglenotificationmenu, message {{/str}} {{/pix}}
<div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container"
aria-label="{{#str}} unreadnotifications, core_message, {{unreadcount}} {{/str}}">{{unreadcount}}</div>
<div
class="count-container {{^unreadcount}}hidden{{/unreadcount}}"
data-region="count-container"
aria-hidden=true
>
{{unreadcount}}
</div>
{{/togglecontent}}
{{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}
@@ -81,9 +89,9 @@
{{/content}}
{{/ core/popover_region }}
{{#js}}
require(['jquery', 'message_popup/notification_popover_controller'], function($, controller) {
require(['jquery', 'message_popup/notification_popover_controller'], function($, Controller) {
var container = $('#nav-notification-popover-container');
var controller = new controller(container);
var controller = new Controller(container);
controller.registerEventListeners();
controller.registerListNavigationEventListeners();
});
@@ -100,9 +100,9 @@
<span
class="badge badge-pill badge-primary {{^unreadcount}}hidden{{/unreadcount}}"
data-region="unread-count"
aria-label="{{#str}} unreadmessages, core_message, {{unreadcount}} {{/str}}"
>
{{unreadcount}}
<span aria-hidden="true">{{unreadcount}}</span>
<span class="sr-only">{{#str}} unreadmessages, core_message, {{unreadcount}} {{/str}}</span>
</span>
<div class="text-muted ml-auto">
@@ -65,9 +65,10 @@
>
{{#str}} requests {{/str}}
<span class="badge badge-primary bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
data-region="contact-request-count"
aria-label="{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}">
{{contactrequestcount}}
data-region="contact-request-count"
>
<span aria-hidden="true">{{contactrequestcount}}</span>
<span class="sr-only">{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}</span>
</span>
</a>
</li>
@@ -95,4 +96,4 @@
{{/ core_message/message_drawer_view_contacts_body_section_requests }}
</div>
</div>
</div>
</div>
@@ -59,13 +59,17 @@
<div class="w-100 text-truncate ml-2">
<div class="d-flex">
<strong class="m-0 text-truncate">{{name}}</strong>
<span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary" data-region="favourite-icon-container"
aria-label="{{#str}} favourites, core {{/str}}">
{{#pix}} i/star-rating, core {{/pix}}
<span
class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary"
data-region="favourite-icon-container"
>
{{#pix}} i/star-rating, core, {{#str}} favourites, core {{/str}} {{/pix}}
</span>
<span class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary" data-region="muted-icon-container"
aria-label="{{#str}} mutedconversation, core_message {{/str}}">
{{#pix}} i/muted, core {{/pix}}
<span
class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary"
data-region="muted-icon-container"
>
{{#pix}} i/muted, core, {{#str}} mutedconversation, core_message {{/str}} {{/pix}}
</span>
</div>
{{#showonlinestatus}}
@@ -58,13 +58,17 @@
<div class="w-100 text-truncate ml-2">
<div class="d-flex">
<strong class="m-0 text-truncate">{{name}}</strong>
<span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary" data-region="favourite-icon-container"
aria-label="{{#str}} favourites, core {{/str}}">
{{#pix}} i/star-rating, core {{/pix}}
<span
class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary"
data-region="favourite-icon-container"
>
{{#pix}} i/star-rating, core, {{#str}} favourites, core {{/str}} {{/pix}}
</span>
<span class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary" data-region="muted-icon-container"
aria-label="{{#str}} mutedconversation, core_message {{/str}}">
{{#pix}} i/muted, core {{/pix}}
<span
class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary"
data-region="muted-icon-container"
>
{{#pix}} i/muted, core, {{#str}} mutedconversation, core_message {{/str}} {{/pix}}
</span>
</div>
{{#showonlinestatus}}
@@ -75,4 +79,4 @@
{{/showonlinestatus}}
</div>
</div>
</div>
</div>
@@ -58,13 +58,17 @@
<div class="w-100 text-truncate ml-2">
<div class="d-flex">
<strong class="m-0 text-truncate">{{name}}</strong>
<span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary"
data-region="favourite-icon-container" aria-label="{{#str}} favourites, core {{/str}}">
{{#pix}} i/star-rating, core {{/pix}}
<span
class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary"
data-region="favourite-icon-container"
>
{{#pix}} i/star-rating, core, {{#str}} favourites, core {{/str}} {{/pix}}
</span>
<span class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary" data-region="muted-icon-container"
aria-label="{{#str}} mutedconversation, core_message {{/str}}">
{{#pix}} i/muted, core {{/pix}}
<span
class="{{^ismuted}}hidden{{/ismuted}} ml-1 text-primary"
data-region="muted-icon-container"
>
{{#pix}} i/muted, core, {{#str}} mutedconversation, core_message {{/str}} {{/pix}}
</span>
</div>
<p class="m-0 text-truncate">{{subname}}</p>
@@ -67,10 +67,12 @@
<a href="#" data-route="view-contacts" role="button">
{{#pix}} i/user, core {{/pix}}
{{#str}} contacts, core_message {{/str}}
<span class="badge badge-primary bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
data-region="contact-request-count"
aria-label="{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}">
{{contactrequestcount}}
<span
class="badge badge-primary bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}"
data-region="contact-request-count"
>
<span aria-hidden="true">{{contactrequestcount}}</span>
<span class="sr-only">{{#str}} pendingcontactrequests, core_message, {{contactrequestcount}} {{/str}}</span>
</span>
</a>
</div>
@@ -54,17 +54,19 @@
{{#pix}} t/expanded, core {{/pix}}
</span>
<span class="font-weight-bold">{{$title}}{{/title}}</span>
<small class="hidden ml-1" data-region="section-total-count-container"
aria-label="{{#str}} totalconversations, core_message, {{count.total}} {{/str}}">
(<span data-region="section-total-count">{{count.total}}</span>)
<small class="hidden ml-1" data-region="section-total-count-container">
(<span aria-hidden="true" data-region="section-total-count">{{count.total}}</span>{{!
}}<span class="sr-only">{{#str}} totalconversations, core_message, {{count.total}} {{/str}}</span>)
</small>
<span class="hidden ml-2" data-region="loading-icon-container">
{{> core/loading }}
</span>
<span class="{{^count.unread}}hidden{{/count.unread}} badge badge-pill badge-primary ml-auto bg-primary"
data-region="section-unread-count"
{{#count.unread}}aria-label="{{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}"{{/count.unread}}>
{{count.unread}}
<span
class="{{^count.unread}}hidden{{/count.unread}} badge badge-pill badge-primary ml-auto bg-primary"
data-region="section-unread-count"
>
<span aria-hidden="true">{{count.unread}}</span>
<span class="sr-only">{{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}</span>
</span>
</button>
</div>
+7 -2
View File
@@ -39,8 +39,13 @@
<a id="message-drawer-toggle-{{uniqid}}" class="nav-link popover-region-toggle position-relative icon-no-margin" href="#"
role="button">
{{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
<div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container"
aria-label="{{#str}} unreadconversations, core_message, {{unreadcount}} {{/str}}">{{unreadcount}}</div>
<div
class="count-container {{^unreadcount}}hidden{{/unreadcount}}"
data-region="count-container"
>
<span aria-hidden="true">{{unreadcount}}</span>
<span class="sr-only">{{#str}} unreadconversations, core_message, {{unreadcount}} {{/str}}</span>
</div>
</a>
{{> core_message/message_jumpto }}
</div>
@@ -34,7 +34,7 @@ Feature: Star and unstar conversations
And "Group 1" "core_message > Message" should exist
And I select "Group 1" conversation in messaging
And I open contact menu
And I click on "Star" "link" in the "//div[@data-region='header-container']" "xpath_element"
And I click on "Star conversation" "link" in the "conversation-actions-menu" "region"
And I go back in "view-conversation" message drawer
And I open the "Starred" conversations list
And I should see "Group 1" in the "favourites" "core_message > Message list area"
@@ -48,13 +48,13 @@ Feature: Star and unstar conversations
And "Group 1" "core_message > Message" should exist
And I select "Group 1" conversation in messaging
And I open contact menu
And I click on "Star" "link" in the "//div[@data-region='header-container']" "xpath_element"
And I click on "Star conversation" "link" in the "conversation-actions-menu" "region"
And I go back in "view-conversation" message drawer
And I open the "Starred" conversations list
And I should see "Group 1" in the "favourites" "core_message > Message list area"
And I select "Group 1" conversation in messaging
And I open contact menu
And I click on "Unstar" "link" in the "//div[@data-region='header-container']" "xpath_element"
And I click on "Unstar" "link" in the "conversation-actions-menu" "region"
And I go back in "view-conversation" message drawer
And I open the "Starred" conversations list
And I should not see "Group 1" in the "favourites" "core_message > Message list area"
@@ -71,7 +71,7 @@ Feature: Star and unstar conversations
And "Student 2" "core_message > Message" should exist
And I select "Student 2" conversation in messaging
And I open contact menu
And I click on "Star" "link" in the "//div[@data-region='header-container']" "xpath_element"
And I click on "Star conversation" "link" in the "conversation-actions-menu" "region"
And I go back in "view-conversation" message drawer
And I open the "Starred" conversations list
And I should see "Student 2" in the "favourites" "core_message > Message list area"
@@ -90,7 +90,7 @@ Feature: Star and unstar conversations
And I should see "Student 2" in the "favourites" "core_message > Message list area"
And I select "Student 2" conversation in messaging
And I open contact menu
And I click on "Unstar" "link" in the "//div[@data-region='header-container']" "xpath_element"
And I click on "Unstar" "link" in the "conversation-actions-menu" "region"
And I go back in "view-conversation" message drawer
And I open the "Starred" conversations list
And I should not see "Group 1" in the "favourites" "core_message > Message list area"
@@ -50,7 +50,7 @@ Feature: Message send messages
Then "Group 1" "core_message > Message" should exist
And I select "Group 1" conversation in the "group-messages" conversations list
And I open contact menu
And I click on "Star" "link" in the "//div[@data-region='header-container']" "xpath_element"
And I click on "Star conversation" "link" in the "conversation-actions-menu" "region"
And I go back in "view-conversation" message drawer
And I open the "Starred" conversations list
And I should see "Group 1"
@@ -38,7 +38,7 @@ Feature: Mute and unmute conversations
And I select "Group 1" conversation in messaging
And "muted" "icon_container" in the "Group 1" "core_message > Message header" should not be visible
And I open contact menu
And I click on "Mute" "link" in the "[data-region='header-container']" "css_element"
And I click on "Mute" "link" in the "conversation-actions-menu" "region"
And "muted" "icon_container" in the "Group 1" "core_message > Message header" should be visible
And I go back in "view-conversation" message drawer
And "muted" "icon_container" in the "Group 1" "core_message > Message" should be visible
@@ -53,7 +53,7 @@ Feature: Mute and unmute conversations
And I select "Student 2" conversation in messaging
And "muted" "icon_container" in the "[data-action='view-contact']" "css_element" should not be visible
And I open contact menu
And I click on "Mute" "link" in the "[data-region='header-container']" "css_element"
And I click on "Mute" "link" in the "conversation-actions-menu" "region"
And "muted" "icon_container" in the "[data-action='view-contact']" "css_element" should be visible
And I go back in "view-conversation" message drawer
And "muted" "icon_container" in the "Student 2" "core_message > Message" should be visible
@@ -70,7 +70,7 @@ Feature: Mute and unmute conversations
And I select "Group 1" conversation in messaging
And "muted" "icon_container" in the "Group 1" "core_message > Message header" should be visible
And I open contact menu
And I click on "Unmute" "link" in the "[data-region='header-container']" "css_element"
And I click on "Unmute" "link" in the "conversation-actions-menu" "region"
And "muted" "icon_container" in the "Group 1" "core_message > Message header" should not be visible
And I go back in "view-conversation" message drawer
And "muted" "icon_container" in the "Group 1" "core_message > Message" should not be visible
@@ -88,7 +88,7 @@ Feature: Mute and unmute conversations
And I select "Student 2" conversation in messaging
And "muted" "icon_container" in the "[data-action='view-contact']" "css_element" should be visible
And I open contact menu
And I click on "Unmute" "link" in the "[data-region='header-container']" "css_element"
And I click on "Unmute" "link" in the "conversation-actions-menu" "region"
And "muted" "icon_container" in the "[data-action='view-contact']" "css_element" should not be visible
And I go back in "view-conversation" message drawer
And "muted" "icon_container" in the "Student 2" "core_message > Message" should not be visible