MDL-65087 message: add button role to all the links that perfom actions

For accessibility reasons, add the role="button" attribute to the links
with href="#" performing actions, like the icon to open the messaging
drawer.
This commit is contained in:
Sara Arjona 2019-03-15 13:36:58 +01:00
parent 0920f35ed9
commit c0d2558c43
18 changed files with 25 additions and 15 deletions

View File

@ -49,6 +49,7 @@
{{/conversationid}}
data-contact-user-id="{{id}}"
data-region="contact"
role="button"
>
<img
class="rounded-circle"

View File

@ -42,6 +42,7 @@
{{#userid}}
data-user-id="{{.}}"
{{/userid}}
role="button"
>
{{#imageurl}}
<img

View File

@ -48,6 +48,7 @@
data-route-param-3="{{userid}}"
{{/conversationid}}
data-conversation-id="{{conversationid}}"
role="button"
>
<img
class="rounded-circle"

View File

@ -47,6 +47,7 @@
data-route-param-2="create"
data-route-param-3="{{id}}"
{{/conversationid}}
role="button"
>
<img
class="rounded-circle"

View 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">

View File

@ -49,6 +49,7 @@
{{/conversationid}}
data-request-id="{{id}}"
data-region="contact-request"
role="button"
>
<img
class="rounded-circle"

View 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>

View File

@ -37,12 +37,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

View 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>

View File

@ -38,12 +38,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"
@ -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>

View 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>

View 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">

View File

@ -49,6 +49,7 @@
{{/conversationid}}
data-contact-user-id="{{id}}"
data-region="contact"
role="button"
>
<img
class="rounded-circle"

View File

@ -54,13 +54,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">

View File

@ -41,6 +41,7 @@
href="#"
data-route-back
data-action="cancel-search"
role="button"
>
{{> core_message/message_drawer_icon_back }}
</a>

View 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>

View 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>

View 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}}