Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

♻️ refactor(link): rel noopener & title target blank [DS-2509] #737

Merged
merged 3 commits into from
Nov 6, 2023
Merged

♻️ refactor(link): rel noopener & title target blank [DS-2509] #737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
033a383
refactor(link): rel noopener & title target blank
keryanS Aug 31, 2023
14fc4c4
fix(*): ajout rel external
keryanS Sep 11, 2023
28c2e7a
Merge branch 'dev-1.11.0' into refactor/noopener-blank
keryanS Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/analytics/example/attribute/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div>
<h4>lien externe</h4>
<div class="<%= prefix %>-mb-6v">
<a href="https://systeme-de-design.gouv.fr" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-external" target="_blank" >libellé du lien</a>
<a href="https://systeme-de-design.gouv.fr" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-external" <%- includeAttrs(targetBlankData()) %>>libellé du lien</a>
</div>
</div>
<div>
Expand Down
2 changes: 1 addition & 1 deletion src/analytics/example/component/quote/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container">
<%- sample('Exemple de citation', '../../../../component/quote/example/sample/quote-default', {quote: {id: uniqueId('quote'), sources: ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', '<a target="_blank" href="https://www.systeme-de-design.gouv.fr/">Détail 4</a>']}}); %>
<%- sample('Exemple de citation', '../../../../component/quote/example/sample/quote-default', {quote: {id: uniqueId('quote'), sources: ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', `<a ${includeAttrs(targetBlankData())} href="https://www.systeme-de-design.gouv.fr/">Détail 4</a>`]}}); %>
</div>
2 changes: 1 addition & 1 deletion src/component/button/template/ejs/button.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ if (button.disabled === true) {
btnAttrs.href = button.href || '#[url - à modifier]';
switch (true) {
case button.blank:
btnAttrs.target = '_blank';
btnAttrs = {...targetBlankData(), ...btnAttrs};
break;

case button.self:
Expand Down
5 changes: 1 addition & 4 deletions src/component/card/example/sample/card-default.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,7 @@ if (card.content) {
data.content.attributes = card.content.attributes ?? {};
if (card.content.assess) data.content.assess = card.content.assess;
if (card.content.disabled) data.content.disabled = card.content.disabled;
if (card.content.blank === true) {
data.content.blank = card.content.blank;
data.content.attributes.title = card.content.attributes?.title ? card.content.attributes.title : `${contentPlaceholder('Intitulé')} - ${getText('blank')}`;
}
if (card.content.blank === true) data.content.blank = card.content.blank;
if (card.content.lang) data.content.lang = card.content.lang;

if (card.content.description !== false) data.content.description = card.content.description || lorem('', 160);
Expand Down
4 changes: 2 additions & 2 deletions src/component/card/template/ejs/content.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const startDetails = content.details ? content.details.filter(detail => !detail.
const markup = content.markup || 'h3';
const hasLink = !content.noLink;
const href = content.href || '#';
const attributes = content.attributes || {};
let attributes = content.attributes || {};
if (content.assess === true) {
attributes[`data-${prefix}-assess-file`] = '';
} else if (typeof(content.assess) === 'string') {
Expand All @@ -52,7 +52,7 @@ if (content.disabled !== true) {
if (content.lang) attributes.hreflang = content.lang;
if (content.downloadable === true) attributes.download = '';
if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable;
if (content.blank === true) attributes.target = '_blank';
if (content.blank === true) attributes = { ...targetBlankData(), ...attributes};

switch (true) {
case content.badgesGroup !== undefined :
Expand Down
2 changes: 1 addition & 1 deletion src/component/display/deprecated/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ let dataFooter = {
}
}
],
copyright: 'Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>'
copyright: `Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" ${includeAttrs(targetBlankData())}>licence etalab-2.0</a>`
}
}
%>
Expand Down
2 changes: 1 addition & 1 deletion src/component/display/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ let dataFooter = {
attributes: attrModal
}
],
copyright: 'Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>'
copyright: `Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" ${includeAttrs(targetBlankData())}>licence etalab-2.0</a>`
}
}
%>
Expand Down
2 changes: 1 addition & 1 deletion src/component/footer/example/sample/footer.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ if (footer.bottom === true) data.bottom = {
{label: 'Données personnelles', url: footer.href},
{label: 'Gestion des cookies', url: footer.href}
],
copyright: 'Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>'
copyright: `Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" ${includeAttrs(targetBlankData())}>licence etalab-2.0</a>`
};
%>

Expand Down
2 changes: 1 addition & 1 deletion src/component/footer/template/ejs/content.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
attributes.id = uniqueId('footer__content-link');
%>
<li class="<%= prefix %>-footer__content-item">
<a <%- includeAttrs(attributes) %> class="<%= prefix %>-footer__content-link" target="_blank" href="https://<%= links[i].label %>"><%= links[i].label %></a>
<a <%- includeAttrs({...targetBlankData(), ...attributes}) %> class="<%= prefix %>-footer__content-link" href="https://<%= links[i].label %>"><%= links[i].label %></a>
</li>
<% } %>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/component/link/deprecated/template/ejs/link.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ if (link.disabled === true) {
linkAttrs.href = link.href || '[url - à modifier]';
switch (true) {
case link.blank:
linkAttrs.target = '_blank';
linkAttrs = {...targetBlankData(), ...linkAttrs};
break;

case link.self:
Expand Down
2 changes: 1 addition & 1 deletion src/component/link/template/ejs/link.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ if (link.disabled === true) {
break;

case link.blank:
linkAttrs.target = '_blank';
linkAttrs = {...targetBlankData(), ...linkAttrs};
break;

case link.self:
Expand Down
16 changes: 9 additions & 7 deletions src/component/navigation/template/ejs/link.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
<%#
# paramètres navigation menu link

* menu.label (string, required) : label du lien
* link.label (string, required) : label du lien

* menu.href (string, required) : url du lien
* link.id (string, required) : id du lien

* menu.target (string, optional) [default: '_self'] : tableau d'éléments de navigation ('_blank' ou '_self')
* link.href (string, required) : url du lien

* menu.active (boolean, optional) : si true l'élément est actif
* link.blank (boolean, optional) [default: false] : si true, target '_blank'

* menu.isPage (boolean, optional) : si true aria-current: 'page', sinon aria-current: 'true'
* link.active (boolean, optional) : si true l'élément est actif

* link.isPage (boolean, optional) : si true aria-current: 'page', sinon aria-current: 'true'

%>

<%
let link = locals.link || {};
const attrs = {
let attrs = {
href: link.href,
target: link.target || '_self',
id: link.id
}
if (link.blank) attrs = {...targetBlankData(), ...attrs};

if (link.active) attrs['aria-current'] = link.isPage ? 'page' : 'true';

Expand Down
4 changes: 2 additions & 2 deletions src/component/notice/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ const sample = getSample(include);

<%- sample('Bandeau d\'information importante avec bouton fermer', './sample/notice-dismissable', {notice: {type: "info", title: "Titre du bandeau"}}, true, './layout.ejs'); %>

<%- sample('Bandeau d\'information importante avec lien', './sample/notice-dismissable', {notice: {type: "info", title: "Titre du bandeau, <a href='#' rel='noopener' target='_blank'>lien au fil du texte</a>"}}, true, './layout.ejs'); %>
<%- sample('Bandeau d\'information importante avec lien', './sample/notice-dismissable', {notice: {type: "info", title: `Titre du bandeau, <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a>`}}, true, './layout.ejs'); %>

<%- sample('Bandeau d\'information importante avec titre long', './sample/notice-dismissable', {notice: {type: "info", title: "Titre de bandeau très long, pour tester le comportement du composant avec un texte très long, et un <a href='#' rel='noopener' target='_blank'>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit."}}, true, './layout.ejs'); %>
<%- sample('Bandeau d\'information importante avec titre long', './sample/notice-dismissable', {notice: {type: "info", title: `Titre de bandeau très long, pour tester le comportement du composant avec un texte très long, et un <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit.`}}, true, './layout.ejs'); %>
2 changes: 1 addition & 1 deletion src/component/quote/example/sample/quote-default.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ let data = {
size: quote.size || undefined,
author: quote.author || 'Auteur',
href: quote.href || contentPlaceholder('https://lien-vers-la-source.fr'),
sources: quote.sources || ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', '<a target="_blank" href="' + contentPlaceholder('Lien vers la sources ou des infos complémentaires') + '">Détail 4</a>'],
sources: quote.sources || ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', `<a ${includeAttrs(targetBlankData())} href="${contentPlaceholder('Lien vers la sources ou des infos complémentaires')}">Détail 4</a>`],
};
%>

Expand Down
42 changes: 21 additions & 21 deletions src/component/tag/template/ejs/tag.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,33 +46,33 @@ if (tag.accent !== undefined) tagClasses.push(prefix + '-tag--' + tag.accent);

switch(tag.size) {
case 'sm':
tagClasses.push(prefix + '-tag--sm');
tagClasses.push(prefix + '-tag--sm');
break;
}

switch(tag.type) {
case 'clickable':
if (tag.markup === undefined) tag.markup = 'a';
if (tag.disabled !== true) {
tagAttrs.href = tag.href || contentPlaceholder('url');
switch (true) {
case tag.blank:
tagAttrs.target = '_blank';
break;
case tag.self:
tagAttrs.target = '_self';
break;
}
if (tag.markup === undefined) tag.markup = 'a';
if (tag.disabled !== true) {
tagAttrs.href = tag.href || contentPlaceholder('url');
switch (true) {
case tag.blank:
tagAttrs = {...targetBlankData(), ...tagAttrs};
break;
case tag.self:
tagAttrs.target = '_self';
break;
}
}
break;
case 'pressable':
if (tag.markup === undefined) tag.markup = 'button';
tagAttrs["aria-pressed"] = tag.pressed === true ? 'true' : 'false';
if (tag.markup === undefined) tag.markup = 'button';
tagAttrs["aria-pressed"] = tag.pressed === true ? 'true' : 'false';
break;
case 'dismissible':
if (tag.markup === undefined) tag.markup = 'button';
tagClasses.push(prefix + '-tag--dismiss');
tagAttrs["aria-label"] = 'Retirer ' + contentPlaceholder('le filtre ' + tag.label);
if (tag.markup === undefined) tag.markup = 'button';
tagClasses.push(prefix + '-tag--dismiss');
tagAttrs["aria-label"] = 'Retirer ' + contentPlaceholder('le filtre ' + tag.label);
break;
default:
if (tag.markup === undefined) tag.markup = 'p';
Expand All @@ -83,12 +83,12 @@ if (tag.icon !== undefined) tagClasses.push(prefix + '-icon-' + tag.icon);

if (tag.iconPlace !== undefined) switch(tag.iconPlace) {
case 'left':
tagClasses.push(prefix + '-tag--icon-left');
break;
tagClasses.push(prefix + '-tag--icon-left');
break;

case 'right':
tagClasses.push(prefix + '-tag--icon-right');
break;
tagClasses.push(prefix + '-tag--icon-right');
break;
}

if (tag.disabled === true) {
Expand Down
5 changes: 1 addition & 4 deletions src/component/tile/example/sample/tile-default.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,7 @@ if (tile.content) {
data.content.attributes = tile.content.attributes ?? {};
if (tile.content.assess) data.content.assess = tile.content.assess;
if (tile.content.lang) data.content.lang = tile.content.lang;
if (tile.content.blank === true) {
data.content.blank = tile.content.blank;
data.content.attributes.title = tile.content.attributes?.title ? tile.content.attributes.title : `${contentPlaceholder('Intitulé')} - ${getText('blank')}`;
}
if (tile.content.blank === true) data.content.blank = tile.content.blank;

if (tile.content.disabled) data.content.disabled = tile.content.disabled;

Expand Down
4 changes: 2 additions & 2 deletions src/component/tile/template/ejs/content.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ let start = {};

const markup = content.markup || 'h3';
const href = content.href || '#';
const attributes = content.attributes || {};
let attributes = content.attributes || {};
const hasLink = !content.noLink;
if (content.assess === true) {
attributes[`data-${prefix}-assess-file`] = '';
Expand All @@ -48,7 +48,7 @@ if (content.disabled !== true) {
if (content.lang) attributes.hreflang = content.lang;
if (content.downloadable === true) attributes.download = '';
if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable;
if (content.blank === true) attributes.target = '_blank';
if (content.blank === true) attributes = {...targetBlankData(), ...attributes};

if (content.badgesGroup) start.badgesGroup = content.badgesGroup;
if (content.tagsGroup) start.tagsGroup = content.tagsGroup;
Expand Down
4 changes: 2 additions & 2 deletions src/core/example/link/link-raw/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

<%- sample({ title: 'Lien brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-raw-link" title="titre lien" href="../">lien interne</a>`} }, true); %>

<%- sample({ title: 'Lien externe brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-raw-link" title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`} }, true); %>
<%- sample({ title: 'Lien externe brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-raw-link" href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>lien externe - nouvelle fenêtre</a>`} }, true); %>

<%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: rawWrapperSubtitle}, '../sample/blocks', { classes: [`${prefix}-raw-link`], paragraphes: [ {insert: `<a title="titre lien" href="../">lien interne</a>`}, {insert: `<a title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`}] }, true); %>
<%- sample({ title: 'Exemple sur plusieurs blocs de texte', subtitle: rawWrapperSubtitle}, '../sample/blocks', { classes: [`${prefix}-raw-link`], paragraphes: [ {insert: `<a title="titre lien" href="../">lien interne</a>`}, {insert: `<a href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>lien externe - nouvelle fenêtre</a>`}] }, true); %>

<%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: rawWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-raw-link`] }, true); %>
</div>
4 changes: 2 additions & 2 deletions src/core/example/link/link-reset/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

<%- sample({ title: 'Lien réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-reset-link" title="titre lien" href="../">lien interne</a>`} }, true); %>

<%- sample({ title: 'Lien externe réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-reset-link" title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`} }, true); %>
<%- sample({ title: 'Lien externe réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-reset-link" href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>lien externe - nouvelle fenêtre</a>`} }, true); %>

<%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: `Utilisation de la classe <code>${prefix}-reset-link</code> sur un wrapper pour réinitialiser le style des liens.`}, '../sample/blocks', { classes: [`${prefix}-reset-link`], paragraphes: [ {insert: `<a title="titre lien" href="../">lien interne</a>`}, {insert: `<a title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`}] }, true); %>
<%- sample({ title: 'Exemple sur plusieurs blocs de texte', subtitle: `Utilisation de la classe <code>${prefix}-reset-link</code> sur un wrapper pour réinitialiser le style des liens.`}, '../sample/blocks', { classes: [`${prefix}-reset-link`], paragraphes: [ {insert: `<a title="titre lien" href="../">lien interne</a>`}, {insert: `<a href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>lien externe - nouvelle fenêtre</a>`}] }, true); %>

<%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: resetWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-reset-link`] }, true); %>
</div>
2 changes: 1 addition & 1 deletion src/core/example/reset/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ let ol = {

<%- sample('Test de paragraphe et de lien interne :', './sample/paragraph', { paragraph: {insert: '<a title="titre lien interne" href="#" target="_self">lien interne</a>'} }, true); %>

<%- sample('Test de paragraphe et de lien externe :', './sample/paragraph', { paragraph: {insert: '<a title="titre lien externe - nouvelle fenêtre" href="#" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>'} }, true); %>
<%- sample('Test de paragraphe et de lien externe :', './sample/paragraph', { paragraph: {insert: `<a href="#" ${includeAttrs(targetBlankData())}>lien externe - nouvelle fenêtre</a>`} }, true); %>

<%- sample('Test de liste non-ordonnée:', './sample/ul', {list:ul}, true); %>

Expand Down
10 changes: 10 additions & 0 deletions tool/example/decorator.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,16 @@ const errorData = (error) => {

locals.errorData = errorData;

const targetBlankData = () => {
const attr = {};
attr.target = '_blank';
attr.rel = 'noopener external';
attr.title = `${contentPlaceholder('Intitulé')} - ${getText('blank')}`;
return attr;
}

locals.targetBlankData = targetBlankData;

const randomSeed = (seed) => {
const rng = prand.xoroshiro128plus(seed);
locals.rng = rng;
Expand Down
4 changes: 2 additions & 2 deletions tool/example/heading.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<%
for (const d of doc) {
%>
<li><a href="<%= d.url %>" target="_blank"><%= d.title %></a></li>
<li><a href="<%= d.url %>" <%- includeAttrs(targetBlankData()) %> <%= d.title %></a></li>
<%
}
%>
Expand All @@ -27,7 +27,7 @@

case typeof doc === 'string':
%>
<a href="<%= doc %>" target="_blank">Documentation</a>
<a href="<%= doc %>" <%- includeAttrs(targetBlankData()) %>>Documentation</a>
<%
break;
}
Expand Down