diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js index 06c440c54e..19150682f0 100644 --- a/src/components/views/elements/AccessibleButton.js +++ b/src/components/views/elements/AccessibleButton.js @@ -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"; diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js index aa629794ba..7d3d298804 100644 --- a/src/components/views/elements/Flair.js +++ b/src/components/views/elements/Flair.js @@ -45,12 +45,18 @@ class FlairAvatar extends React.Component { const tooltip = this.props.groupProfile.name ? `${this.props.groupProfile.name} (${this.props.groupProfile.groupId})`: this.props.groupProfile.groupId; + + // Note: we hide flair from screen readers but ideally we'd support + // reading something out on hover. There's no easy way to do this though, + // so instead we just hide it completely. return ; + title={tooltip} + aria-hidden={true} + />; } } diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js index 0bbb3f631e..5bfdc1bc26 100644 --- a/src/components/views/messages/MessageTimestamp.js +++ b/src/components/views/messages/MessageTimestamp.js @@ -23,12 +23,17 @@ export default class MessageTimestamp extends React.Component { static propTypes = { ts: PropTypes.number.isRequired, showTwelveHour: PropTypes.bool, + ariaHidden: PropTypes.bool, }; render() { const date = new Date(this.props.ts); return ( - + { formatTime(date, this.props.showTwelveHour) } ); diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 6f0d555d4f..bbc8faa3f5 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -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 = (
-
); @@ -634,8 +640,12 @@ module.exports = withMatrixClient(React.createClass({ onFocusChange={this.onActionBarFocusChange} /> : undefined; - const timestamp = this.props.mxEvent.getTs() ? - : null; + const timestamp = this.props.mxEvent.getTs() + ? : null; const keyRequestHelpText =
@@ -773,13 +783,13 @@ module.exports = withMatrixClient(React.createClass({ 'replyThread', ); return ( -
+
{ readAvatars }
{ sender }
- + { timestamp } { this._renderE2EPadlock() } @@ -797,7 +807,7 @@ module.exports = withMatrixClient(React.createClass({ { actionBar }
{ - // 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) } diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index 2f7a599d95..4025a36831 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -211,11 +211,13 @@ module.exports = React.createClass({