🐛 fix(content): modifie la structure HTML du composant comportant une…

… transcription [DS-3759] (#932)

- passe la transcription apres la figure
- a11y ajoute texte alternatif sur infographie mentionnant transcription en dessous
- ajout un attribut title sur les videos iframe

src/component/content/example/index.ejs

@@ -24,7 +24,7 @@
 
 <%- sample('Média image, SVG décoratif', './sample/media-svg', { content: { illustration: true } }, true); %>
 
-<%- sample('Média image avec une transcription', './sample/media-img', { content: { img: { ratio:'2x3', src: '../../../example/img/placeholder-transcription.jpg', caption: getText('sample.img.caption', 'content'), link: getText('sample.img.link', 'content')}, transcription: { title: getText('sample.img.transcription.title', 'content'), content: getText('sample.img.transcription.content', 'content')}}}, true); %>
+<%- sample('Média image avec une transcription', './sample/media-img', { content: { img: { ratio:'2x3', src: '../../../example/img/placeholder-transcription.jpg', caption: getText('sample.img.caption', 'content'), alt: getText('sample.img.alternative', 'content'), link: getText('sample.img.link', 'content')}, transcription: { title: getText('sample.img.transcription.title', 'content'), content: getText('sample.img.transcription.content', 'content')}}}, true); %>
 
 <%- sample('Média video edito, ratio d’aspect 16/9 par défaut', './sample/media-vid-default', { content: { transcription: true } }, true); %>
 

src/component/content/example/sample/media-vid-default.ejs

@@ -2,7 +2,7 @@
 const content = locals.content || {};
 const data = {
   vid: {
-    ...vidData(null, null, content.ratio || null)},
+    ...vidData(null, getText('sample.video.title', 'content'), content.ratio || null)},
     caption: 'Description / Source',
     link: 'Label lien',
     id: content.id || uniqueId('media'),

src/component/content/i18n/fr.yml

@@ -3,10 +3,12 @@ description: Les médias désignent vos contenus photos et vidéos. Lorsqu’ils
 doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenu-medias
 
 sample:
+  video:
+    title: 'Vidéo de présentation du Service National Universel - voir transcription ci-dessous'
   img:
     caption: © DILA 2020
     link: 'vie-publique.fr'
-    alternative: 'Planche 1 de la BD Simone Veil : la loi sur l’avortement. Épisode 2'
+    alternative: 'Planche 1 de la BD Simone Veil : la loi sur l’avortement. Épisode 2 - voir transcription ci-dessous'
     transcription:
       title: 'Simone Veil : la loi sur l’avortement'
       content: '<p class="fr-mb-4v">Épisode 2 : une loi qui oppose<br><br>Synopsis : Dans un café, Louise discute avec sa mère de l’opposition virulente qu’a soulevée le projet de loi sur l’avortement défendu par Simone Veil lors des trois jours de débat à l’Assemblée nationale. Trois jours pendant lesquels les langues se sont déliées, pour le meilleur comme pour le pire.</p><ul><li>Case 1</li></ul><p><em>Intérieur jour salon. Un père et ses quatre enfants sont assis, blottis les uns contre les autres, devant un poste de TV et regardent le discours de Simone Veil retransmis en direct.</em><br><em>26 novembre 1974.</em><br>SIMONE VEIL :<br>Aucune femme ne recourt de gaieté de cœur à l’avortement. Il suffit d’écouter les femmes.</p><ul><li>Case 2</li></ul><p><em>Intérieur jour salon. Plan rapproché de la petite fille (la mère de Louise) serré contre son père, son ours en peluche dans les bras.</em><br>SIMONE VEIL :<br>C’est toujours un drame cela restera toujours un drame.</p><ul><li>Case 3</li></ul><p><em>Intérieur jour café, Louise et sa mère, plan rapproché de celle-ci.</em><br>MÈRE :<br>Je ne me rappelle pas grand-chose de ce discours retransmis en direct, mais je me souviens très bien que nous étions tous les quatre avec mon père et mes frères et sœurs devant la télé.<br>Mon père a fondu en larmes juste après.</p><ul><li>Case 4</li></ul><p><em>Intérieur jour café, Louise et sa mère.</em><br>MÈRE :<br>Il faut se rappeler les réactions suite à ce discours ! Simone Veil a souvent évoqué le « climat de passions » qui régnait. Pendant les trois jours de débats qui ont suivi, tout a été dit, même le pire.</p><ul><li>Case 5</li></ul><p><em>Intérieur nuit Assemblée nationale. Plan rapproché sur Jean Foyer à la tribune.<br>Encart texte</em><br>26 novembre 1974. Les débats commencent à l’Assemblée nationale. Jean Foyer, député de la majorité de droite, est le premier opposant au projet à monter à la tribune.</p><p>JEAN FOYER :<br>Déjà des capitaux sont impatients de s’investir dans l’industrie de la mort, et le temps n’est pas loin où nous connaîtrons en France « ces avortoirs », ces abattoirs, où s’entassent des cadavres de petits hommes et que certains de mes collègues ont eu l’occasion de visiter à l’étranger.</p><ul><li>Case 6</li></ul><p><em>Intérieur nuit Assemblée. Lucien Neuwirth à la tribune.<br>Encart texte</em><br>Lucien Neuwirth, député de la majorité qui avait défendu en 1967 le projet de loi sur la contraception, s’exprime.</p><p>LUCIEN NEUWIRTH :<br>… or chacun le sait, l’avortement n’est pas autre chose que l’issue extrême, l’alternative détestable d’une grossesse non désirée.<br>Il convient donc de s’attaquer à l’effet et non à la cause.</p>'

src/component/content/style/_module.scss

@@ -30,7 +30,12 @@
   }
 
   #{ns(transcription)} {
-    @include margin-top(3w);
+    @include margin-top(6v);
+  }
+
+  + #{ns(transcription)} {
+    @include margin-top(-4v);
+    @include margin-bottom(10v);
   }
 
   $medias: (#{&}__img, ns(responsive-vid));

src/component/content/template/ejs/media.ejs

@@ -94,12 +94,11 @@ switch(type) {
         <% } %>
     </figcaption>
 <% } %>
+</figure>
 
 <%
 if (content.transcription != undefined) {
     let data = content.transcription;
 %>
     <%- include('../../../transcription/template/ejs/transcription', {transcription: data}); %>
 <% } %>
-
-</figure>