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..56faa670b2 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -57,7 +57,8 @@ 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
+ // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
+ 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..9497324f5a 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');
@@ -786,14 +787,19 @@ module.exports = createReactClass({
this.props.permalinkCreator,
'replyThread',
);
+ // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return (
-
+
{ readAvatars }
{ sender }
-
+
{ timestamp }
{ this._renderE2EPadlock() }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d6b7eb60a3..5af7e26b79 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1055,6 +1055,7 @@
"React": "React",
"Reply": "Reply",
"Edit": "Edit",
+ "Message Actions": "Message Actions",
"Options": "Options",
"Attachment": "Attachment",
"Error decrypting attachment": "Error decrypting attachment",