1
0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-08 21:42:24 +03:00

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

View File

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