fix(logo): évite les arrêts de vocalisation de lecteurs d'écrans

Actuellement on utilise des `<br>` dans les logos pour que
"République Française" ou autres termes s'affichent bien visuellement.

Par défaut, un lecteur d'écran peut avoir tendance à arrêter la lecture
après un `<br>`. C'est le comportement normal, c'est ce qu'on veut
habituellement : il s'arrête pour marquer un passage à la ligne.

Cependant ici ça serait mieux que le lecteur ne s'arrête pas, le br
étant utilisé uniquement pour l'aspect layout.

Masquer ces `<br>` de l'arbre d'accessibilité permet de rendre la
vocalisation plus fluide (plus d'arrêts à cause des br) tout en gardant
l'impact visuel.

Note : dans certains usages du logo, le problème n'était pas présent (le
dom n'est pas tout à fait le même sur un "header minimal" et un "header
sans navigation" par exemple). Cependant j'ai trouvé ça pas plus mal de
garder cette idée de aria-hidden partout afin que tout copié/collé
rapide du DSFR fonctionne.

Signed-off-by: Emmanuel Pelletier <[email protected]>

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

@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
 <div class="<%= prefix %>-container" >
-  <%- sample('En-tête', '../../../../component/header/example/sample/header.ejs', {header: { id: uniqueId('header'), logo:{ title: 'République<br>Française'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:9.0625rem;'), service: true, links:true, search: true, navigation: 'min' }});  %>
+  <%- sample('En-tête', '../../../../component/header/example/sample/header.ejs', {header: { id: uniqueId('header'), logo:{ title: 'République<br aria-hidden="true">Française'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:9.0625rem;'), service: true, links:true, search: true, navigation: 'min' }});  %>
 </div>

src/analytics/example/spa/agnostic/index.ejs

@@ -7,7 +7,7 @@
             <div class="<%= prefix %>-header__logo">
               <p class="<%= prefix %>-logo">
                 République
-                <br>Française
+                <br aria-hidden="true">Française
               </p>
             </div>
             <div class="<%= prefix %>-header__operator">

src/analytics/example/spa/angular/_index.ejs

@@ -26,7 +26,7 @@ app.config(function($routeProvider) {
                     <div class="fr-header__brand-top">
                         <div class="fr-header__logo">
                             <p class="fr-logo">
-                                République <br/>
+                                République <br aria-hidden="true" />
                                 Française
                             </p>
                         </div>

src/analytics/example/spa/react/index.ejs

@@ -26,7 +26,7 @@
                         <div class="fr-header__brand-top">
                             <div class="fr-header__logo">
                                 <p class="fr-logo">
-                                    République <br/>
+                                    République <br aria-hidden="true" />
                                     Française
                                 </p>
                             </div>

src/analytics/example/spa/vue/index.ejs

@@ -10,7 +10,7 @@
                             <div class="<%= prefix %>-header__logo">
                                 <p class="<%= prefix %>-logo">
                                     République
-                                    <br>Française
+                                    <br aria-hidden="true">Française
                                 </p>
                             </div>
                             <div class="<%= prefix %>-header__operator">

src/component/display/deprecated/example/index.ejs

@@ -28,7 +28,7 @@ let dataFooter = {
     id: uniqueId('footer'),
     brand: {
       logo: {
-          title: 'république<br>française',
+          title: 'république<br aria-hidden="true">française',
       },
     },
     content: {

src/component/display/example/index.ejs

@@ -28,7 +28,7 @@ let dataFooter = {
     id: uniqueId('footer'),
     brand: {
       logo: {
-          title: 'république<br>française',
+          title: 'république<br aria-hidden="true">française',
       },
     },
     content: {

src/component/follow/deprecated/example/sample/data.ejs

@@ -1,6 +1,6 @@
 <% let data = {};
 data.socials = {
-  title: "Suivez-nous<br> sur les réseaux sociaux",
+  title: "Suivez-nous<br aria-hidden=\"true\"> sur les réseaux sociaux",
   networks: [
     {
       label: "facebook",

src/component/follow/example/data/socials.json.ejs

@@ -1,6 +1,6 @@
 <% let data = {};
 data.socials = {
-  title: "Suivez-nous<br> sur les réseaux sociaux",
+  title: "Suivez-nous<br aria-hidden=\"true\"> sur les réseaux sociaux",
   buttons: [
     {
       label: "Facebook",

src/component/header/deprecated/example/sample/header.ejs

@@ -6,7 +6,7 @@ const data = {body: {}, menu: menu};
 let hasNavbar = false;
 let hasMenu = false;
 
-const brand = { logo: header.logo || {title: 'Intitulé<br>officiel'} };
+const brand = { logo: header.logo || {title: 'Intitulé<br aria-hidden="true">officiel'} };
 data.body.brand = brand;
 
 if (header.operator !== undefined) {

src/component/header/example/index.ejs

@@ -8,38 +8,38 @@
     }
 </style>
 
-<%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, navigation: 'min' }}, true, './layout');  %>
 
-<%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service: true }}, true, './layout');  %>
+<%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, service: true }}, true, './layout');  %>
 
-<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links: { buttons: [{ url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}] }, service: true}}, true, './layout');  %>
+<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, links: { buttons: [{ url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}] }, service: true}}, true, './layout');  %>
 
-<%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:true, service: true}}, true, './layout');  %>
+<%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, links:true, service: true}}, true, './layout');  %>
 
-<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout');  %>
+<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout');  %>
 
-<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout');  %>
+<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout');  %>
 
-<%- sample('Header avec selecteur de langues et raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout');  %>
+<%- sample('Header avec selecteur de langues et raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout');  %>
 
-<%- sample('Header avec selecteur de langues et paramètre d\'affichage', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:{ buttons: [{ label: 'Paramètres d\'affichage', classes: [`${prefix}-icon-theme-fill`, `${prefix}-btn--icon-left`], attributes: {'aria-controls': `${prefix}-theme-modal`, 'data-fr-opened': false}}, { url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}]}, navigation: true, translate: true, display: true, service: true}}, true, './layout');  %>
+<%- sample('Header avec selecteur de langues et paramètre d\'affichage', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, links:{ buttons: [{ label: 'Paramètres d\'affichage', classes: [`${prefix}-icon-theme-fill`, `${prefix}-btn--icon-left`], attributes: {'aria-controls': `${prefix}-theme-modal`, 'data-fr-opened': false}}, { url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}]}, navigation: true, translate: true, display: true, service: true}}, true, './layout');  %>
 
-<%- sample('Header avec nom de service, lien d’accès', './sample/header.ejs', {header: { logo:{ title: 'Ministère<br>de l’europe<br>et des affaires<br>étrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header avec nom de service, lien d’accès', './sample/header.ejs', {header: { logo:{ title: 'Ministère<br aria-hidden="true">de l’europe<br aria-hidden="true">et des affaires<br aria-hidden="true">étrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout');  %>
 
-<%- sample('Header avec nom de service, recherche', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service: 'title', search: true, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header avec nom de service, recherche', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, service: 'title', search: true, navigation: 'min' }}, true, './layout');  %>
 
-<%- sample('Header avec logo opérateur vertical, recherche', './sample/header.ejs', {header: { logo:{ title: 'République<br>Française'}, operator: imgData('img/placeholder.3x4.png', 'rendered', null,  null, 'max-width:3.5rem;'), search: true, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header avec logo opérateur vertical, recherche', './sample/header.ejs', {header: { logo:{ title: 'République<br aria-hidden="true">Française'}, operator: imgData('img/placeholder.3x4.png', 'rendered', null,  null, 'max-width:3.5rem;'), search: true, navigation: 'min' }}, true, './layout');  %>
 
-<%- sample('Header avec logo opérateur horizontal, nom de service, lien d’accès, recherche', './sample/header.ejs', {header: { logo:{ title: 'République<br>Française'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), service: true, links:true, search: true, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header avec logo opérateur horizontal, nom de service, lien d’accès, recherche', './sample/header.ejs', {header: { logo:{ title: 'République<br aria-hidden="true">Française'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), service: true, links:true, search: true, navigation: 'min' }}, true, './layout');  %>
 
-<%- sample('Header avec raccourcis dupliqués, pour Angular, React et Vue', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:true, duplicateLinks: true }}, true, './layout');  %>
+<%- sample('Header avec raccourcis dupliqués, pour Angular, React et Vue', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, links:true, duplicateLinks: true }}, true, './layout');  %>
 
-<%- sample('Header avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout');  %>
 
-<%- sample('Header logo opérateur + bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header logo opérateur + bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout');  %>
 
-<%- sample('Header min avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, beta: true, navigation: 'min' }}, true, './layout');  %>
+<%- sample('Header min avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, beta: true, navigation: 'min' }}, true, './layout');  %>
 
 <%- deprecation(); %>
 
-<%- sample('Header déprécié', '../deprecated/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout');  %>
+<%- sample('Header déprécié', '../deprecated/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout');  %>

src/component/logo/example/index.ejs

@@ -1,10 +1,10 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Logo MD (par défaut)', './sample/logo.ejs', {logo: {title: 'Intitulé<br>officiel'}}, true); %>
+<%- sample('Logo MD (par défaut)', './sample/logo.ejs', {logo: {title: 'Intitulé<br aria-hidden="true">officiel'}}, true); %>
 
-<%- sample('Logo SM', './sample/logo.ejs', {logo: {size: 'sm', title: 'Intitulé<br>officiel'}, }, true); %>
+<%- sample('Logo SM', './sample/logo.ejs', {logo: {size: 'sm', title: 'Intitulé<br aria-hidden="true">officiel'}, }, true); %>
 
-<%- sample('Logo LG', './sample/logo.ejs', {logo: {size: 'lg', title: 'Intitulé<br>officiel'}}, true); %>
+<%- sample('Logo LG', './sample/logo.ejs', {logo: {size: 'lg', title: 'Intitulé<br aria-hidden="true">officiel'}}, true); %>
 
 <%- sample('Exemple logo long', './sample/logo-ecology.ejs', {}, true); %>
 

src/component/logo/example/sample/logo-diplomacy.ejs

@@ -1 +1 @@
-<%- include('./logo', {logo: { title: 'Ministère<br>de l’europe<br>et des affaires<br>étrangères'}});%>
+<%- include('./logo', {logo: { title: 'Ministère<br aria-hidden="true">de l’europe<br aria-hidden="true">et des affaires<br aria-hidden="true">étrangères'}});%>

src/component/logo/example/sample/logo-ecology.ejs

@@ -1 +1 @@
-<%- include('./logo', {logo: { title: 'Ministère<br>de la transition<br>écologique<br>et solidaire'}});%>
+<%- include('./logo', {logo: { title: 'Ministère<br aria-hidden="true">de la transition<br aria-hidden="true">écologique<br aria-hidden="true">et solidaire'}});%>

src/component/logo/example/sample/logo-egality.ejs

@@ -1 +1 @@
-<%- include('./logo', {logo: { title: 'Secrétaire d’État<br>chargé(e) de<br>l’égalité entre les<br>femmes et les<br>hommes et de la<br>lutte contre les<br>discriminations'} });%>
+<%- include('./logo', {logo: { title: 'Secrétaire d’État<br aria-hidden="true">chargé(e) de<br aria-hidden="true">l’égalité entre les<br aria-hidden="true">femmes et les<br aria-hidden="true">hommes et de la<br aria-hidden="true">lutte contre les<br aria-hidden="true">discriminations'} });%>

src/component/skiplink/example/prepend.ejs

@@ -1,2 +1,2 @@
 <%- include('./sample/skiplinks'); %>
-<%- include('../../header/example/sample/header.ejs', { header : { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: true, search: { modalId: 'header-search', input: {placeholder: 'Rechercher', label:'Rechercher'}, button: {id: uniqueId('search-btn'), label: 'Rechercher', title: 'Rechercher', modalId: 'header-search'}}, navigation: true, menu: { modalId: 'header-navigation' }}}); %>
+<%- include('../../header/example/sample/header.ejs', { header : { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, service:true, links:true, search: true, search: { modalId: 'header-search', input: {placeholder: 'Rechercher', label:'Rechercher'}, button: {id: uniqueId('search-btn'), label: 'Rechercher', title: 'Rechercher', modalId: 'header-search'}}, navigation: true, menu: { modalId: 'header-navigation' }}}); %>

src/page/example/layout.ejs

@@ -6,7 +6,7 @@ const search = locals.search || false;
     <h4><%= title %></h4>
 <% } %>
 <div class="<%= prefix %>-mb-6v" >
-  <%- include('../../component/header/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: search, navigation: true }}, true); %>
+  <%- include('../../component/header/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé<br aria-hidden="true">officiel'}, service:true, links:true, search: search, navigation: true }}, true); %>
 
   <% if (locals.breadcrumb !== false) { %>
     <% const breadcrumb = {

tool/example/decorator.ejs

@@ -106,9 +106,9 @@ locals.imgAltText = 'texte alternatif de l’image';
 const brandData = (component = 'header', logo = true, service = false, operator = false, beta = false, href = '/') => {
   const data = {};
   const logoPlaceholder = 'Nom de l’entité (ministère, secrétariat d‘état, gouvernement)';
-  const logoTitlePlaceholder = 'Intitulé<br>officiel';
+  const logoTitlePlaceholder = 'Intitulé<br aria-hidden="true">officiel';
   const logoPlaceholderOperator = 'République Française';
-  const logoTitlePlaceholderOperator = 'République<br>Française';
+  const logoTitlePlaceholderOperator = 'République<br aria-hidden="true">Française';
   const operatorPlaceholder = imgAltText + ' : nom de l\'opérateur ou du site serviciel';
   const servicePlaceholder = {
     title: 'Nom du site / service',