MDL-65087 message: add button role to action links on bootstrapbase
authorSara Arjona <sara@moodle.com>
Fri, 15 Mar 2019 13:12:05 +0000 (14:12 +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 for the bootstrapbase theme, like
the settings icon.

theme/bootstrapbase/templates/core_message/message_drawer.mustache
theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_header_content_type_private.mustache
theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_header_content_type_private_no_controls.mustache
theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_header_content_type_public.mustache
theme/bootstrapbase/templates/core_message/message_drawer_view_group_info_body_content.mustache
theme/bootstrapbase/templates/core_message/message_drawer_view_overview_header.mustache
theme/bootstrapbase/templates/core_message/message_drawer_view_search_header.mustache

index bfcc654..7f3bc19 100644 (file)
@@ -46,7 +46,7 @@
     role="region"
 >
     <div class="drawer-top p-2 border-bottom bg-secondary text-right">
-        <a id="message-drawer-close-{{uniqid}}" class="" href="#">
+        <a id="message-drawer-close-{{uniqid}}" class="" href="#" role="button">
             {{#pix}} i/window_close, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
         </a>
     </div>
index 9ede242..5b66b84 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
         </button>
         <ul class="dropdown-menu pull-right">
             <li data-action="view-contact">
-                <a class="dropdown-item" href="#" >
+                <a class="dropdown-item" href="#">
                     {{#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="#">
                     {{#str}} addtofavourites, core_message {{/str}}
                 </a>
             </li>
index 2e7ece4..21fb692 100644 (file)
@@ -42,7 +42,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 b6613d4..45181a6 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"
         <div class="mr-2" style="opacity: 0; visibility: hidden" aria-hidden="true">{{> core_message/message_drawer_icon_back }}</div>
         {{#imageurl}}<div aria-hidden="true" style="width: 38px"></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 muted text-truncate">
                 {{#str}} numparticipants, core_message, {{totalmembercount}} {{/str}}
             </small>
index 02f29b1..b206b5f 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 d9d4738..834e9de 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 f6230ec..aa94c21 100644 (file)
@@ -46,6 +46,7 @@
             href="#"
             data-route-back
             data-action="cancel-search"
+            role="button"
         >
             {{> core_message/message_drawer_icon_back }}
         </a>