Merge pull request #36740 from nextcloud/enh/a11y-contact-img-alt

Add avatar contact img description

core/src/OC/contactsmenu.js

@@ -55,6 +55,11 @@ const Contact = Model.extend({
 		} else {
 			this.set('hasManyActions', true)
 		}
+
+		const fullName = this.get('fullName')
+		if (this.get('avatar') && fullName) {
+			this.set('avatarLabel', t('core', 'Avatar of {fullName}', { fullName }))
+		}
 	}
 })
 

core/src/OC/contactsmenu/contact.handlebars

@@ -2,11 +2,11 @@
 	{{#if contact.profileUrl}}
 		{{#if contact.profileTitle}}
 			<a class="profile-link--avatar" href="{{contact.profileUrl}}">
-				<img src="{{contact.avatar}}&size=32" class="avatar" srcset="{{contact.avatar}}&size=32 1x, {{contact.avatar}}&size=64 2x, {{contact.avatar}}&size=128 4x" alt="">
+				<img src="{{contact.avatar}}&size=32" class="avatar" srcset="{{contact.avatar}}&size=32 1x, {{contact.avatar}}&size=64 2x, {{contact.avatar}}&size=128 4x" alt="{{contact.avatarLabel}}">
 			</a>
 		{{/if}}
 	{{else}}
-		<img src="{{contact.avatar}}&size=32" class="avatar" srcset="{{contact.avatar}}&size=32 1x, {{contact.avatar}}&size=64 2x, {{contact.avatar}}&size=128 4x" alt="">
+		<img src="{{contact.avatar}}&size=32" class="avatar" srcset="{{contact.avatar}}&size=32 1x, {{contact.avatar}}&size=64 2x, {{contact.avatar}}&size=128 4x" alt="{{contact.avatarLabel}}">
 	{{/if}}
 {{else}}
 	{{#if contact.profileUrl}}