MDL-64985 message: add better aria labels to the actions menu

Add better aria labels to the action menus in messaging, renaming some labels and declaring it as a menu.
moodle · Apr 24, 2019 · e2d400a · e2d400a
1 parent 0f7c446
commit e2d400a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 42 deletions.
diff --git a/lang/en/message.php b/lang/en/message.php
@@ -27,7 +27,7 @@
 $string['addcontactconfirm'] = 'Are you sure you want to add {$a} to your contacts?';
 $string['addtoyourcontacts'] = 'Add to contacts';
 $string['addtoyourcontactsandmessage'] = 'Add to contacts and message';
-$string['addtofavourites'] = 'Star';
+$string['addtofavourites'] = 'Star conversation';
 $string['ago'] = '{$a} ago';
 $string['allusers'] = 'All messages from all users';
 $string['backto'] = 'Back to {$a}';
@@ -48,6 +48,7 @@
 $string['contactrequests'] = 'Contact requests';
 $string['contactrequestsent'] = 'Contact request sent';
 $string['contacts'] = 'Contacts';
+$string['conversationactions'] = 'Conversation actions menu';
 $string['decline'] = 'Decline';
 $string['defaultmessageoutputs'] = 'Default message outputs';
 $string['defaults'] = 'Defaults';
@@ -84,7 +85,7 @@
 $string['hidemessagewindow'] = 'Hide message window';
 $string['hidenotificationwindow'] = 'Hide notification window';
 $string['individualconversations'] = 'Private';
-$string['info'] = 'Info';
+$string['info'] = 'User info';
 $string['isnotinyourcontacts'] = '{$a} is not in your contacts';
 $string['loadmore'] = 'Load more';
 $string['loggedin'] = 'Online';
@@ -203,7 +204,7 @@
 $string['removecontactconfirm'] = 'Are you sure you want to remove {$a} from your contacts?';
 $string['removecoursefilter'] = 'Remove filter for course {$a}';
 $string['removefromyourcontacts'] = 'Remove from contacts';
-$string['removefromfavourites'] = 'Unstar';
+$string['removefromfavourites'] = 'Unstar conversation';
 $string['requirecontacttomessage'] = 'You need to request {$a} to add you as a contact to be able to message them.';
 $string['requiresconfiguration'] = 'Requires configuration';
 $string['searchforuser'] = 'Search for a user';

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
@@ -72,33 +72,39 @@
         </a>
     </div>
     <div class="ml-auto dropdown">
-        <button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            {{#pix}} i/moremenu, core {{/pix}}
+        <button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+            aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
+                {{#pix}} i/moremenu, core {{/pix}}
         </button>
-        <div class="dropdown-menu pull-right">
-            <a class="dropdown-item" href="#" data-action="view-contact">
+        <div id="conversation-actions-menu" class="dropdown-menu pull-right" role="menu"
+            aria-labelledby="conversation-actions-menu-button">
+            <a class="dropdown-item" href="#" data-action="view-contact" role="menuitem">
                 {{#str}} info, core_message {{/str}}
             </a>
-            <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#" data-action="confirm-favourite">
-                {{#str}} addtofavourites, core_message {{/str}}
+            <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#"
+                data-action="confirm-favourite" role="menuitem">
+                    {{#str}} addtofavourites, core_message {{/str}}
             </a>
-            <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#" data-action="confirm-unfavourite">
-                {{#str}} removefromfavourites, core_message {{/str}}
+            <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#"
+                data-action="confirm-unfavourite" role="menuitem">
+                    {{#str}} removefromfavourites, core_message {{/str}}
             </a>
-            <a class="dropdown-item {{#isblocked}}hidden{{/isblocked}}" href="#" data-action="request-block">
+            <a class="dropdown-item {{#isblocked}}hidden{{/isblocked}}" href="#" data-action="request-block" role="menuitem">
                 {{#str}} blockuser, core_message {{/str}}
             </a>
-            <a class="dropdown-item {{^isblocked}}hidden{{/isblocked}}" href="#" data-action="request-unblock">
+            <a class="dropdown-item {{^isblocked}}hidden{{/isblocked}}" href="#" data-action="request-unblock" role="menuitem">
                 {{#str}} unblockuser, core_message {{/str}}
             </a>
-            <a class="dropdown-item" href="#" data-action="request-delete-conversation">
-                {{#str}} deleteconversation, core_message {{/str}}
-            </a>
-            <a class="dropdown-item {{#iscontact}}hidden{{/iscontact}}" href="#" data-action="request-add-contact">
+            <a class="dropdown-item {{#iscontact}}hidden{{/iscontact}}" href="#" data-action="request-add-contact" role="menuitem">
                 {{#str}} addtoyourcontacts, core_message {{/str}}
             </a>
-            <a class="dropdown-item {{^iscontact}}hidden{{/iscontact}}" href="#" data-action="request-remove-contact">
-                {{#str}} removefromyourcontacts, core_message {{/str}}
+            <a class="dropdown-item {{^iscontact}}hidden{{/iscontact}}" href="#" data-action="request-remove-contact"
+                role="menuitem">
+                    {{#str}} removefromyourcontacts, core_message {{/str}}
+            </a>
+            <a class="dropdown-item" href="#" data-action="request-delete-conversation" role="menuitem">
+                {{#str}} deleteconversation, core_message {{/str}}
             </a>
         </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
@@ -66,18 +66,23 @@
             </a>
         </div>
         <div class="ml-auto dropdown">
-            <button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                {{#pix}} i/moremenu, core {{/pix}}
+            <button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
+                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
+                    {{#pix}} i/moremenu, core {{/pix}}
             </button>
-            <div class="dropdown-menu pull-right">
-                <a class="dropdown-item" href="#" data-action="view-group-info">
+            <div id="conversation-actions-menu" class="dropdown-menu pull-right" role="menu"
+                aria-labelledby="conversation-actions-menu-button">
+                <a class="dropdown-item" href="#" data-action="view-group-info" role="menuitem">
                     {{#str}} groupinfo, core_message {{/str}}
                 </a>
-                <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-favourite">
-                    {{#str}} addtofavourites, core_message {{/str}}
+                <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-favourite"
+                    role="menuitem">
+                        {{#str}} addtofavourites, core_message {{/str}}
                 </a>
-                <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-unfavourite">
-                    {{#str}} removefromfavourites, core_message {{/str}}
+                <a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-unfavourite"
+                    role="menuitem">
+                        {{#str}} removefromfavourites, core_message {{/str}}
                 </a>
             </div>
         </div>

diff --git a/...plates/core_message/message_drawer_view_conversation_header_content_type_private.mustache b/...plates/core_message/message_drawer_view_conversation_header_content_type_private.mustache
@@ -77,47 +77,50 @@
         </a>
     </div>
     <div class="ml-auto dropdown">
-        <button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
+        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+        aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
             {{#pix}} i/moremenu, core {{/pix}}
         </button>
-        <ul class="dropdown-menu pull-right">
+        <ul id="conversation-actions-menu" class="dropdown-menu pull-right" role="menu"
+        aria-labelledby="conversation-actions-menu-button">
             <li data-action="view-contact">
-                <a class="dropdown-item" href="#">
+                <a class="dropdown-item" href="#" role="menuitem">
                     {{#str}} info, core_message {{/str}}
                 </a>
             </li>
             <li class="{{#isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" data-action="confirm-favourite">
-                <a class="dropdown-item" href="#">
+                <a class="dropdown-item" href="#" role="menuitem">
                     {{#str}} addtofavourites, core_message {{/str}}
                 </a>
             </li>
             <li class="{{^isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" data-action="confirm-unfavourite">
-                <a class="dropdown-item " href="#">
+                <a class="dropdown-item " href="#" role="menuitem">
                     {{#str}} removefromfavourites, core_message {{/str}}
                 </a>
             </li>
             <li class="{{#isblocked}}hidden{{/isblocked}}" data-action="request-block">
-                <a class="dropdown-item" href="#">
+                <a class="dropdown-item" href="#" role="menuitem">
                     {{#str}} blockuser, core_message {{/str}}
                 </a>
             </li>
             <li class="{{^isblocked}}hidden{{/isblocked}}" data-action="request-unblock">
-                <a class="dropdown-item" href="#">
+                <a class="dropdown-item" href="#" role="menuitem">
                     {{#str}} unblockuser, core_message {{/str}}
                 </a>
             </li>
             <li data-action="request-delete-conversation">
-                <a class="dropdown-item" href="#">
+                <a class="dropdown-item" href="#" role="menuitem">
                     {{#str}} deleteconversation, core_message {{/str}}
                 </a>
             </li>
             <li class="{{#iscontact}}hidden{{/iscontact}}" data-action="request-add-contact">
-                <a class="dropdown-item" href="#">
+                <a class="dropdown-item" href="#" role="menuitem">
                     {{#str}} addtoyourcontacts, core_message {{/str}}
                 </a>
             </li>
             <li class="{{^iscontact}}hidden{{/iscontact}}" data-action="request-remove-contact">
-                <a class="dropdown-item" href="#">
+                <a class="dropdown-item" href="#" role="menuitem">
                     {{#str}} removefromyourcontacts, core_message {{/str}}
                 </a>
             </li>

diff --git a/...mplates/core_message/message_drawer_view_conversation_header_content_type_public.mustache b/...mplates/core_message/message_drawer_view_conversation_header_content_type_public.mustache
@@ -70,22 +70,25 @@
             </a>
         </div>
         <div class="ml-auto dropdown">
-            <button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button id="conversation-actions-menu-button" class="btn btn-link btn-icon icon-size-3" type="button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+            aria-label="{{#str}} conversationactions, core_message {{/str}}" aria-controls="conversation-actions-menu">
                 {{#pix}} i/moremenu, core {{/pix}}
             </button>
-            <ul class="dropdown-menu pull-right">
+            <ul id="conversation-actions-menu" class="dropdown-menu pull-right" role="menu"
+            aria-labelledby="conversation-actions-menu-button">
                 <li data-action="view-group-info">
-                    <a class="dropdown-item" href="#">
+                    <a class="dropdown-item" href="#" role="menuitem">
                         {{#str}} groupinfo, core_message {{/str}}
                     </a>
                 </li>
                 <li class="{{#isfavourite}}hidden{{/isfavourite}}" data-action="confirm-favourite">
-                    <a class="dropdown-item" href="#">
+                    <a class="dropdown-item" href="#" role="menuitem">
                         {{#str}} addtofavourites, core_message {{/str}}
                     </a>
                 </li>
                 <li class="{{^isfavourite}}hidden{{/isfavourite}}" data-action="confirm-unfavourite">
-                    <a class="dropdown-item" href="#">
+                    <a class="dropdown-item" href="#" role="menuitem">
                         {{#str}} removefromfavourites, core_message {{/str}}
                     </a>
                 </li>