Merge pull request #3725 from matrix-org/t3chguy/LinkPreviewWidget_a11y

Make URL previews dismissable via keyboard and accessible to screen readers

res/css/views/rooms/_LinkPreviewWidget.scss

@@ -52,12 +52,18 @@ limitations under the License.
 }
 
 .mx_LinkPreviewWidget_cancel {
-    visibility: hidden;
     cursor: pointer;
-    flex: 0 0 40px;
+    width: 18px;
+    height: 18px;
+
+    img {
+        flex: 0 0 40px;
+        visibility: hidden;
+    }
 }
 
-.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
+.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
+.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
     visibility: visible;
 }
 

src/components/views/rooms/LinkPreviewWidget.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,6 +20,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { linkifyElement } from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from "../../../languageHandler";
 
 const sdk = require('../../../index');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
@@ -125,6 +127,7 @@ module.exports = createReactClass({
                   </div>;
         }
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_LinkPreviewWidget" >
                 { img }
@@ -135,9 +138,10 @@ module.exports = createReactClass({
                         { p["og:description"] }
                     </div>
                 </div>
-                <img className="mx_LinkPreviewWidget_cancel mx_filterFlipColor"
-                    src={require("../../../../res/img/cancel.svg")} width="18" height="18"
-                    onClick={this.props.onCancelClick} />
+                <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
+                    <img className="mx_filterFlipColor" alt="" role="presentation"
+                        src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
+                </AccessibleButton>
             </div>
         );
     },

src/i18n/strings/en_EN.json

@@ -876,6 +876,7 @@
     "Unencrypted": "Unencrypted",
     "Please select the destination room for this message": "Please select the destination room for this message",
     "Scroll to bottom of page": "Scroll to bottom of page",
+    "Close preview": "Close preview",
     "device id: ": "device id: ",
     "Disinvite": "Disinvite",
     "Kick": "Kick",