From e0f00a87547ab8f70e4afd1f29fec23bb251249c Mon Sep 17 00:00:00 2001
From: Rachel Breeze <RachBreeze@users.noreply.github.com>
Date: Thu, 21 Jan 2021 01:21:31 +0000
Subject: [PATCH] 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>
---
 .../components/umbavatar.directive.js           | 17 ++++++++++++++++-
 .../views/components/application/umb-login.html |  2 +-
 .../src/views/components/umb-avatar.html        |  4 ++--
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml   |  1 +
 .../Umbraco/config/lang/en_us.xml               |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml   |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/nl.xml   |  1 +
 7 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbavatar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbavatar.directive.js
index 7dd2f0d7a3..321cd8a59d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbavatar.directive.js
+++ b/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();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html
index 46d3a5c17d..1e570b4af6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html
+++ b/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">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-avatar.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-avatar.html
index 036cf397fe..81c7d628d2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-avatar.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index f21d673dce..97fc223cc3 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/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>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 7feb88d654..1456cce9f0 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/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>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
index f3d981ddfb..75377f54c9 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
+++ b/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>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/nl.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/nl.xml
index e81874d4c1..11049a279c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/nl.xml
+++ b/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>