PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #4062 from MarcoZehe/PresentationalAvatars

Browse source 
Don't render avatars in pills for screen readers.
This commit is contained in:
Michael Telatynski 2020-02-12 10:04:39 +00:00 committed by GitHub
commit 97ab0636d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/elements/Pill.js
View file

@ -211,7 +211,7 @@ const Pill = createReactClass({
if (room) { if (room) {
linkText = "@room"; linkText = "@room";
if (this.props.shouldShowPillAvatar) { if (this.props.shouldShowPillAvatar) {
avatar = <RoomAvatar room={room} width={16} height={16} />; avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
} }
pillClass = 'mx_AtRoomPill'; pillClass = 'mx_AtRoomPill';
} }
@ -225,7 +225,7 @@ const Pill = createReactClass({
member.rawDisplayName = member.rawDisplayName || ''; member.rawDisplayName = member.rawDisplayName || '';
linkText = member.rawDisplayName; linkText = member.rawDisplayName;
if (this.props.shouldShowPillAvatar) { if (this.props.shouldShowPillAvatar) {
avatar = <MemberAvatar member={member} width={16} height={16} />; avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden="true" />;
} }
pillClass = 'mx_UserPill'; pillClass = 'mx_UserPill';
href = null; href = null;
@ -238,7 +238,7 @@ const Pill = createReactClass({
if (room) { if (room) {
linkText = (room ? getDisplayAliasForRoom(room) : null) || resource; linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
if (this.props.shouldShowPillAvatar) { if (this.props.shouldShowPillAvatar) {
avatar = <RoomAvatar room={room} width={16} height={16} />; avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
} }
pillClass = 'mx_RoomPill'; pillClass = 'mx_RoomPill';
} }
@ -251,7 +251,7 @@ const Pill = createReactClass({
linkText = groupId; linkText = groupId;
if (this.props.shouldShowPillAvatar) { if (this.props.shouldShowPillAvatar) {
avatar = <BaseAvatar name={name || groupId} width={16} height={16} avatar = <BaseAvatar name={name || groupId} width={16} height={16} aria-hidden="true"
url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />; url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />;
} }
pillClass = 'mx_GroupPill'; pillClass = 'mx_GroupPill';

2
test/components/views/messages/TextualBody-test.js
View file

@ -206,7 +206,7 @@ describe("<TextualBody />", () => {
'Hey <span>' + 'Hey <span>' +
'<a class="mx_Pill mx_UserPill" title="@user:server">' + '<a class="mx_Pill mx_UserPill" title="@user:server">' +
'<img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" ' + '<img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" ' +
'width="16" height="16" title="@member:domain.bla" alt="">Member</a>' + 'width="16" height="16" title="@member:domain.bla" alt="" aria-hidden="true">Member</a>' +
'</span></span>'); '</span></span>');
}); });
}); });