🐛 fix(link): rel noopener external & title target blank [DS-2509] (#737)

- 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

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

src/analytics/example/component/quote/index.ejs

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

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:

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);

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 :

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 <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>`
     }
 }
 %>

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 <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>`
     }
 }
 %>

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 <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>`
 };
 %>
 

src/component/footer/template/ejs/content.ejs

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

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:

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:

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';
 

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, <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'); %>

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 || ['<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>`],
 };
 %>
 

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) {

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;
 

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;

src/core/example/link/link-raw/index.ejs

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

src/core/example/link/link-reset/index.ejs

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

src/core/example/reset/index.ejs

@@ -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); %>
 

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;

tool/example/heading.ejs

@@ -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>
     <%
     }
     %>
@@ -27,7 +27,7 @@
 
   case typeof doc === 'string':
   %>
-  <a href="<%= doc %>" target="_blank">Documentation</a>
+  <a href="<%= doc %>" <%- includeAttrs(targetBlankData()) %>>Documentation</a>
   <%
     break;
   }