Mute avatars and read receipts on event tiles
This reduces overall noise from the screen reader. It was reading the alt attribute from the sender avatar, which was just a mxid. The read receipts were just nonsensical noise. Fixes https://github.com/vector-im/riot-web/issues/2716 Fixes https://github.com/vector-im/riot-web/issues/5697 See https://github.com/vector-im/riot-web/issues/9747
This commit is contained in:
parent
85a024175b
commit
6edf760943
3 changed files with 14 additions and 6 deletions
src/components/views
|
@ -67,8 +67,8 @@ export default function AccessibleButton(props) {
|
|||
restProps.ref = restProps.inputRef;
|
||||
delete restProps.inputRef;
|
||||
|
||||
restProps.tabIndex = restProps.tabIndex || "0";
|
||||
restProps.role = "button";
|
||||
restProps.tabIndex = restProps.tabIndex === undefined ? "0" : restProps.tabIndex;
|
||||
restProps.role = restProps.role === undefined ? "button" : restProps.role;
|
||||
restProps.className = (restProps.className ? restProps.className + " " : "") +
|
||||
"mx_AccessibleButton";
|
||||
|
||||
|
|
|
@ -545,6 +545,8 @@ module.exports = withMatrixClient(React.createClass({
|
|||
const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
|
||||
const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
|
||||
|
||||
const muteScreenReader = isSending || !this.props.eventSendStatus;
|
||||
|
||||
const classes = classNames({
|
||||
mx_EventTile: true,
|
||||
mx_EventTile_isEditing: this.props.isEditing,
|
||||
|
@ -601,9 +603,13 @@ module.exports = withMatrixClient(React.createClass({
|
|||
if (this.props.mxEvent.sender && avatarSize) {
|
||||
avatar = (
|
||||
<div className="mx_EventTile_avatar">
|
||||
<MemberAvatar member={this.props.mxEvent.sender}
|
||||
<MemberAvatar
|
||||
member={this.props.mxEvent.sender}
|
||||
width={avatarSize} height={avatarSize}
|
||||
viewUserOnClick={true}
|
||||
aria-hidden={true} /* silence screen readers */
|
||||
buttonRole={null} /* trick screen readers into thinking this is not a button */
|
||||
tabIndex={null} /* trick screen readers into thinking this is not a button */
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -773,7 +779,7 @@ module.exports = withMatrixClient(React.createClass({
|
|||
'replyThread',
|
||||
);
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className={classes} aria-hidden={muteScreenReader}>
|
||||
<div className="mx_EventTile_msgOption">
|
||||
{ readAvatars }
|
||||
</div>
|
||||
|
@ -797,7 +803,7 @@ module.exports = withMatrixClient(React.createClass({
|
|||
{ actionBar }
|
||||
</div>
|
||||
{
|
||||
// The avatar goes after the event tile as it's absolutly positioned to be over the
|
||||
// The avatar goes after the event tile as it's absolutely positioned to be over the
|
||||
// event tile line, so needs to be later in the DOM so it appears on top (this avoids
|
||||
// the need for further z-indexing chaos)
|
||||
}
|
||||
|
|
|
@ -211,11 +211,13 @@ module.exports = React.createClass({
|
|||
<MemberAvatar
|
||||
member={this.props.member}
|
||||
fallbackUserId={this.props.fallbackUserId}
|
||||
aria-hidden="true"
|
||||
width={14} height={14} resizeMethod="crop"
|
||||
style={style}
|
||||
title={title}
|
||||
onClick={this.props.onClick}
|
||||
aria-hidden={true} /* silence screen readers */
|
||||
buttonRole={null} /* trick screen readers into thinking this is not a button */
|
||||
tabIndex={null} /* trick screen readers into thinking this is not a button */
|
||||
/>
|
||||
</Velociraptor>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue