Add aria-label to letter avatars

This commit is contained in:
Michael Vickers 2020-10-03 12:05:31 +01:00 committed by Frédéric Guillot
parent 6231c159b8
commit 33531d47c2
3 changed files with 8 additions and 6 deletions

View File

@ -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)
);
}

View File

@ -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',
),
);

View File

@ -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));
}
}