From 5ae23fdb2713081229e73a13bc12ae1865d6e2fe Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 21 May 2019 18:52:27 -0600
Subject: [PATCH] Hide flair from screen readers

To have less noise when they run over the sender profile.

See https://github.com/vector-im/riot-web/issues/9747
---
 src/components/views/elements/Flair.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js
index aa629794ba..7d3d298804 100644
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -45,12 +45,18 @@ class FlairAvatar extends React.Component {
         const tooltip = this.props.groupProfile.name ?
             `${this.props.groupProfile.name} (${this.props.groupProfile.groupId})`:
             this.props.groupProfile.groupId;
+
+        // Note: we hide flair from screen readers but ideally we'd support
+        // reading something out on hover. There's no easy way to do this though,
+        // so instead we just hide it completely.
         return <img
             src={httpUrl}
             width="16"
             height="16"
             onClick={this.onClick}
-            title={tooltip} />;
+            title={tooltip}
+            aria-hidden={true}
+        />;
     }
 }