Improve accessibility of Contacts menu

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2017-09-29 20:27:49 +02:00
parent 2cd467f3f0
commit 61f10b27bc
1 changed files with 6 additions and 5 deletions

View File

@ -26,6 +26,7 @@
'use strict';
var MENU_TEMPLATE = ''
+ '<label class="hidden-visually" for="contactsmenu-search">' + t('core', 'Search contacts …') + '</label>'
+ '<input id="contactsmenu-search" type="search" placeholder="' + t('core', 'Search contacts …') + '" value="{{searchTerm}}">'
+ '<div class="content">'
+ '</div>';
@ -51,7 +52,7 @@
var CONTACT_TEMPLATE = ''
+ '{{#if contact.avatar}}'
+ '<img src="{{contact.avatar}}&size=32" class="avatar"'
+ 'srcset="{{contact.avatar}}&size=32 1x, {{contact.avatar}}&size=64 2x, {{contact.avatar}}&size=128 4x">'
+ 'srcset="{{contact.avatar}}&size=32 1x, {{contact.avatar}}&size=64 2x, {{contact.avatar}}&size=128 4x" alt="">'
+ '{{else}}'
+ '<div class="avatar"></div>'
+ '{{/if}}'
@ -61,12 +62,12 @@
+ '</div>'
+ '{{#if contact.topAction}}'
+ '<a class="top-action" href="{{contact.topAction.hyperlink}}" title="{{contact.topAction.title}}">'
+ ' <img src="{{contact.topAction.icon}}">'
+ ' <img src="{{contact.topAction.icon}}" alt="{{contact.topAction.title}}">'
+ '</a>'
+ '{{/if}}'
+ '{{#if contact.hasTwoActions}}'
+ '<a class="second-action" href="{{contact.secondAction.hyperlink}}" title="{{contact.secondAction.title}}">'
+ ' <img src="{{contact.secondAction.icon}}">'
+ ' <img src="{{contact.secondAction.icon}}" alt="{{contact.secondAction.title}}">'
+ '</a>'
+ '{{/if}}'
+ '{{#if contact.hasManyActions}}'
@ -76,7 +77,7 @@
+ ' {{#each contact.actions}}'
+ ' <li>'
+ ' <a href="{{hyperlink}}">'
+ ' <img src="{{icon}}">'
+ ' <img src="{{icon}}" alt="">'
+ ' <span>{{title}}</span>'
+ ' </a>'
+ ' </li>'
@ -224,7 +225,7 @@
}));
this.delegateEvents();
// Show placeholder iff no avatar is available (avatar is rendered as img, not div)
// Show placeholder if no avatar is available (avatar is rendered as img, not div)
this.$('div.avatar').imageplaceholder(this._model.get('fullName'));
// Show tooltip for top action