OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Make URL previews dismissable via keyboard and accessible to screen readers
pull/21833/head
Michael Telatynski 2019-12-13 17:19:23 +00:00 committed by GitHub
parent b7fe06706d 17a42cd287
commit 0362ea6c4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
res/css/views/rooms/_LinkPreviewWidget.scss
View File

@ -52,12 +52,18 @@ limitations under the License.
} }
.mx_LinkPreviewWidget_cancel { .mx_LinkPreviewWidget_cancel {
visibility: hidden;
cursor: pointer; 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; visibility: visible;
} }

10
src/components/views/rooms/LinkPreviewWidget.js
View File

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

1
src/i18n/strings/en_EN.json
View File

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