From 6fe4eb1fc3d03528af451b703312c8c8961fae93 Mon Sep 17 00:00:00 2001
From: Marco Zehe <marcozehe@mailbox.org>
Date: Wed, 12 Feb 2020 09:36:59 +0100
Subject: [PATCH 1/2] Don't render avatars in pills for screen readers.

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>
---
 src/components/views/elements/Pill.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 1de857e7fe..44413505d6 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -211,7 +211,7 @@ const Pill = createReactClass({
                 if (room) {
                     linkText = "@room";
                     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';
                 }
@@ -225,7 +225,7 @@ const Pill = createReactClass({
                         member.rawDisplayName = member.rawDisplayName || '';
                         linkText = member.rawDisplayName;
                         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';
                         href = null;
@@ -238,7 +238,7 @@ const Pill = createReactClass({
                 if (room) {
                     linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
                     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';
                 }
@@ -251,7 +251,7 @@ const Pill = createReactClass({
 
                     linkText = groupId;
                     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} />;
                     }
                     pillClass = 'mx_GroupPill';

From 8004a35179b9c3f46e3a90b74c3a5beac57ee206 Mon Sep 17 00:00:00 2001
From: Marco Zehe <marcozehe@mailbox.org>
Date: Wed, 12 Feb 2020 10:54:08 +0100
Subject: [PATCH 2/2] Update to use proper quotes and fix code styling. And fix
 test.

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
---
 src/components/views/elements/Pill.js              | 8 ++++----
 test/components/views/messages/TextualBody-test.js | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 44413505d6..59c0bde177 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -211,7 +211,7 @@ const Pill = createReactClass({
                 if (room) {
                     linkText = "@room";
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden='true' />;
+                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
                     pillClass = 'mx_AtRoomPill';
                 }
@@ -225,7 +225,7 @@ const Pill = createReactClass({
                         member.rawDisplayName = member.rawDisplayName || '';
                         linkText = member.rawDisplayName;
                         if (this.props.shouldShowPillAvatar) {
-                            avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden='true'/>;
+                            avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden="true" />;
                         }
                         pillClass = 'mx_UserPill';
                         href = null;
@@ -238,7 +238,7 @@ const Pill = createReactClass({
                 if (room) {
                     linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden='true' />;
+                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
                     pillClass = 'mx_RoomPill';
                 }
@@ -251,7 +251,7 @@ const Pill = createReactClass({
 
                     linkText = groupId;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <BaseAvatar name={name || groupId} width={16} height={16} aria-hidden='true'
+                        avatar = <BaseAvatar name={name || groupId} width={16} height={16} aria-hidden="true"
                                              url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />;
                     }
                     pillClass = 'mx_GroupPill';
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index 180a2f7e54..4e0785a8b9 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/test/components/views/messages/TextualBody-test.js
@@ -206,7 +206,7 @@ describe("<TextualBody />", () => {
                 'Hey <span>' +
                 '<a class="mx_Pill mx_UserPill" title="@user:server">' +
                 '<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>');
         });
     });