MDL-65087 message: add button role to all the links that perfom actions
authorSara Arjona <sara@moodle.com>
Fri, 15 Mar 2019 12:36:58 +0000 (13:36 +0100)
committerSara Arjona <sara@moodle.com>
Fri, 29 Mar 2019 08:33:35 +0000 (09:33 +0100)
For accessibility reasons, add the role="button" attribute to the links
with href="#" performing actions, like the icon to open the messaging
drawer.

18 files changed:
message/templates/message_drawer_contacts_list.mustache
message/templates/message_drawer_conversations_list.mustache
message/templates/message_drawer_messages_list.mustache
message/templates/message_drawer_non_contacts_list.mustache
message/templates/message_drawer_view_contact_body_content.mustache
message/templates/message_drawer_view_contacts_body_section_requests_list.mustache
message/templates/message_drawer_view_contacts_header.mustache
message/templates/message_drawer_view_conversation_header_content_type_private.mustache
message/templates/message_drawer_view_conversation_header_content_type_private_no_controls.mustache
message/templates/message_drawer_view_conversation_header_content_type_public.mustache
message/templates/message_drawer_view_conversation_header_placeholder.mustache
message/templates/message_drawer_view_group_info_body_content.mustache
message/templates/message_drawer_view_group_info_participants_list.mustache
message/templates/message_drawer_view_overview_header.mustache
message/templates/message_drawer_view_search_header.mustache
message/templates/message_drawer_view_settings_header.mustache
message/templates/message_popover.mustache
message/templates/notification_preferences_processor.mustache

index bb395da..8d24769 100644 (file)
@@ -49,6 +49,7 @@
         {{/conversationid}}
         data-contact-user-id="{{id}}"
         data-region="contact"
+        role="button"
     >
         <img
             class="rounded-circle"
index df496af..d6d753e 100644 (file)
@@ -42,6 +42,7 @@
         {{#userid}}
             data-user-id="{{.}}"
         {{/userid}}
+        role="button"
     >
         {{#imageurl}}
             <img
index fb96cf6..97332f7 100644 (file)
@@ -48,6 +48,7 @@
             data-route-param-3="{{userid}}"
         {{/conversationid}}
         data-conversation-id="{{conversationid}}"
+        role="button"
     >
         <img
             class="rounded-circle"
index 9da0778..ae5c9a9 100644 (file)
@@ -47,6 +47,7 @@
             data-route-param-2="create"
             data-route-param-3="{{id}}"
         {{/conversationid}}
+        role="button"
     >
         <img
             class="rounded-circle"
index 472e438..ea355c2 100644 (file)
@@ -35,7 +35,7 @@
 
 }}
 
-<a class="align-self-center" href="#" data-route-back>
+<a class="align-self-center" href="#" data-route-back role="button">
     {{> core_message/message_drawer_icon_back }}
 </a>
 <div class="px-3 pb-3">
index 17a9eea..4ca2482 100644 (file)
@@ -49,6 +49,7 @@
         {{/conversationid}}
         data-request-id="{{id}}"
         data-region="contact-request"
+        role="button"
     >
         <img
             class="rounded-circle"
index b4634e4..6faf4b4 100644 (file)
@@ -37,7 +37,7 @@
 <div class="hidden border-bottom px-2 py-3" aria-hidden="true" data-region="view-contacts">
     <div class="d-flex align-items-center">
         <div class="align-self-stretch">
-            <a class="h-100 d-flex align-items-center mr-2" href="#" data-route-back>
+            <a class="h-100 d-flex align-items-center mr-2" href="#" data-route-back role="button">
                 {{> core_message/message_drawer_icon_back }}
             </a>
         </div>
@@ -45,7 +45,7 @@
             {{#str}} contacts, core_message {{/str}}
         </div>
         <div class="ml-auto">
-            <a href="#" data-route="view-search">
+            <a href="#" data-route="view-search" role="button">
                 {{#pix}} a/search, core {{/pix}}
             </a>
         </div>
index 3d748b6..365d491 100644 (file)
 
 <div class="d-flex align-items-center">
     <div class="align-self-stretch" >
-        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
+        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
             {{> core_message/message_drawer_icon_back }}
         </a>
     </div>
     <div class="d-flex text-truncate">
-        <a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-contact">
+        <a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-contact" role="button">
             {{#imageurl}}
                 <div class="d-flex align-items-center">
                     <img
index 4422fcd..1ecc020 100644 (file)
@@ -37,7 +37,7 @@
 
 <div class="d-flex align-items-center">
     <div class="align-self-stretch" >
-        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
+        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
             {{> core_message/message_drawer_icon_back }}
         </a>
     </div>
index 152a30d..f9c5afd 100644 (file)
 <div class="d-flex flex-column">
     <div class="d-flex align-items-center">
         <div class="align-self-stretch" >
-            <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
+            <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
                 {{> core_message/message_drawer_icon_back }}
             </a>
         </div>
         <div class="d-flex text-truncate">
-            <a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-group-info">
+            <a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-group-info" role="button">
                 {{#imageurl}}
                     <img
                         class="rounded-circle"
@@ -95,7 +95,7 @@
         <div class="mr-2 icon" aria-hidden="true"></div>
         {{#imageurl}}<div style="width: 38px" aria-hidden="true"></div>{{/imageurl}}
         <!-- End placeholders -->
-        <a class="text-decoration-none line-height-3 ml-2" href="#" data-action="view-group-info">
+        <a class="text-decoration-none line-height-3 ml-2" href="#" data-action="view-group-info" role="button">
             <small class="m-0 text-muted text-truncate">
                 {{#str}} numparticipants, core_message, {{totalmembercount}} {{/str}}
             </small>
index 1327ec1..1cbdbda 100644 (file)
@@ -36,7 +36,7 @@
 }}
 <div class="d-flex">
     <div class="align-self-stretch" >
-        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
+        <a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back role="button">
             {{> core_message/message_drawer_icon_back }}
         </a>
     </div>
index 1e484ab..e7ce405 100644 (file)
@@ -35,7 +35,7 @@
 
 }}
 
-<a class="px-2 align-self-start" href="#" data-route-back>
+<a class="px-2 align-self-start" href="#" data-route-back role="button">
     {{> core_message/message_drawer_icon_back }}
 </a>
 <div class="px-2">
index fc7d839..c5630c4 100644 (file)
@@ -49,6 +49,7 @@
         {{/conversationid}}
         data-contact-user-id="{{id}}"
         data-region="contact"
+        role="button"
     >
         <img
             class="rounded-circle"
index 7779456..3a0fcfd 100644 (file)
                 href="#"
                 data-route="view-settings"
                 data-route-param="{{loggedinuser.id}}"
+                role="button"
             >
                 {{#pix}} t/edit, core {{/pix}}
             </a>
         </div>
     </div>
     <div class="text-right mt-3">
-        <a href="#" data-route="view-contacts">
+        <a href="#" data-route="view-contacts" role="button">
             {{#pix}} i/user, core {{/pix}}
             {{#str}} contacts, core_message {{/str}}
             <span class="badge bg-primary ml-2 {{^contactrequestcount}}hidden{{/contactrequestcount}}" data-region="contact-request-count">
index 8ced531..8639407 100644 (file)
@@ -41,6 +41,7 @@
             href="#"
             data-route-back
             data-action="cancel-search"
+            role="button"
         >
             {{> core_message/message_drawer_icon_back }}
         </a>
index 3411da4..9ac89fb 100644 (file)
@@ -37,7 +37,7 @@
 <div class="hidden border-bottom px-2 py-3" aria-hidden="true" data-region="view-settings">
     <div class="d-flex align-items-center">
         <div class="align-self-stretch" >
-            <a class="h-100 d-flex mr-2 align-items-center" href="#" data-route-back>
+            <a class="h-100 d-flex mr-2 align-items-center" href="#" data-route-back role="button">
                 {{> core_message/message_drawer_icon_back }}
             </a>
         </div>
index 74784b3..7e1c75a 100644 (file)
@@ -36,7 +36,8 @@
 
 }}
 <div class="pull-right popover-region collapsed">
-    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative" href="#">
+    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative" href="#"
+            role="button">
         {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
         <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container">{{unreadcount}}</div>
     </a>
index b030b51..d14a157 100644 (file)
@@ -47,7 +47,8 @@
             data-processor-setting
             data-user-id="{{userid}}"
             data-context-id="{{contextid}}"
-            data-name="{{name}}">
+            data-name="{{name}}"
+            role="button">
 
             {{< core/hover_tooltip }}
                 {{$anchor}}