Improve A11Y of timeline. Show TS & Actions on focus-within

Author: t3chguy

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

src/components/views/messages/DateSeparator.js

@@ -57,7 +57,7 @@ export default class DateSeparator extends React.Component {
 
  render() {
  // ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
- return <h2 className="mx_DateSeparator" role="separator">
+ return <h2 className="mx_DateSeparator" role="separator" tabIndex={-1}>
  <hr role="none" />
  <div>{ this.getLabel() }</div>
  <hr role="none" />

src/components/views/messages/MessageActionBar.js

@@ -180,7 +180,8 @@ export default class MessageActionBar extends React.PureComponent {
  />;
  }
 
- return <div className="mx_MessageActionBar">
+ // aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive.
+ return <div className="mx_MessageActionBar" role="toolbar" aria-label={_t("Message Actions")} aria-live="off">
  {reactButton}
  {replyButton}
  {editButton}

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 (
- <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
+ <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)} aria-hidden={true}>
  { formatTime(date, this.props.showTwelveHour) }
  </span>
  );

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 (
- <div className={classes}>
+ <div className={classes} tabIndex={-1}>
  <div className="mx_EventTile_msgOption">
  { readAvatars }
  </div>
  { sender }
  <div className="mx_EventTile_line">
- <a href={permalink} onClick={this.onPermalinkClicked}>
+ <a
+ href={permalink}
+ onClick={this.onPermalinkClicked}
+ aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+ >
  { timestamp }
  </a>
  { this._renderE2EPadlock() }

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