PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Make URL previews dismissable via keyboard and accessible to screen readers
This commit is contained in:
Michael Telatynski 2019-12-13 17:19:23 +00:00 committed by GitHub
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 {
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;
}

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

@ -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>
);
},

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

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