Added missing alt attributes to the images on the login screen and in avatars (#9597)

* Added missing alt text for login and avatar

* Added localisation for the avatar copy

* update alt avatar tag issue + translation

Co-authored-by: Michael <michael@crossingpaths.be>

src/Umbraco.Web.UI.Client/src/common/directives/components/umbavatar.directive.js

@@ -50,18 +50,20 @@ Use this directive to render an avatar.
 (function() {
     'use strict';
 
-    function AvatarDirective() {
+    function AvatarDirective(localizationService) {
 
         function link(scope, element, attrs, ctrl) {
             
             var eventBindings = [];
             scope.initials = "";
+            scope.avatarAlt = "";
 
             function onInit() {
                 if (!scope.unknownChar) {
                     scope.unknownChar = "?";
                 }
                 scope.initials = getNameInitials(scope.name);
+                setAvatarAlt(scope.name);
             }
 
             function getNameInitials(name) {
@@ -77,10 +79,23 @@ Use this directive to render an avatar.
                 return null;
             }
 
+            function setAvatarAlt(name) {
+                if (name) {
+                    localizationService
+                        .localize('general_avatar')
+                        .then(function(data) {
+                                scope.avatarAlt = data + ' ' + name;
+                            }
+                        );
+                }
+                scope.avatarAlt = null;
+            }
+
             eventBindings.push(scope.$watch('name', function (newValue, oldValue) {
                 if (newValue === oldValue) { return; }
                 if (oldValue === undefined || newValue === undefined) { return; }
                 scope.initials = getNameInitials(newValue);
+                setAvatarAlt(newValue);
             }));
 
             onInit();

src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html

@@ -5,7 +5,7 @@
         <div class="login-overlay__background-image" ng-style="{'background-image': 'url('+vm.backgroundImage+')'}"></div>
 
         <div class="login-overlay__logo">
-            <img ng-src="{{vm.logoImage}}">
+            <img ng-src="{{vm.logoImage}}" alt=""/>
         </div>
 
         <div ng-if="!vm.denyLocalLogin" ng-show="vm.invitedUser != null" class="umb-login-container">

src/Umbraco.Web.UI.Client/src/views/components/umb-avatar.html

@@ -1,7 +1,7 @@
 <div>
-    <img class="umb-avatar umb-avatar--{{size}}" ng-if="imgSrc" ng-src="{{imgSrc}}" ng-srcset="{{imgSrcset}}" />
+    <img class="umb-avatar umb-avatar--{{size}}" ng-if="imgSrc" ng-src="{{imgSrc}}" ng-srcset="{{imgSrcset}}" alt="{{avatarAlt}}"/>
     <div class="umb-avatar umb-avatar--{{size}} umb-avatar--{{color}}" ng-if="!imgSrc">
         <span ng-if="name">{{ initials }}</span>
         <span ng-if="!name">{{unknownChar}}</span>
     </div>
-</div>
+</div>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -797,6 +797,7 @@
     <key alias="articles">Articles</key>
     <key alias="videos">Videos</key>
     <key alias="installing">Installing</key>
+    <key alias="avatar">Avatar for</key>
   </area>
   <area alias="colors">
     <key alias="blue">Blue</key>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -805,6 +805,7 @@
     <key alias="articles">Articles</key>
     <key alias="videos">Videos</key>
     <key alias="installing">Installing</key>
+    <key alias="avatar">Avatar for</key>
   </area>
   <area alias="colors">
     <key alias="blue">Blue</key>

src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml

@@ -762,6 +762,7 @@
     <key alias="current">actuel</key>
     <key alias="embed">Intégrer</key>
     <key alias="selected">sélectionné</key>
+    <key alias="avatar">Avatar de</key>
   </area>
   <area alias="colors">
     <key alias="blue">Bleu</key>

src/Umbraco.Web.UI/Umbraco/config/lang/nl.xml

@@ -806,6 +806,7 @@
     <key alias="articles">Artikels</key>
     <key alias="videos">Videos</key>
     <key alias="installing">Installeren</key>
+    <key alias="avatar">Avatar van</key>
   </area>
   <area alias="colors">
     <key alias="blue">Blauw</key>