imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make reaction buttons more accessible

Browse source 
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>
This commit is contained in:
Marco Zehe 2019-12-06 15:48:34 +01:00 • committed by Marco Zehe
parent 625e3ef93a
commit 78555ed422
3 changed files with 42 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/views/messages/ReactionsRowButton.js
View file

@ -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}