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.
This commit is contained in:
Sara Arjona 2019-03-04 14:37:35 +01:00
parent 13fe002e8e
commit 2e9a457330
3 changed files with 38 additions and 24 deletions

View file

@ -77,40 +77,46 @@
</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>
<div class="dropdown-menu float-right">
<a class="dropdown-item" href="#" data-action="view-contact">
<div id="conversation-actions-menu" class="dropdown-menu float-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">
<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">
<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 {{#ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-mute">
<a class="dropdown-item {{#ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-mute" role="menuitem">
{{#str}} muteconversation, core_message {{/str}}
</a>
<a class="dropdown-item {{^ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-unmute">
<a class="dropdown-item {{^ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-unmute" role="menuitem">
{{#str}} unmuteconversation, core_message {{/str}}
</a>
<a class="dropdown-item" href="#" data-action="request-delete-conversation">
<a class="dropdown-item" href="#" data-action="request-delete-conversation" role="menuitem">
{{#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">
<a class="dropdown-item {{^iscontact}}hidden{{/iscontact}}" href="#" data-action="request-remove-contact"
role="menuitem">
{{#str}} removefromyourcontacts, core_message {{/str}}
</a>
</div>
</div>
</div>
</div>

View file

@ -71,23 +71,30 @@
</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>
<div class="dropdown-menu float-right">
<a class="dropdown-item" href="#" data-action="view-group-info">
<div id="conversation-actions-menu" class="dropdown-menu float-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">
<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">
<a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-unfavourite"
role="menuitem">
{{#str}} removefromfavourites, core_message {{/str}}
</a>
<a class="dropdown-item {{#ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-mute">
<a class="dropdown-item {{#ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-mute"
role="menuitem">
{{#str}} muteconversation, core_message {{/str}}
</a>
<a class="dropdown-item {{^ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-unmute">
<a class="dropdown-item {{^ismuted}}hidden{{/ismuted}}" href="#" data-action="confirm-unmute"
role="menuitem">
{{#str}} unmuteconversation, core_message {{/str}}
</a>
</div>
@ -106,4 +113,4 @@
</small>
</a>
</div>
</div>
</div>