From 8fd15f75e6c729f0a83a5dd3f6f137f4b58b74a6 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 6 Nov 2023 17:16:07 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(link):=20rel=20noopener=20ex?= =?UTF-8?q?ternal=20&=20title=20target=20blank=20=20[DS-2509]=20(#737)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ajout d'attribut title et rel noopener external sur les liens en target blank - modification des exemple de card, tile, link, footer, quote, notice --- src/analytics/example/attribute/index.ejs | 2 +- .../example/component/quote/index.ejs | 2 +- src/component/button/template/ejs/button.ejs | 2 +- .../card/example/sample/card-default.ejs | 5 +-- src/component/card/template/ejs/content.ejs | 4 +- .../display/deprecated/example/index.ejs | 2 +- src/component/display/example/index.ejs | 2 +- .../footer/example/sample/footer.ejs | 2 +- src/component/footer/template/ejs/content.ejs | 2 +- .../link/deprecated/template/ejs/link.ejs | 2 +- src/component/link/template/ejs/link.ejs | 2 +- .../navigation/template/ejs/link.ejs | 16 +++---- src/component/notice/example/index.ejs | 4 +- .../quote/example/sample/quote-default.ejs | 2 +- src/component/tag/template/ejs/tag.ejs | 42 +++++++++---------- .../tile/example/sample/tile-default.ejs | 5 +-- src/component/tile/template/ejs/content.ejs | 4 +- src/core/example/link/link-raw/index.ejs | 4 +- src/core/example/link/link-reset/index.ejs | 4 +- src/core/example/reset/index.ejs | 2 +- tool/example/decorator.ejs | 10 +++++ tool/example/heading.ejs | 4 +- 22 files changed, 65 insertions(+), 59 deletions(-) diff --git a/src/analytics/example/attribute/index.ejs b/src/analytics/example/attribute/index.ejs index 1584a5f32..acdac88d0 100644 --- a/src/analytics/example/attribute/index.ejs +++ b/src/analytics/example/attribute/index.ejs @@ -14,7 +14,7 @@

lien externe

- -analytics-click="libellé envoyé à l'analytics" id="attr-external" target="_blank" >libellé du lien + -analytics-click="libellé envoyé à l'analytics" id="attr-external" <%- includeAttrs(targetBlankData()) %>>libellé du lien
diff --git a/src/analytics/example/component/quote/index.ejs b/src/analytics/example/component/quote/index.ejs index 09aa5fae2..b9f60e90f 100644 --- a/src/analytics/example/component/quote/index.ejs +++ b/src/analytics/example/component/quote/index.ejs @@ -1,5 +1,5 @@ <% const sample = getSample(include); %>
- <%- sample('Exemple de citation', '../../../../component/quote/example/sample/quote-default', {quote: {id: uniqueId('quote'), sources: ['Ouvrage', 'Détail 1', 'Détail 2', 'Détail 3', 'Détail 4']}}); %> + <%- sample('Exemple de citation', '../../../../component/quote/example/sample/quote-default', {quote: {id: uniqueId('quote'), sources: ['Ouvrage', 'Détail 1', 'Détail 2', 'Détail 3', `Détail 4`]}}); %>
diff --git a/src/component/button/template/ejs/button.ejs b/src/component/button/template/ejs/button.ejs index 70d4a3bfd..d1e5f0045 100644 --- a/src/component/button/template/ejs/button.ejs +++ b/src/component/button/template/ejs/button.ejs @@ -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: diff --git a/src/component/card/example/sample/card-default.ejs b/src/component/card/example/sample/card-default.ejs index 3416a0cfd..540d608fc 100755 --- a/src/component/card/example/sample/card-default.ejs +++ b/src/component/card/example/sample/card-default.ejs @@ -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); diff --git a/src/component/card/template/ejs/content.ejs b/src/component/card/template/ejs/content.ejs index fbc5a01da..d42836a87 100644 --- a/src/component/card/template/ejs/content.ejs +++ b/src/component/card/template/ejs/content.ejs @@ -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') { @@ -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 : diff --git a/src/component/display/deprecated/example/index.ejs b/src/component/display/deprecated/example/index.ejs index 2c62b9bf7..c047bbc27 100644 --- a/src/component/display/deprecated/example/index.ejs +++ b/src/component/display/deprecated/example/index.ejs @@ -57,7 +57,7 @@ let dataFooter = { } } ], - copyright: 'Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0' + copyright: `Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0` } } %> diff --git a/src/component/display/example/index.ejs b/src/component/display/example/index.ejs index eb0c4889d..62672f02f 100644 --- a/src/component/display/example/index.ejs +++ b/src/component/display/example/index.ejs @@ -53,7 +53,7 @@ let dataFooter = { attributes: attrModal } ], - copyright: 'Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0' + copyright: `Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0` } } %> diff --git a/src/component/footer/example/sample/footer.ejs b/src/component/footer/example/sample/footer.ejs index fde7bc922..c3f33e7e8 100644 --- a/src/component/footer/example/sample/footer.ejs +++ b/src/component/footer/example/sample/footer.ejs @@ -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 licence etalab-2.0' + copyright: `Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous licence etalab-2.0` }; %> diff --git a/src/component/footer/template/ejs/content.ejs b/src/component/footer/template/ejs/content.ejs index fe9795c3c..15cf0bda1 100644 --- a/src/component/footer/template/ejs/content.ejs +++ b/src/component/footer/template/ejs/content.ejs @@ -19,7 +19,7 @@ attributes.id = uniqueId('footer__content-link'); %>
  • - class="<%= prefix %>-footer__content-link" target="_blank" href="https://<%= links[i].label %>"><%= links[i].label %> + class="<%= prefix %>-footer__content-link" href="https://<%= links[i].label %>"><%= links[i].label %>
    • <% } %> diff --git a/src/component/link/deprecated/template/ejs/link.ejs b/src/component/link/deprecated/template/ejs/link.ejs index f7c8d36a8..0384d31db 100644 --- a/src/component/link/deprecated/template/ejs/link.ejs +++ b/src/component/link/deprecated/template/ejs/link.ejs @@ -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: diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index e4b368ef2..e8280046f 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -104,7 +104,7 @@ if (link.disabled === true) { break; case link.blank: - linkAttrs.target = '_blank'; + linkAttrs = {...targetBlankData(), ...linkAttrs}; break; case link.self: diff --git a/src/component/navigation/template/ejs/link.ejs b/src/component/navigation/template/ejs/link.ejs index bc657b7f2..4220206bd 100644 --- a/src/component/navigation/template/ejs/link.ejs +++ b/src/component/navigation/template/ejs/link.ejs @@ -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'; diff --git a/src/component/notice/example/index.ejs b/src/component/notice/example/index.ejs index 3bb9b353b..b0154c3b6 100755 --- a/src/component/notice/example/index.ejs +++ b/src/component/notice/example/index.ejs @@ -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, lien au fil du texte"}}, true, './layout.ejs'); %> +<%- sample('Bandeau d\'information importante avec lien', './sample/notice-dismissable', {notice: {type: "info", title: `Titre du bandeau, lien au fil du texte`}}, 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 lien au fil du texte 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 lien au fil du texte lorem ipsum dolor sit lorem ipsum dolor sit.`}}, true, './layout.ejs'); %> diff --git a/src/component/quote/example/sample/quote-default.ejs b/src/component/quote/example/sample/quote-default.ejs index f742ec703..62d276d66 100755 --- a/src/component/quote/example/sample/quote-default.ejs +++ b/src/component/quote/example/sample/quote-default.ejs @@ -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 || ['Ouvrage', 'Détail 1', 'Détail 2', 'Détail 3', 'Détail 4'], + sources: quote.sources || ['Ouvrage', 'Détail 1', 'Détail 2', 'Détail 3', `Détail 4`], }; %> diff --git a/src/component/tag/template/ejs/tag.ejs b/src/component/tag/template/ejs/tag.ejs index c144a456d..3a571e7f1 100644 --- a/src/component/tag/template/ejs/tag.ejs +++ b/src/component/tag/template/ejs/tag.ejs @@ -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'; @@ -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) { diff --git a/src/component/tile/example/sample/tile-default.ejs b/src/component/tile/example/sample/tile-default.ejs index abfe4bf41..5ce66d026 100755 --- a/src/component/tile/example/sample/tile-default.ejs +++ b/src/component/tile/example/sample/tile-default.ejs @@ -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; diff --git a/src/component/tile/template/ejs/content.ejs b/src/component/tile/template/ejs/content.ejs index 2681c8bbb..8f6f7445f 100644 --- a/src/component/tile/template/ejs/content.ejs +++ b/src/component/tile/template/ejs/content.ejs @@ -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`] = ''; @@ -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; diff --git a/src/core/example/link/link-raw/index.ejs b/src/core/example/link/link-raw/index.ejs index b04618cdb..cbcfdf95b 100644 --- a/src/core/example/link/link-raw/index.ejs +++ b/src/core/example/link/link-raw/index.ejs @@ -7,9 +7,9 @@ <%- sample({ title: 'Lien brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien interne`} }, true); %> - <%- sample({ title: 'Lien externe brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> + <%- sample({ title: 'Lien externe brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> - <%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: rawWrapperSubtitle}, '../sample/blocks', { classes: [`${prefix}-raw-link`], paragraphes: [ {insert: `lien interne`}, {insert: `lien externe - nouvelle fenêtre`}] }, true); %> + <%- sample({ title: 'Exemple sur plusieurs blocs de texte', subtitle: rawWrapperSubtitle}, '../sample/blocks', { classes: [`${prefix}-raw-link`], paragraphes: [ {insert: `lien interne`}, {insert: `lien externe - nouvelle fenêtre`}] }, true); %> <%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: rawWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-raw-link`] }, true); %>
    diff --git a/src/core/example/link/link-reset/index.ejs b/src/core/example/link/link-reset/index.ejs index 10cc8613c..2a8c458ed 100644 --- a/src/core/example/link/link-reset/index.ejs +++ b/src/core/example/link/link-reset/index.ejs @@ -7,9 +7,9 @@ <%- sample({ title: 'Lien réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien interne`} }, true); %> - <%- sample({ title: 'Lien externe réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> + <%- sample({ title: 'Lien externe réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> - <%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: `Utilisation de la classe ${prefix}-reset-link sur un wrapper pour réinitialiser le style des liens.`}, '../sample/blocks', { classes: [`${prefix}-reset-link`], paragraphes: [ {insert: `lien interne`}, {insert: `lien externe - nouvelle fenêtre`}] }, true); %> + <%- sample({ title: 'Exemple sur plusieurs blocs de texte', subtitle: `Utilisation de la classe ${prefix}-reset-link sur un wrapper pour réinitialiser le style des liens.`}, '../sample/blocks', { classes: [`${prefix}-reset-link`], paragraphes: [ {insert: `lien interne`}, {insert: `lien externe - nouvelle fenêtre`}] }, true); %> <%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: resetWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-reset-link`] }, true); %> diff --git a/src/core/example/reset/index.ejs b/src/core/example/reset/index.ejs index 9e3b8c24e..5b128a3ab 100644 --- a/src/core/example/reset/index.ejs +++ b/src/core/example/reset/index.ejs @@ -24,7 +24,7 @@ let ol = { <%- sample('Test de paragraphe et de lien interne :', './sample/paragraph', { paragraph: {insert: 'lien interne'} }, true); %> -<%- sample('Test de paragraphe et de lien externe :', './sample/paragraph', { paragraph: {insert: 'lien externe - nouvelle fenêtre'} }, true); %> +<%- sample('Test de paragraphe et de lien externe :', './sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> <%- sample('Test de liste non-ordonnée:', './sample/ul', {list:ul}, true); %> diff --git a/tool/example/decorator.ejs b/tool/example/decorator.ejs index 930e43666..5235ea985 100644 --- a/tool/example/decorator.ejs +++ b/tool/example/decorator.ejs @@ -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; diff --git a/tool/example/heading.ejs b/tool/example/heading.ejs index 111bd8989..e7ee16d1a 100644 --- a/tool/example/heading.ejs +++ b/tool/example/heading.ejs @@ -17,7 +17,7 @@ <% for (const d of doc) { %> -
  • <%= d.title %>
    • +
  • <%= d.title %>
    • <% } %> @@ -27,7 +27,7 @@ case typeof doc === 'string': %> - Documentation + >Documentation <% break; }