MDL-74800 message: fix invalid aria-label attributes

reskit · Aug 8, 2022 · 2493b4f · 2493b4f
1 parent 417d1b9
commit 2493b4f
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 53 deletions.
diff --git a/message/output/popup/templates/notification_popover.mustache b/message/output/popup/templates/notification_popover.mustache
@@ -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();
 });

diff --git a/message/templates/message_drawer_conversations_list.mustache b/message/templates/message_drawer_conversations_list.mustache
@@ -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">

diff --git a/message/templates/message_drawer_view_contacts_body.mustache b/message/templates/message_drawer_view_contacts_body.mustache
@@ -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>
diff --git a/message/templates/message_drawer_view_conversation_header_content_type_private.mustache b/message/templates/message_drawer_view_conversation_header_content_type_private.mustache
@@ -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}}

diff --git a/...mplates/message_drawer_view_conversation_header_content_type_private_no_controls.mustache b/...mplates/message_drawer_view_conversation_header_content_type_private_no_controls.mustache
@@ -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>
diff --git a/message/templates/message_drawer_view_conversation_header_content_type_public.mustache b/message/templates/message_drawer_view_conversation_header_content_type_public.mustache
@@ -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>

diff --git a/message/templates/message_drawer_view_overview_header.mustache b/message/templates/message_drawer_view_overview_header.mustache
@@ -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>

diff --git a/message/templates/message_drawer_view_overview_section.mustache b/message/templates/message_drawer_view_overview_section.mustache
@@ -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>

diff --git a/message/templates/message_popover.mustache b/message/templates/message_popover.mustache
@@ -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>

diff --git a/message/tests/behat/favourite_conversations.feature b/message/tests/behat/favourite_conversations.feature
@@ -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"

diff --git a/message/tests/behat/message_send_messages.feature b/message/tests/behat/message_send_messages.feature
@@ -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"

diff --git a/message/tests/behat/mute_conversations.feature b/message/tests/behat/mute_conversations.feature
@@ -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