Merge pull request #3704 from MarcoZehe/MoreAccessibleReactions

Make reaction buttons more accessible

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>;

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,46 @@ 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}
+            tabindex="0"
             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}

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.",