MDL-65087 message: add button role to action links on bootstrapbase

For accessibility reasons, add the role="button" attribute to the links
with href="#" performing actions for the bootstrapbase theme, like
the settings icon.
This commit is contained in:
Sara Arjona
2019-03-29 09:33:35 +01:00
parent c0d2558c43
commit e758a9b932
7 changed files with 13 additions and 11 deletions
@@ -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>
@@ -42,12 +42,12 @@
<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
@@ -84,12 +84,12 @@
</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>
@@ -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>
@@ -42,12 +42,12 @@
<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"
@@ -109,7 +109,7 @@
<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>
@@ -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">
@@ -57,13 +57,14 @@
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">
@@ -46,6 +46,7 @@
href="#"
data-route-back
data-action="cancel-search"
role="button"
>
{{> core_message/message_drawer_icon_back }}
</a>