diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index fafd34f8ca..a30b219016 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -138,11 +138,13 @@ limitations under the License. // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) .mx_EventTile_last > div > a > .mx_MessageTimestamp, .mx_EventTile:hover > div > a > .mx_MessageTimestamp, +.mx_EventTile:focus-within > div > a > .mx_MessageTimestamp, .mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp { visibility: visible; } .mx_EventTile:hover .mx_MessageActionBar, +.mx_EventTile:focus-within .mx_MessageActionBar, .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar { visibility: visible; } @@ -166,6 +168,7 @@ limitations under the License. } .mx_EventTile:hover .mx_EventTile_line, +.mx_EventTile:focus-within .mx_EventTile_line, .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line { background-color: $event-selected-color; } @@ -465,7 +468,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } } -.mx_EventTile:hover .mx_EventTile_body pre { +.mx_EventTile:hover .mx_EventTile_body pre, +.mx_EventTile:focus-within .mx_EventTile_body pre { border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter } @@ -487,6 +491,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { background-image: url($copy-button-url); } +.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton, .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton { visibility: visible; } diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js index 900fd61914..88b59d0c26 100644 --- a/src/components/views/messages/DateSeparator.js +++ b/src/components/views/messages/DateSeparator.js @@ -57,7 +57,7 @@ export default class DateSeparator extends React.Component { render() { // ARIA treats
s as separators, here we abuse them slightly so manually treat this entire thing as one - return

+ return


{ this.getLabel() }

diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 565c66410e..acd8263410 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -180,7 +180,8 @@ export default class MessageActionBar extends React.PureComponent { />; } - return
+ // aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive. + return
{reactButton} {replyButton} {editButton} diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js index 0bbb3f631e..199a6f47ce 100644 --- a/src/components/views/messages/MessageTimestamp.js +++ b/src/components/views/messages/MessageTimestamp.js @@ -28,7 +28,7 @@ export default class MessageTimestamp extends React.Component { 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 ca83dd1814..bc502d0674 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -32,6 +32,7 @@ const TextForEvent = require('../../../TextForEvent'); import dis from '../../../dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; import {EventStatus, MatrixClient} from 'matrix-js-sdk'; +import {formatTime} from "../../../DateUtils"; const ObjectUtils = require('../../../ObjectUtils'); @@ -787,13 +788,17 @@ module.exports = createReactClass({ 'replyThread', ); return ( -
+
{ readAvatars }
{ sender }
- + { timestamp } { this._renderE2EPadlock() } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 524a8a1abf..86521f2594 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1053,6 +1053,7 @@ "React": "React", "Reply": "Reply", "Edit": "Edit", + "Message Actions": "Message Actions", "Options": "Options", "Attachment": "Attachment", "Error decrypting attachment": "Error decrypting attachment",