J4 Issue ?
avatar zero-24
zero-24
23 Jun 2018

What needs to be fixed

As noted by @brianteeman we need to have some styling to show we haven an external link maybe we can come up with a css class?

How would you fix it

Maybe a CSS Class

Side Effects expected

The side effect would be that we have to review all external links in the cms and add the class ;)

avatar zero-24 zero-24 - open - 23 Jun 2018
avatar joomla-cms-bot joomla-cms-bot - change - 23 Jun 2018
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 23 Jun 2018
avatar brianteeman
brianteeman - comment - 23 Jun 2018

Not so much about the links being external but as seen in com_csp and httpheaders plugin where external links are added to field labels there is no way to know they are links at all

avatar brianteeman
brianteeman - comment - 23 Jun 2018

Also accessibility rules state that you should "inform" a user if a link opens in a new window

avatar franz-wohlkoenig franz-wohlkoenig - change - 24 Jun 2018
Category Layout
avatar franz-wohlkoenig franz-wohlkoenig - change - 24 Jun 2018
Status New Discussion
avatar brianteeman brianteeman - change - 25 Jun 2018
Labels Added: J4 Issue
avatar brianteeman brianteeman - labeled - 25 Jun 2018
avatar markusmarchewa
markusmarchewa - comment - 8 Sep 2018

A CSS style targeting links with target="_blank" nested in labels may solve the issue. The CSS style could put some fontawesome icon (e.g. "external-link") before the link.

avatar brianteeman
brianteeman - comment - 18 Sep 2018

This should work but I am no css expert

[target="_blank"]:before {
	content:" ";
	background-image:url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 928v320q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-320q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z"/></svg>');
	height:0.8em;
	width:0.8em;
	display:inline-block;
	background-size: 100%;
	margin-right:0.125em;
}

Demo
https://codepen.io/brianteeman/pen/XPyXOo

avatar markusmarchewa
markusmarchewa - comment - 29 Sep 2018

I'm not an CSS expert either but I tried this with the default "atum" template and it works:

label a[target=_blank]:before {
font-family: 'FontAwesome';
font-style: normal;
speak: none;
content: '\f08e';
margin-right: .5em;
}

avatar brianteeman
brianteeman - comment - 29 Sep 2018

The main difference is accessibility. Using an empty content and putting a background image doesn't add anything to the accessibility tree. your version puts the unpronounceable Unicode in the accessibility tree

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 2 Apr 2019

@markusmarchewa can you provide a Pull Request (+accessibility)?

avatar franz-wohlkoenig franz-wohlkoenig - change - 2 Apr 2019
Status Discussion Information Required
avatar franz-wohlkoenig franz-wohlkoenig - change - 19 Apr 2019
Title
[4.0] [CSS] Some styling to show we haven an external link
[4.0] Some styling to show we haven an external link
avatar franz-wohlkoenig franz-wohlkoenig - edited - 19 Apr 2019
avatar brianteeman
brianteeman - comment - 20 Apr 2019
avatar zero-24
zero-24 - comment - 20 Apr 2019

closing than thanks.

avatar zero-24 zero-24 - close - 20 Apr 2019
avatar zero-24 zero-24 - change - 20 Apr 2019
Status Information Required Closed
Closed_Date 0000-00-00 00:00:00 2019-04-20 07:45:08
Closed_By zero-24

Add a Comment

Login with GitHub to post a comment