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

Don't render avatars in pills for screen readers.

Browse source 
These don't provide any additional information, but add extraneous noise. The link text and title already provide all information. Therefore, mark the avatar inside pills (the mention links inside messages) as hidden. Note that due to the images being part of something focusable, role "presentation" does not work here.

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
This commit is contained in:
Marco Zehe 2020-02-12 09:36:59 +01:00
parent 91c9c00712
commit 6fe4eb1fc3
1 changed files with 4 additions and 4 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';