From 78555ed422603e98698bf8f7a16c86328f429e89 Mon Sep 17 00:00:00 2001
From: Marco Zehe <marco.zehe@gmail.com>
Date: Fri, 6 Dec 2019 15:48:34 +0100
Subject: [PATCH 1/2] Make reaction buttons more accessible

Fixes vector-im/riot-web/issues/11608.

This patch:

1. Turns the container of reaction buttons into a toolbar.
2. Makes each button span into a button with a tabindex and an aria-label.
3. Constructs an alternative label that differs slightly from the text displayed by the tool tip:
   * It uses the names of the people who reacted.
   * It puts a space before the "reacted with" text.
   * It uses the actual emoji characters, not the converted colon-delimited shortNames, because the emojis usually tell blind users more about the expression.
   * It omits the number of reactions, since that information is already conveyed by the names.

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
---
 src/components/views/messages/ReactionsRow.js |  6 ++-
 .../views/messages/ReactionsRowButton.js      | 38 +++++++++++++++++--
 src/i18n/strings/en_EN.json                   |  2 +
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index 0abb1015b9..3a8cd24518 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -149,7 +149,11 @@ export default class ReactionsRow extends React.PureComponent {
             </a>;
         }
 
-        return <div className="mx_ReactionsRow">
+        return <div
+            className="mx_ReactionsRow"
+            role="toolbar"
+            aria-label={_t("Reactions")}
+        >
             {items}
             {showAllButton}
         </div>;
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index ac44ec5d56..ab1a523cd7 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -20,6 +20,8 @@ import classNames from 'classnames';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 
 export default class ReactionsRowButton extends React.PureComponent {
     static propTypes = {
@@ -79,7 +81,7 @@ export default class ReactionsRowButton extends React.PureComponent {
     render() {
         const ReactionsRowButtonTooltip =
             sdk.getComponent('messages.ReactionsRowButtonTooltip');
-        const { content, count, reactionEvents, myReactionEvent } = this.props;
+        const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
 
         const classes = classNames({
             mx_ReactionsRowButton: true,
@@ -96,15 +98,45 @@ export default class ReactionsRowButton extends React.PureComponent {
             />;
         }
 
+        const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
+        let label;
+        if (room) {
+            const senders = [];
+            for (const reactionEvent of reactionEvents) {
+                const member = room.getMember(reactionEvent.getSender());
+                const name = member ? member.name : reactionEvent.getSender();
+                senders.push(name);
+            }
+            label = _t(
+                "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
+                {
+                    content,
+                },
+                {
+                    reactors: () => {
+                        return formatCommaSeparatedList(senders, 6);
+                    },
+                    reactedWith: (sub) => {
+                        if (!content) {
+                            return null;
+                        }
+                        return sub;
+                    },
+                },
+            );
+        }
+
         return <span className={classes}
+            role="button"
+            aria-label={label}
             onClick={this.onClick}
             onMouseOver={this.onMouseOver}
             onMouseOut={this.onMouseOut}
         >
-            <span className="mx_ReactionsRowButton_content">
+            <span className="mx_ReactionsRowButton_content" aria-hidden="true">
                 {content}
             </span>
-            <span className="mx_ReactionsRowButton_count">
+            <span className="mx_ReactionsRowButton_count" aria-hidden="true">
                 {count}
             </span>
             {tooltip}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 03838de292..182c761c5f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1117,6 +1117,8 @@
     "You sent a verification request": "You sent a verification request",
     "Error decrypting video": "Error decrypting video",
     "Show all": "Show all",
+    "Reactions": "Reactions",
+    "<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
     "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
     "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",

From 19e6587548e3def975e6cf7a38fc4a0e13abf5cd Mon Sep 17 00:00:00 2001
From: Marco Zehe <marcozehe@mailbox.org>
Date: Fri, 6 Dec 2019 16:03:19 +0100
Subject: [PATCH 2/2] Add tabIndex to the button to make it keyboard focusable

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
---
 src/components/views/messages/ReactionsRowButton.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index ab1a523cd7..10dea34809 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -129,6 +129,7 @@ export default class ReactionsRowButton extends React.PureComponent {
         return <span className={classes}
             role="button"
             aria-label={label}
+            tabindex="0"
             onClick={this.onClick}
             onMouseOver={this.onMouseOver}
             onMouseOut={this.onMouseOut}