xi-conversations

commit

6eaccf3ba9b726dc6b483caadfe3d7e151b58f4e

parent

d21b2499c1e581095f641d491d6c42e0c78c93d4

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-09-06 02:49

a11y: add explicit label to icons

Diffstat

2 files changed, 12 insertions, 5 deletions

diff --git a/content/js/message.js b/content/js/message.js

@@ -72,11 +72,11 @@ export default function(msg, expanded) {
   72    72 			util.createDate(msg.date),
   73    73 			h('span', {'class': 'message__actions'}, [
   74    74 				canReplyAll
   75    -1 					? h('button', {'class': 'button', 'title': _('replyAll'), 'data-action': 'replyAll'}, [util.createIcon('reply_all')])
   -1    75 					? h('button', {'class': 'button', 'data-action': 'replyAll'}, [util.createIcon('reply_all', _('replyAll'))])
   76    76 					: msg.canReplyToList
   77    -1 						? h('button', {'class': 'button', 'title': _('replyList'), 'data-action': 'replyToList'}, [util.createIcon('list')])
   78    -1 						: h('button', {'class': 'button', 'title': _('reply'), 'data-action': 'replyToSender'}, [util.createIcon('reply')]),
   79    -1 				h('button', {'class': 'button dropdownToggle', 'title': _('more')}, [util.createIcon('menu')]),
   -1    77 						? h('button', {'class': 'button', 'data-action': 'replyToList'}, [util.createIcon('list', _('replyList'))])
   -1    78 						: h('button', {'class': 'button', 'data-action': 'replyToSender'}, [util.createIcon('reply', _('reply'))]),
   -1    79 				h('button', {'class': 'button dropdownToggle'}, [util.createIcon('menu', _('more'))]),
   80    80 				h('div', {'class': 'dropdown'}, [
   81    81 					h('button', {'class': 'dropdown-item', 'data-action': 'replyToSender'}, [util.createIcon('reply'), ' ', _('reply')]),
   82    82 					canReplyAll ? h('button', {'class': 'dropdown-item', 'data-action': 'replyAll'}, [util.createIcon('reply_all'), ' ', _('replyAll')]) : null,

diff --git a/content/js/util.js b/content/js/util.js

@@ -55,7 +55,7 @@ export var h = function(tag, attrs, children) {
   55    55 	return el;
   56    56 };
   57    57 
   58    -1 export var createIcon = function(key) {
   -1    58 export var createIcon = function(key, label) {
   59    59 	var nssvg = 'http://www.w3.org/2000/svg';
   60    60 	var nsxlink = 'http://www.w3.org/1999/xlink';
   61    61 
@@ -66,6 +66,13 @@ export var createIcon = function(key) {
   66    66 	use.setAttributeNS(nsxlink, 'href', `/content/material-icons.svg#${key}`);
   67    67 	svg.append(use);
   68    68 
   -1    69 	if (label) {
   -1    70 		svg.setAttribute('aria-label', label);
   -1    71 		svg.setAttribute('title', label);
   -1    72 	} else {
   -1    73 		svg.setAttribute('aria-hidden', 'true');
   -1    74 	}
   -1    75 
   69    76 	return svg;
   70    77 };
   71    78