mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
core/js/contactsmenu.js
View File

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