From 33531d47c2f88f23d0234f93e9e84c0dd7cc87c0 Mon Sep 17 00:00:00 2001
From: Michael Vickers <michaelvickers.uk@gmail.com>
Date: Sat, 3 Oct 2020 12:05:31 +0100
Subject: [PATCH] Add aria-label to letter avatars

---
 app/User/Avatar/LetterAvatarProvider.php             | 6 ++++--
 tests/units/Formatter/UserMentionFormatterTest.php   | 2 +-
 tests/units/User/Avatar/LetterAvatarProviderTest.php | 6 +++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/User/Avatar/LetterAvatarProvider.php b/app/User/Avatar/LetterAvatarProvider.php
index cc417a862..7e89d6a9a 100644
--- a/app/User/Avatar/LetterAvatarProvider.php
+++ b/app/User/Avatar/LetterAvatarProvider.php
@@ -32,13 +32,15 @@ class LetterAvatarProvider extends Base implements AvatarProviderInterface
     {
         $initials = $this->helper->user->getInitials($user['name'] ?: $user['username']);
         $rgb = $this->getBackgroundColor($user['name'] ?: $user['username']);
+        $name = $this->helper->text->e($user['name'] ?: $user['username']);
 
         return sprintf(
-            '<div class="avatar-letter" style="background-color: rgb(%d, %d, %d)" title="%s">%s</div>',
+            '<div class="avatar-letter" style="background-color: rgb(%d, %d, %d)" title="%s" role="img" aria-label="%s">%s</div>',
             $rgb[0],
             $rgb[1],
             $rgb[2],
-            $this->helper->text->e($user['name'] ?: $user['username']),
+            $name,
+            $name,
             $this->helper->text->e($initials)
         );
     }
diff --git a/tests/units/Formatter/UserMentionFormatterTest.php b/tests/units/Formatter/UserMentionFormatterTest.php
index 92f73d169..5d728c68b 100644
--- a/tests/units/Formatter/UserMentionFormatterTest.php
+++ b/tests/units/Formatter/UserMentionFormatterTest.php
@@ -33,7 +33,7 @@ class UserMentionFormatterTest extends Base
             ),
             array(
                 'value' => 'somebody',
-                'html' => '<div class="avatar avatar-20 avatar-inline"><div class="avatar-letter" style="background-color: rgb(191, 210, 121)" title="somebody">S</div></div> somebody',
+                'html' => '<div class="avatar avatar-20 avatar-inline"><div class="avatar-letter" style="background-color: rgb(191, 210, 121)" title="somebody" role="img" aria-label="somebody">S</div></div> somebody',
             ),
         );
 
diff --git a/tests/units/User/Avatar/LetterAvatarProviderTest.php b/tests/units/User/Avatar/LetterAvatarProviderTest.php
index c145967bf..8f7310281 100644
--- a/tests/units/User/Avatar/LetterAvatarProviderTest.php
+++ b/tests/units/User/Avatar/LetterAvatarProviderTest.php
@@ -23,7 +23,7 @@ class LetterAvatarProviderTest extends Base
     {
         $provider = new LetterAvatarProvider($this->container);
         $user = array('id' => 123, 'name' => 'Kanboard Admin', 'username' => 'bob', 'email' => '');
-        $expected = '<div class="avatar-letter" style="background-color: rgb(120, 83, 58)" title="Kanboard Admin">KA</div>';
+        $expected = '<div class="avatar-letter" style="background-color: rgb(120, 83, 58)" title="Kanboard Admin" role="img" aria-label="Kanboard Admin">KA</div>';
         $this->assertEquals($expected, $provider->render($user, 48));
     }
 
@@ -31,7 +31,7 @@ class LetterAvatarProviderTest extends Base
     {
         $provider = new LetterAvatarProvider($this->container);
         $user = array('id' => 123, 'name' => '', 'username' => 'admin', 'email' => '');
-        $expected = '<div class="avatar-letter" style="background-color: rgb(134, 45, 132)" title="admin">A</div>';
+        $expected = '<div class="avatar-letter" style="background-color: rgb(134, 45, 132)" title="admin" role="img" aria-label="admin">A</div>';
         $this->assertEquals($expected, $provider->render($user, 48));
     }
 
@@ -39,7 +39,7 @@ class LetterAvatarProviderTest extends Base
     {
         $provider = new LetterAvatarProvider($this->container);
         $user = array('id' => 123, 'name' => 'ü', 'username' => 'admin', 'email' => '');
-        $expected = '<div class="avatar-letter" style="background-color: rgb(62, 147, 31)" title="ü">Ü</div>';
+        $expected = '<div class="avatar-letter" style="background-color: rgb(62, 147, 31)" title="ü" role="img" aria-label="ü">Ü</div>';
         $this->assertEquals($expected, $provider->render($user, 48));
     }
 }