Add descriptions to ambiguous links for screen readers (#7310)

* add title to room share link

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add ExternalLink component

Signed-off-by: Kerry Archibald <kerrya@element.io>

* unit test ExternalLink

Signed-off-by: Kerry Archibald <kerrya@element.io>

* default target and rel for external link

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use scss $font variables

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2021-12-09 13:04:06 +01:00 committed by GitHub
parent d7a6e3ec65
commit 1216285ed2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 160 additions and 8 deletions

View file

@ -28,6 +28,7 @@ import AccessibleButton from '../elements/AccessibleButton';
import AvatarSetting from './AvatarSetting';
import { logger } from "matrix-js-sdk/src/logger";
import ExternalLink from '../elements/ExternalLink';
interface IState {
userId?: string;
@ -165,12 +166,11 @@ export default class ProfileSettings extends React.Component<{}, IState> {
{ _t(
"<a>Upgrade</a> to your own domain", {},
{
a: sub => <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">{ sub }</a>,
a: sub => <ExternalLink href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
{ sub }
</ExternalLink>,
},
) }
<a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
<img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
</a>
</span>;
}